/* Side A Rotations — a selector's site, laid out like a listening session. Always dark. */
:root {
  --bg: #242424;
  --fg: #e7e2d8;
  --muted: #aaa69f;
  --accent: #91211d;
  --accent-fg: #e7e2d8;
  --panel: #2d2c2a;
  --line: #45433f;
  --disc-base: #1d1d1c;
  --disc-line: #2e2e2d;
  --sheen: rgba(231, 226, 216, 0.10);
  --glow: rgba(231, 226, 216, 0.085);
  --glow-wide: rgba(231, 226, 216, 0.03);
  --veil: rgba(36, 36, 36, 0.96);
  --veil-img: rgba(36, 36, 36, 0.62);
  --line-strong: rgba(231, 226, 216, 0.30);
  --show-cream: block;
  --show-ink: none;
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Lexend Giga", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
/* one theme only: the site is always dark, whatever the visitor's phone or computer is set to */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  padding-inline: 20px;
  padding-block: 0 40px;
}
.page { position: relative; z-index: 1; margin-inline: -20px; padding-inline: 20px; overflow-x: clip; }
.page::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 980px; z-index: -1; pointer-events: none; background: radial-gradient(48% 62% at 84% 34%, var(--glow), transparent 72%), radial-gradient(90% 55% at 50% 0%, var(--glow-wide), transparent 70%); }
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.1; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wrap { max-width: 1120px; margin-inline: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
button { font: inherit; color: inherit; }

.label {
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); margin: 28px 0 0; }

/* header */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 22px 0 22px;
  border-bottom: 1px solid var(--line);
}
.brand { display: block; line-height: 0; text-decoration: none; }
.brand { color: var(--fg); }
.brand svg { display: block; width: 200px; max-width: 100%; height: auto; }
@media (max-width: 800px) { .brand svg { width: 176px; } }
nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 3.6px; }  /* bottom edge of the buttons sits on the baseline of the logo tagline */
nav a {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center;
  font-family: var(--font-brand); font-size: 11.5px; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--fg);
  line-height: 1;
  padding: 10px 16px 10px 20px;
  border: 1px solid var(--fg);
  border-radius: 10px;
  transition: color 0.3s ease 0.05s, border-color 0.3s ease, background-color 0s linear 0s;
}
/* the fill that sweeps in from the left, like a needle crossing the record */
nav a::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--fg); transform: scaleX(0); transform-origin: left center; transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.26, 1); }
/* small red "now playing" light, shown on the section you are reading */
nav a::after { content: ""; position: absolute; left: 9px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0.4); transition: opacity 0.3s ease, transform 0.3s ease; }
nav a[aria-current] { border-color: var(--fg); }
nav a[aria-current]::after { opacity: 1; transform: none; }
nav a:focus-visible { color: var(--bg); border-color: var(--fg); }
nav a:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) {
  nav a:hover { color: var(--bg); border-color: var(--fg); background-color: var(--fg); transition: color 0.3s ease 0.05s, border-color 0.3s ease, background-color 0s linear 0.38s; }
  nav a:hover::before { transform: scaleX(1); }
}
@media (max-width: 960px) { nav { gap: 6px; } nav a { font-size: 11px; letter-spacing: 0.1em; padding: 9px 12px 9px 17px; } nav a::after { left: 8px; } }
@media (max-width: 800px) { nav { margin-bottom: 0; } nav a { padding-left: 13px; padding-right: 12px; } nav a::after { display: none; } }  /* phones: label centred in the button (no room for the red light) */
@media (prefers-reduced-motion: reduce) { nav a, nav a::before, nav a::after { transition: none; } }

/* hero */
.hero { position: relative; display: block; padding-block: 52px 44px; }
@media (min-width: 801px) { .hero { min-height: 470px; display: flex; flex-direction: column; justify-content: center; padding-block: 56px; } }
.hero > div:first-child { position: relative; z-index: 1; max-width: 680px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 5.4vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; font-weight: 600; }
.hero .lead { max-width: 33em; font-size: 17px; font-weight: 300; margin: 0 0 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-block;
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  border: 1px solid var(--fg);
  border-radius: 10px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: color 0.3s ease 0.05s, border-color 0.3s ease, background-color 0s linear 0s;
}
/* same sweep as the menu: a cream fill slides in from the left */
.btn::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--fg); transform: scaleX(0); transform-origin: left center; transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.26, 1); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn:focus-visible { color: var(--bg); border-color: var(--fg); }
.btn:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) {
  .btn:hover { color: var(--bg); border-color: var(--fg); background-color: var(--fg); transition: color 0.3s ease 0.05s, border-color 0.3s ease, background-color 0s linear 0.38s; }
  .btn:hover::before { transform: scaleX(1); }
}

.disc-wrap { --d: 440px; position: absolute; z-index: 0; pointer-events: none; width: var(--d); height: var(--d); top: 50%; right: calc(50% - 50vw - 110px); transform: translateY(-50%); }
.disc { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, var(--disc-base) 0 3px, var(--disc-line) 3px 4px); box-shadow: inset 0 0 0 1px var(--disc-line); animation: spin 50s linear infinite; will-change: transform; }
.disc-label { position: absolute; inset: 33%; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.disc-label span { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--d) * 0.13); line-height: 1; color: var(--accent-fg); margin-top: -8%; }
.disc-label::after { content: ""; position: absolute; width: 6%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.disc-sheen { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 25deg, transparent 0 6%, var(--sheen) 11%, transparent 17% 56%, var(--sheen) 61%, transparent 67% 100%); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .disc { animation: none; } .btn, .btn::before { transition: none; } html { scroll-behavior: auto; } }

.next-stop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 32px; padding-block: 16px; border-block: 1px solid var(--line); }
.next-stop .stop { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; min-width: 0; }
.next-stop .stop + .stop { padding-left: 32px; border-left: 1px solid var(--line); }
@media (max-width: 800px) {
  .next-stop { grid-template-columns: minmax(0, 1fr); }
  .next-stop .stop + .stop { padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid var(--line); }
}
.next-stop strong { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }

/* sections */
section { padding-block: 64px; }
section + section { border-top: 1px solid var(--line); }
h2 {
  font-family: var(--font-brand);
  font-weight: 300;
  font-size: clamp(16px, 2.3vw, 24px);
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 10px 0 0;
  text-wrap: balance;
}
.two { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px 56px; }
.prose p { margin: 0 0 1em; max-width: 36em; }
.prose p:first-child { font-size: 19px; font-weight: 300; }

/* selezione */
.picks-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-top: 48px; padding-bottom: 14px; border-bottom: 4px solid var(--fg); }
.picks-head h3 { font-family: var(--font-brand); font-weight: 300; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }

/* Friday Rotation: the record of the week turns on its label, like the Instagram Reel */
.fr { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px 64px; align-items: center; margin-top: 36px; }
.fr-disc { position: relative; width: 100%; aspect-ratio: 1 / 1; }
/* ring around the record in the colour of the series (red Friday, blue Monday) */
.fr-disc::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--rot); transition: border-color 0.3s ease; pointer-events: none; }
.fr-vinyl { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, var(--disc-base) 0 3px, var(--disc-line) 3px 4px); box-shadow: inset 0 0 0 1px var(--disc-line); animation: spin 9s linear infinite; }
.fr-vinyl img { position: absolute; left: 50%; top: 50%; width: 43%; height: 43%; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; }
.fr-vinyl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.6%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); transform: translate(-50%, -50%); }
.fr-no { font-family: var(--font-brand); font-weight: 300; font-size: clamp(34px, 4.6vw, 54px); letter-spacing: 0.06em; line-height: 1; }
.fr-no .deg { color: var(--rot); transition: color 0.3s ease; }  /* the ° takes the colour of the series */
.fr-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; margin: 22px 0 4px; }
.fr-artist { margin: 0; font-size: 17px; }
.fr-meta { margin: 6px 0 0; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.fr-tracks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 6px; }
.fr-tracks li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; font-size: 14px; }
.fr-tracks b { font-family: var(--font-brand); font-weight: 400; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.fr .actions { margin-top: 26px; }
.fr-archive-wrap { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.fr-archive { display: flex; gap: 20px; margin-top: 16px; overflow-x: auto; padding: 2px 2px 4px; }
.fr-ep { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.fr-ep .dot { position: relative; width: 64px; height: 64px; margin: 6px; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, var(--disc-base) 0 2px, var(--disc-line) 2px 3px); }
.fr-ep .dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; transition: border-color 0.25s ease; }
.fr-ep .dot img { position: absolute; inset: 28%; width: 44%; height: 44%; border-radius: 50%; object-fit: cover; }
.fr-ep .n { font-family: var(--font-brand); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); }
.fr-ep[aria-current="true"] .dot::after { border-color: var(--rot); }
.fr-ep[aria-current="true"] .n { color: var(--fg); }
@media (hover: hover) { .fr-ep:hover .dot::after { border-color: var(--fg); } .fr-ep[aria-current="true"]:hover .dot::after { border-color: var(--rot); } }
.fr-ep.next { cursor: default; }
.fr-ep.next .dot { background: none; border: 1px dashed var(--muted); }
.fr-ep.next .dot::after { display: none; }
.fr-more { margin-top: 36px; }
@media (max-width: 800px) {
  .fr { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fr-disc { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) { .fr-vinyl { animation: none; } }

.fr-blank { position: absolute; left: 50%; top: 50%; width: 43%; height: 43%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--rot); display: grid; place-items: center; text-align: center; }
.fr-blank[hidden] { display: none; }
.fr-blank span { position: absolute; left: 0; right: 0; top: 17%; font-family: var(--font-brand); font-size: clamp(11px, 1.4vw, 15px); letter-spacing: 0.14em; line-height: 1.5; text-transform: uppercase; color: var(--accent-fg); }

/* tap (or click) the record: it stops and shows the tracklist on its own round surface */
.fr-disc { cursor: pointer; -webkit-tap-highlight-color: transparent; outline-offset: 12px; border-radius: 50%; }
.fr-tl { position: absolute; inset: 0; z-index: 3; border-radius: 50%; background: rgba(58, 56, 52, 0.94); box-shadow: inset 0 0 0 1px rgba(231, 226, 216, 0.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 17%; text-align: center; opacity: 0; transform: scale(0.94); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.fr-disc.show-tl .fr-tl { opacity: 1; transform: none; }
.fr-disc.show-tl .fr-vinyl { animation-play-state: paused; }
.fr-tl .t-label { font-family: var(--font-brand); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fr-tl ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fr-tl li { font-size: 14px; line-height: 1.3; }
.fr-tl li b { font-family: var(--font-brand); font-weight: 400; font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); margin-right: 8px; }
.fr-tl .t-empty { font-size: 14px; color: var(--muted); }
.fr-tl .t-close { font-family: var(--font-brand); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); opacity: 0.8; }
@media (hover: hover) { .fr-tl .t-close { display: none; } }
@media (hover: none) {
  .fr-disc { margin-bottom: 30px; }
  .fr-disc::after { content: "Tap the record for the tracklist"; position: absolute; left: 0; right: 0; top: calc(100% + 18px); text-align: center; font-family: var(--font-brand); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: opacity 0.3s ease; }
  .fr-disc.show-tl::after { opacity: 0; }
}
@media (max-width: 400px) { .fr-tl { padding: 15%; gap: 9px; } .fr-tl li { font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .fr-tl { transition: none; } }

/* tracklist overlay (picks + shop) */
.cover { position: relative; overflow: hidden; }
.cv:focus-visible, .cover:focus-visible { outline-offset: 2px; }
.cv::after, .cover::after {
  content: "Tracklist";
  position: absolute; right: 12px; bottom: 10px; z-index: 1;
  font-family: var(--font-brand); font-size: 8.5px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg); opacity: 0.5; pointer-events: none;
  transition: opacity 0.25s ease;
}
.cover.alt::after { color: var(--accent-fg); }
.cover.ink::after { color: var(--bg); }
.tracks {
  position: absolute; inset: -2px; z-index: 2; margin: 0; padding: 20px 22px; list-style: none;  /* bleeds 2px past the edge (clipped) so no sliver of the cover shows on iPhone */
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  background: var(--veil);
  color: var(--fg); font-family: var(--font-body); text-align: left;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.tracks::before { content: "Tracklist"; font-family: var(--font-brand); font-size: 9px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tracks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 13px; font-weight: 400; line-height: 1.35; }
.tracks b { font-family: var(--font-brand); font-size: 10px; font-weight: 400; letter-spacing: 0.06em; color: var(--muted); }
.cv.show .tracks, .cover.show .tracks, .cv:focus-visible .tracks, .cover:focus-visible .tracks { opacity: 1; }
.cv.show::after, .cover.show::after { opacity: 0; }
@media (hover: hover) {
  .cv:hover .tracks, .cover:hover .tracks { opacity: 1; }
  .cv:hover::after, .cover:hover::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .tracks, .cv::after, .cover::after { transition: none; } }

/* digging */
.dig { list-style: none; margin: 32px 0 0; padding: 0; border-top: 2px solid var(--fg); }
.dig > li { border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.dig-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr) minmax(0, 1.5fr) 56px 150px;
  grid-template-areas: "city coord what when tog";
  gap: 6px 20px;
  align-items: baseline;
  width: 100%;
  padding: 16px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dig-row .city { grid-area: city; font-family: var(--font-brand); font-weight: 400; font-size: clamp(14px, 1.9vw, 17px); letter-spacing: 0.04em; text-transform: uppercase; }
.dig-row .city small { font-family: var(--font-brand); font-weight: 300; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-left: 8px; display: inline-block; }
.dig-row .coord { grid-area: coord; }
.dig-row .when { grid-area: when; }
.dig-row .coord, .dig-row .when { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dig-row .what { grid-area: what; font-size: 14px; font-style: italic; min-width: 0; }
.dig-row .tog { grid-area: tog; align-self: center; justify-self: end; display: flex; align-items: center; gap: 12px; }
.dig-row .n { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.dig-row .sign { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; font-size: 18px; line-height: 1; }
@media (max-width: 800px) {
  .dig-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "city tog" "coord when" "what what"; }
}

/* store */
.store-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; }
.store-head p { margin: 0; max-width: 32em; justify-self: end; text-align: right; }
@media (max-width: 800px) { .store-head p { justify-self: start; text-align: left; } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chip {
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px 20px; margin-top: 28px; }
.item { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cover {
  aspect-ratio: 1 / 1;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
}
.cover .top { display: flex; justify-content: space-between; gap: 8px; }
.cover .big { font-family: var(--font-display); font-weight: 600; font-size: clamp(80px, 16vw, 130px); line-height: 0.8; letter-spacing: -0.05em; color: var(--fg); }
.cover.alt { background: var(--accent); border-color: var(--accent); }
.cover.alt .big, .cover.alt .label { color: var(--accent-fg); }
.cover.ink { background: var(--fg); border-color: var(--fg); }
.cover.ink .big { color: var(--bg); }
.cover.ink .label { color: var(--bg); }
.item h3 { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; line-height: 1.25; margin: 4px 0 0; }
.item .by { margin: 0; color: var(--muted); font-size: 14px; }
.item .spec { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); margin: 0; }
.buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: auto; padding-top: 8px; }
.price { font-family: var(--font-mono); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.buy .btn { padding: 10px 12px; font-size: 11px; }
@media (max-width: 560px) {
  .shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .cover { padding: 10px; }
  .cover .big { font-size: 64px; }
  .item h3 { font-size: 15px; }
  .item .by { font-size: 12.5px; }
  .item .spec { font-size: 11px; }
  .price { font-size: 15px; }
  .buy { gap: 8px; }
  .buy .btn { padding: 8px 9px; font-size: 10px; }
  .shop .tracks { padding: 12px 12px; gap: 5px; }
  .shop .tracks::before { font-size: 8px; margin-bottom: 2px; }
  .shop .tracks li { grid-template-columns: 22px minmax(0, 1fr); gap: 4px; font-size: 11.5px; line-height: 1.25; }
  .shop .tracks b { font-size: 9px; }
  .cover::after { right: 8px; bottom: 7px; font-size: 7.5px; }
}

/* contatti */
.contact-box { background: var(--panel); border: 1px solid var(--line); color: var(--fg); padding: 36px 28px; margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px 40px; }
.contact-box h2 { margin: 10px 0 14px; }
.contact-box p { margin: 0 0 10px; max-width: 32em; }
.contact-box .label { color: var(--muted); }
.contact-box code { font-family: var(--font-mono); font-size: 16px; background: var(--fg); color: var(--bg); padding: 4px 10px; user-select: all; overflow-wrap: anywhere; display: inline-block; }
.contact-box a { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; }
.contact-box a.mail { position: relative; isolation: isolate; overflow: hidden; font-size: 16px; background: var(--fg); color: var(--bg); padding: 6px 14px; border: 1px solid var(--fg); border-radius: 10px; text-decoration: none; overflow-wrap: anywhere; display: inline-block; transition: color 0.3s ease 0.05s, border-color 0.3s ease, background-color 0s linear 0s; }
/* same sweep as the other buttons: the Side A red slides in over the cream */
.contact-box a.mail::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.26, 1); }
.contact-box a.mail:focus-visible { color: var(--accent-fg); border-color: var(--accent); }
.contact-box a.mail:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) {
  .contact-box a.mail:hover { color: var(--accent-fg); border-color: var(--accent); background-color: var(--accent); transition: color 0.3s ease 0.05s, border-color 0.3s ease, background-color 0s linear 0.38s; }
  .contact-box a.mail:hover::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .contact-box a.mail, .contact-box a.mail::before { transition: none; } }
.contact-box ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--line); margin-top: 24px; }

@media (max-width: 800px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: 32px 32px; }
  .disc-wrap { --d: 250px; top: auto; bottom: 0; transform: none; right: calc(50% - 50vw - 70px); }
  .two, .store-head, .contact-box { grid-template-columns: minmax(0, 1fr); }
  body { font-size: 16px; }
  section { padding-block: 48px; }
}

/* =========================================================
   BLOG — shared pieces (breadcrumbs, footer links)
   ========================================================= */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 36px 0 0; font-family: var(--font-brand); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 5px; }
.crumbs .sep { opacity: 0.6; }
.led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rot, var(--accent)); margin-right: 10px; vertical-align: 0.1em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--fg); }
.next-stop a { color: inherit; text-decoration: none; }
.next-stop a:hover strong { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* =========================================================
   HOME — the two series as record sleeves
   (a record pulled half out of its sleeve; on hover it slides out and spins)
   ========================================================= */
.rot-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 56px; margin-top: 40px; }
.sleeve-card { display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

.sleeve-stage { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1.42 / 1; container-type: inline-size; }
.sleeve {
  position: absolute; left: 0; top: 0; z-index: 2; width: 70.42%; aspect-ratio: 1 / 1;
  background-color: var(--rot);
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.09), transparent 36%, transparent 64%, rgba(0, 0, 0, 0.18));
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34);
  /* die-cut centre hole, like a company sleeve: the record shows through */
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent 35%, #000 35.7%);
  mask: radial-gradient(circle closest-side at 50% 50%, transparent 35%, #000 35.7%);
}
.sleeve::before { content: ""; position: absolute; left: 50%; top: 50%; width: 41.5%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(231, 226, 216, 0.3); }
.sleeve span { position: absolute; font-family: var(--font-brand); text-transform: uppercase; color: rgba(231, 226, 216, 0.86); }
.sleeve .s-brand { left: 8%; top: 8%; font-size: max(7px, 1.9cqw); letter-spacing: 0.16em; }
.sleeve .s-no { right: 8%; top: 8%; font-size: max(7px, 1.9cqw); letter-spacing: 0.14em; }
.sleeve .s-name { left: 8%; bottom: 8%; font-weight: 300; font-size: max(12px, 4.4cqw); line-height: 1.15; letter-spacing: 0.08em; color: #e7e2d8; }
.sleeve .s-day { right: 8%; bottom: 8.5%; font-size: max(7px, 1.8cqw); letter-spacing: 0.14em; padding: 0.55em 0.75em; border: 1px solid rgba(231, 226, 216, 0.5); border-radius: 6px; }
.sleeve-rec { position: absolute; z-index: 1; top: 2%; left: 1.41%; width: 67.6%; aspect-ratio: 1 / 1; transition: transform 0.75s cubic-bezier(0.22, 0.8, 0.26, 1); }
.sleeve-rec .vinyl { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, var(--disc-base) 0 2px, var(--disc-line) 2px 3px); box-shadow: inset 0 0 0 1px var(--disc-line), 0 10px 26px rgba(0, 0, 0, 0.3); animation: spin 5s linear infinite; animation-play-state: paused; }
.sleeve-rec .vinyl img { position: absolute; left: 50%; top: 50%; width: 33%; height: 33%; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; }
.sleeve-rec .vinyl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.4%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); transform: translate(-50%, -50%); }
.sleeve-rec .disc-sheen { opacity: 0.8; }
/* at rest the record sits fully inside, label centred in the hole; it slides out and spins on hover
   (on phones: when the sleeve scrolls into view) */
.sleeve-card.is-out .sleeve-rec { transform: translateX(44%); }
.sleeve-card.is-out .vinyl { animation-play-state: running; }
/* computer: only the record area (sleeve) and the button wake it up, not the text in between */
.sleeve-stage { display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sleeve-card:has(.btn:focus-visible) .sleeve-rec { transform: translateX(44%); }
.sleeve-card:has(.btn:focus-visible) .vinyl { animation-play-state: running; }
@media (hover: hover) {
  .sleeve-card:has(.sleeve-stage:hover, .btn:hover) .sleeve-rec { transform: translateX(44%); }
  .sleeve-card:has(.sleeve-stage:hover, .btn:hover) .vinyl { animation-play-state: running; }
}
.sleeve-info { margin-top: 26px; max-width: 460px; }
.sleeve-info h3 { font-family: var(--font-brand); font-weight: 300; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; margin: 8px 0 4px; }
.sleeve-info .tag { margin: 0; font-style: italic; }
.sleeve-info .latest { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.sleeve-info .latest b { font-family: var(--font-brand); font-weight: 400; font-size: 11px; letter-spacing: 0.1em; color: var(--fg); margin-right: 10px; }
.deg { color: var(--rot, var(--accent)); }
.sleeve .deg { color: inherit; }
.sleeve-info .btn { margin-top: 20px; }
@media (hover: hover) {
  .sleeve-card:has(.sleeve-stage:hover) .btn { color: var(--bg); border-color: var(--fg); background-color: var(--fg); transition: color 0.3s ease 0.05s, border-color 0.3s ease, background-color 0s linear 0.38s; }
  .sleeve-card:has(.sleeve-stage:hover) .btn::before { transform: scaleX(1); }
}
.collection-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.collection-row p { margin: 0; max-width: 34em; }
@media (max-width: 800px) {
  .rot-cards { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (prefers-reduced-motion: reduce) { .sleeve-rec { transition: none; } .sleeve-rec .vinyl { animation: none; } }

/* =========================================================
   HOME — digging diary rows open the city page
   ========================================================= */
a.dig-row { text-decoration: none; }
.dig-row .sign { position: relative; isolation: isolate; overflow: hidden; border-color: var(--fg); color: var(--fg); transition: color 0.3s ease 0.05s, background-color 0s linear 0s; }
.dig-row .sign::before { content: "+"; position: relative; z-index: 1; }
.dig-row .sign::after { content: ""; position: absolute; inset: -2px; z-index: 0; background: var(--fg); transform: scaleX(0); transform-origin: left center; transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.26, 1); }
.dig-row:focus-visible .sign { color: var(--bg); }
.dig-row:focus-visible .sign::after { transform: scaleX(1); }
@media (hover: hover) {
  .dig-row:hover .sign { color: var(--bg); background-color: var(--fg); transition: color 0.3s ease 0.05s, background-color 0s linear 0.38s; }
  .dig-row:hover .sign::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .dig-row .sign, .dig-row .sign::after { transition: none; } }
.dig-row:focus-visible .city { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }

/* =========================================================
   SERIES PAGES — Friday Rotation, Deep Monday
   ========================================================= */
.series-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 24px 56px; align-items: end; padding: 24px 0 52px; }
.series-title { font-family: var(--font-brand); font-weight: 300; font-size: clamp(30px, 5.6vw, 66px); overflow-wrap: anywhere; letter-spacing: 0.04em; line-height: 1.05; text-transform: uppercase; margin: 14px 0 14px; }
.series-tag { margin: 0; font-style: italic; font-size: 19px; }
.series-intro p { margin: 0 0 1em; max-width: 34em; }
.series-intro p:last-child { margin-bottom: 0; }
.series .fr { margin-top: 8px; }
.also { margin-top: 36px; }
.also .sleeve-card { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px 72px; align-items: center; }
.also .sleeve-info { margin-top: 0; }
@media (max-width: 800px) {
  .series-head, .also .sleeve-card { grid-template-columns: minmax(0, 1fr); }
  .series-head { padding-bottom: 40px; }
}

/* =========================================================
   CITY PAGES — the digging diary, one page per trip
   ========================================================= */
.city-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px 56px; align-items: end; padding: 24px 0 52px; }
.city-top { grid-column: 1 / -1; }
.city-title { font-family: var(--font-brand); font-weight: 300; font-size: clamp(28px, 8vw, 96px); letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; margin: 16px 0 6px; overflow-wrap: anywhere; }
.city-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.city-head { align-items: start; }
.city-line { margin: 18px 0 0; font-style: italic; font-size: 19px; }
.city-intro p { margin: 0 0 1em; max-width: 34em; }
.city-intro p:first-child { font-size: 19px; font-weight: 300; }
.chapters { border-top: 1px solid var(--line); }
.chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; align-items: center; padding: 64px 0; border-bottom: 1px solid var(--line); }
.chapter.wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
.chapter.flip .ch-photo { order: 2; }
.chapter.flip.wide { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); }
.ch-photo { margin: 0; }
.ch-photo .frame { border: 2px solid var(--fg); border-radius: 14px; overflow: hidden; }
.ch-photo img { display: block; width: 100%; height: auto; }
.chapter:not(.wide) .ch-photo { max-width: 400px; width: 100%; justify-self: center; }
.ch-photo figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.ch-no { font-family: var(--font-brand); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
.ch-text h2 { margin-top: 12px; }
.ch-place { margin: 6px 0 0; font-family: var(--font-brand); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ch-text p.body { margin: 18px 0 0; max-width: 32em; }
.city-end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; padding-top: 56px; }
.city-end strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 22px; margin-top: 6px; }
.city-end .actions { justify-content: flex-end; }
@media (max-width: 800px) {
  .city-head, .chapter, .chapter.wide, .chapter.flip.wide, .city-end { grid-template-columns: minmax(0, 1fr); }
  .chapter { padding: 44px 0; gap: 22px; }
  .chapter.flip .ch-photo { order: 0; }
  .city-head { padding-bottom: 40px; }
  .city-end .actions { justify-content: flex-start; }
}

/* 404 */
.lost { padding: 96px 0 64px; max-width: 40em; }
.lost h1 { font-family: var(--font-brand); font-weight: 300; font-size: clamp(30px, 5vw, 54px); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1; margin: 14px 0 18px; }
.fr-title { text-transform: none; letter-spacing: 0; text-wrap: initial; }
.dig-row:hover .city { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }

/* =========================================================
   HERO RECORD — drawn in thin warm lines, like an engraving on cream paper;
   the Side A label stays red with the A, a tonearm rests on the grooves
   ========================================================= */
.hero .disc-wrap { right: calc(50% - 50vw - 70px); color: var(--fg); }
.hero .disc { background: none; box-shadow: none; }
.hero .disc svg, .hero .arm { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rec .rim { fill: rgba(231, 226, 216, 0.035); stroke: var(--fg); stroke-opacity: 1; stroke-width: 3.2; }  /* bold cream outline, Side A cream */
.rec .lead { fill: none; stroke: currentColor; stroke-opacity: 0.22; stroke-width: 0.8; }
.rec .gr { fill: none; stroke: currentColor; stroke-opacity: 0.085; stroke-width: 0.7; }
.rec .gap { fill: none; stroke: currentColor; stroke-opacity: 0.32; stroke-width: 0.9; }
.rec .label { fill: var(--accent); }
.rec .label-ring { fill: none; stroke: #e7e2d8; stroke-opacity: 0.32; stroke-width: 0.8; }
.rec .ring-text { fill: #e7e2d8; fill-opacity: 0.85; font-family: var(--font-brand); font-size: 8.6px; letter-spacing: 0.18em; }
.rec .a { fill: #e7e2d8; font-family: var(--font-brand); font-weight: 400; font-size: 42px; }
.rec .hole { fill: var(--bg); }
.hero .disc-sheen { opacity: 0.55; }
.arm { pointer-events: none; }
/* a DJ-style S-shaped tonearm, drawn solid and warm so it reads as a real object over the line-drawn record */
.arm-body { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45)); }
.arm-plate { fill: rgba(36, 36, 36, 0.55); stroke: #e7e2d8; stroke-opacity: 0.45; stroke-width: 1.4; }
.arm-ring { fill: none; stroke: #e7e2d8; stroke-opacity: 0.3; stroke-width: 1; }
.arm-dot { fill: #242424; }
.arm-rib { stroke: #242424; stroke-opacity: 0.3; stroke-width: 1.2; }
.arm-tube-o { fill: none; stroke: #d2ccc0; stroke-width: 9; stroke-linecap: round; }
.arm-tube-i { fill: none; stroke: #e7e2d8; stroke-width: 3.4; stroke-linecap: round; transform: translateX(-1.2px); }
.arm-shell { stroke: #242424; stroke-opacity: 0.25; stroke-width: 1; }
.arm-lift { fill: none; stroke: #e7e2d8; stroke-width: 3.2; stroke-linecap: round; }
.arm-cart { fill: #e7e2d8; stroke: #242424; stroke-opacity: 0.3; stroke-width: 1; }
.arm-stylus { stroke: #242424; stroke-width: 1.6; stroke-linecap: round; }
@media (max-width: 800px) { .hero .arm { display: none; } .hero .disc-wrap { right: calc(50% - 50vw - 60px); } }

/* =========================================================
   COLLECTION — the records as a list, like a crate index
   ========================================================= */
.coll-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.coll-tools .filters { margin-top: 0; }
.coll-count { font-family: var(--font-brand); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.crate { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid var(--fg); }
.crate > li { border-bottom: 1px solid var(--line); }
.crate-row { display: grid; grid-template-columns: 52px minmax(0, 1.5fr) minmax(0, 1.1fr) 56px minmax(0, 1.1fr) 30px; grid-template-areas: "disc rec lbl year tags go"; gap: 6px 24px; align-items: center; padding: 16px 0; color: inherit; text-decoration: none; }
.crate-disc { grid-area: disc; position: relative; width: 52px; height: 52px; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, var(--disc-base) 0 1.5px, var(--disc-line) 1.5px 2.5px); box-shadow: 0 0 0 2px var(--ring, var(--fg)); }  /* cream outline; the series colour if the record was a Rotation */
.crate-disc img { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; }
.crate-disc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--bg); transform: translate(-50%, -50%); }
.crate-rec { grid-area: rec; min-width: 0; }
.crate-rec .artist { display: block; font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.3; }
.crate-rec .title { display: block; font-size: 14.5px; font-style: italic; color: var(--fg); opacity: 0.8; }
.crate-lbl { grid-area: lbl; font-size: 13px; color: var(--muted); min-width: 0; }
.crate-lbl .m-year { display: none; }
.crate-year { grid-area: year; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.crate-tags { grid-area: tags; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crate-gen { font-size: 13px; color: var(--muted); }
.crate-tag { font-family: var(--font-brand); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); }
.crate-tag .led { width: 6px; height: 6px; margin-right: 8px; }
.go { grid-area: go; justify-self: end; position: relative; isolation: isolate; overflow: hidden; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--fg); border-radius: 9px; font-size: 16px; line-height: 1; color: var(--fg); transition: color 0.3s ease 0.05s, background-color 0s linear 0s; }
.go::before { content: "\2192"; position: relative; z-index: 1; }
.go::after { content: ""; position: absolute; inset: -2px; z-index: 0; background: var(--fg); transform: scaleX(0); transform-origin: left center; transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.26, 1); }
.crate-row:focus-visible .go { color: var(--bg); }
.crate-row:focus-visible .go::after { transform: scaleX(1); }
@media (hover: hover) {
  .crate-row:hover .artist { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .crate-row:hover .crate-disc { animation: spin 2.4s linear infinite; }
  .crate-row:hover .go { color: var(--bg); background-color: var(--fg); transition: color 0.3s ease 0.05s, background-color 0s linear 0.38s; }
  .crate-row:hover .go::after { transform: scaleX(1); }
}
@media (max-width: 800px) {
  .crate-row { grid-template-columns: 46px minmax(0, 1fr) 30px; grid-template-areas: "disc rec go" "disc lbl go" "disc tags go"; gap: 2px 16px; }
  .crate-disc { width: 46px; height: 46px; align-self: start; }
  .crate-year { display: none; }
  .crate-lbl .m-year { display: inline; }
  .crate-tags { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .crate-row:hover .crate-disc { animation: none; } .go, .go::after { transition: none; } }
.coll .collection-row { margin-top: 36px; padding-top: 0; border-top: 0; }

/* =========================================================
   STICKY HEADER — stays on top while scrolling; once you leave the top it
   shrinks to the two logo lines + the menu. A bottom margin of the same amount
   keeps the page from jumping when it shrinks.
   ========================================================= */
html { scroll-padding-top: calc(var(--hdr-compact, 80px) + 18px); }
header { position: sticky; top: 0; z-index: 30; margin-bottom: 0; }
.brand { height: 112px; overflow: hidden; }
header.is-compact { padding-block: 12px; margin-bottom: var(--hdr-gap, 0px); background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
header.is-compact .brand { height: 50px; }
header.is-compact .brand svg { width: 150px; }
header.is-compact nav { margin-bottom: 0; }
@media (min-width: 801px) {
  header, .brand, .brand svg, nav { transition: padding 0.28s ease, margin-bottom 0.28s ease, height 0.28s ease, width 0.28s ease; }
}
header.measuring, header.measuring .brand, header.measuring .brand svg, header.measuring nav { transition: none !important; }
@media (max-width: 800px) {
  .brand { height: 99px; }
  header.is-compact { flex-wrap: nowrap; align-items: center; gap: 14px; padding-block: 10px; }
  header.is-compact .brand { flex: none; height: 36px; }
  header.is-compact .brand svg { width: 108px; }
  header.is-compact nav { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 1px; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  header.is-compact nav::-webkit-scrollbar { display: none; }
  header.is-compact nav a { flex: none; font-size: 10.5px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { header, .brand, .brand svg, nav { transition: none; } }
/* header: menu centred on the logo height (not sitting on its bottom line) */
header { align-items: center; }
header nav { margin-bottom: 0; }

/* =========================================================
   WAITING SERIES — no episode yet: the record stands still on its label,
   a soft ring breathes around it and the label counts down to the day
   ========================================================= */
.fr.is-waiting .fr-disc { cursor: default; }
.fr.is-waiting .fr-vinyl { animation: none; }
.fr.is-waiting .fr-disc::before { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.018); } }
.fr-blank span.w-top, .fr-blank span.w-bot { position: absolute; left: 0; right: 0; font-family: var(--font-brand); font-size: clamp(8px, 1vw, 11px); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(231, 226, 216, 0.85); text-align: center; }
.fr-blank span.w-top { top: 21%; }
.fr-blank span.w-bot { top: auto; bottom: 21%; }
.fr-blank span.w-count { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin-top: -0.9em; font-family: var(--font-brand); font-weight: 300; font-size: clamp(13px, 1.7vw, 20px); letter-spacing: 0.06em; color: #e7e2d8; font-variant-numeric: tabular-nums; text-align: center; }

.wait-left { margin: 18px 0 0; font-size: 15px; }
.wait-left b { font-weight: 500; }
button.btn { font-family: var(--font-brand); line-height: inherit; }
.lbl-wait { position: absolute; left: 50%; top: 50%; width: 33%; height: 33%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--rot); display: grid; place-items: center; }
.lbl-wait b { font-family: var(--font-brand); font-weight: 400; font-size: max(7px, 1.7cqw); letter-spacing: 0.16em; color: #e7e2d8; margin-top: -26%; }
@media (prefers-reduced-motion: reduce) { .fr.is-waiting .fr-disc::before { animation: none; } }

/* waiting sleeve: the record only peeks out, still, then slips back in. Not yet. */
@media (hover: hover) {
}
@media (hover: none) { .fr.is-waiting .fr-disc::after { content: attr(data-hint); } }

/* shop: a real record shows the disc with its label instead of the placeholder letter */
.cover.rec { background: var(--panel); }
.cover-disc { position: absolute; left: 50%; top: 50%; width: 84%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, var(--disc-base) 0 2px, var(--disc-line) 2px 3px); box-shadow: inset 0 0 0 1px var(--disc-line), 0 10px 26px rgba(0, 0, 0, 0.28); }
.cover-disc img { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; }
.cover-disc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.4%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); transform: translate(-50%, -50%); }
.cover.rec .top { position: relative; z-index: 1; }
.cover-disc { transition: opacity 0.25s ease; }
.cover.rec.show .cover-disc, .cover.rec:focus-visible .cover-disc { opacity: 0.12; }
@media (hover: hover) { .cover.rec:hover .cover-disc { opacity: 0.12; } }

/* phones: no shrinking header in the page flow. The full header scrolls away; then a compact bar
   (fixed) slides down from the top. Its height is held by the parent so the page never moves. */
@media (max-width: 800px) {
  header { position: relative; }
  header.is-compact { position: fixed; top: 0; left: 0; right: 0; margin: 0; padding-inline: 20px; box-shadow: none; clip-path: none; background: var(--bg); animation: hdr-drop 0.34s cubic-bezier(0.22, 0.8, 0.26, 1) both; }
  header.measuring { animation: none; }
  .hdr-hold { padding-top: var(--hdr-full, 0px); }
  /* the big record: no cream outline on phones, it would cross the text */
  .rec .rim { stroke: none; }
}
@keyframes hdr-drop { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { header.is-compact { animation: none; } }

/* =========================================================
   DIGGING DIARY in the home: every city is a big button (it opens the city page).
   Same language as the other buttons: cream outline, rounded, cream sweep from the left.
   ========================================================= */
.dig { border-top: 0; display: grid; gap: 12px; }
.dig > li { border-bottom: 0; }
a.dig-row { position: relative; isolation: isolate; overflow: hidden; padding: 22px 24px; border: 1px solid var(--fg); border-radius: 10px; align-items: center; transition: color 0.3s ease 0.05s, background-color 0s linear 0s; }
a.dig-row::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--fg); transform: scaleX(0); transform-origin: left center; transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.26, 1); }
a.dig-row .city small, a.dig-row .coord, a.dig-row .when, a.dig-row .n { transition: color 0.3s ease 0.05s; }
/* the + square: on the cream fill it turns dark with a cream + */
a.dig-row .sign::after { background: var(--bg); }
a.dig-row:focus-visible { color: var(--bg); }
a.dig-row:focus-visible::before { transform: scaleX(1); }
a.dig-row:focus-visible .city small, a.dig-row:focus-visible .coord, a.dig-row:focus-visible .when, a.dig-row:focus-visible .n { color: var(--bg); }
a.dig-row:focus-visible .sign { color: var(--fg); border-color: var(--bg); }
a.dig-row:focus-visible .city { text-decoration: none; }
@media (hover: hover) {
  a.dig-row:hover { color: var(--bg); background-color: var(--fg); transition: color 0.3s ease 0.05s, background-color 0s linear 0.38s; }
  a.dig-row:hover::before { transform: scaleX(1); }
  a.dig-row:hover .city { text-decoration: none; }
  a.dig-row:hover .city small, a.dig-row:hover .coord, a.dig-row:hover .when, a.dig-row:hover .n { color: var(--bg); }
  a.dig-row:hover .sign { color: var(--fg); border-color: var(--bg); background-color: var(--bg); }
}
@media (max-width: 800px) {
  a.dig-row { padding: 18px 18px; }
  a.dig-row .when { justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { a.dig-row, a.dig-row::before { transition: none; } }

/* =========================================================
   HERO: a listening bar, full width (replaces the big record, 22/10/2026).
   The illustration sits behind the text; a dark gradient on the left keeps the
   text readable. Always dark, also if the visitor's phone is in light mode.
   ========================================================= */
.hero.bar {
  --bg: #242424; --fg: #e7e2d8; --muted: #aaa69f;
  position: relative; isolation: isolate; color: var(--fg); background: var(--bg);
  margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%);
  min-height: clamp(540px, 44vw, 720px); padding-block: 64px;
  display: flex; flex-direction: column; justify-content: center;
}
.hero.bar > div:first-child { max-width: 640px; }
/* the wall shows through the whole width now: a soft shadow keeps the words clear on it */
.hero.bar h1, .hero.bar .lead { text-shadow: 0 2px 18px rgba(20, 20, 20, 0.9), 0 0 3px rgba(20, 20, 20, 0.7); }
/* the picture starts at the very top of the page: the record wall goes on behind logo and menu, very faded */
.hero-art { position: absolute; top: calc(-1 * var(--hdr-full, 157px)); right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-art::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(ellipse 50% 44% at 29% 62%, rgba(36, 36, 36, 0.8) 0%, rgba(36, 36, 36, 0.62) 50%, rgba(36, 36, 36, 0) 100%),
  linear-gradient(90deg, rgba(36, 36, 36, 0.35) 0%, rgba(36, 36, 36, 0.2) 40%, rgba(36, 36, 36, 0) 60%),
  linear-gradient(0deg, #242424 0, rgba(36, 36, 36, 0.6) 34px, rgba(36, 36, 36, 0) 96px),
  linear-gradient(180deg, rgba(36, 36, 36, 0.66) 0, rgba(36, 36, 36, 0.58) calc(var(--hdr-full, 157px) * 0.55), rgba(36, 36, 36, 0.38) var(--hdr-full, 157px), rgba(36, 36, 36, 0) calc(var(--hdr-full, 157px) + 120px)); }
.hb-txt { font-family: var(--font-brand); }
/* a bit of life: dust floating in the lamp light, lamps breathing very slowly */
.hb-motes circle { opacity: 0; animation: hb-float 13s ease-in-out infinite; }
@keyframes hb-float { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.55; } 100% { transform: translate(10px, -48px); opacity: 0; } }
.hb-glow { animation: hb-breathe 7s ease-in-out infinite; }
@keyframes hb-breathe { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hb-motes circle, .hb-glow { animation: none; } .hb-motes circle { opacity: 0.5; } }
/* phones: the bar becomes a picture at the top, the text follows below on the dark */
@media (max-width: 800px) {
  .hero.bar { display: block; min-height: 0; padding-block: 368px 36px; }
  .hero-art { top: calc(-1 * var(--hdr-full, 224px)); bottom: auto; height: calc(350px + var(--hdr-full, 224px)); }
  .hero-art::after { background:
    linear-gradient(0deg, #242424 0, rgba(36, 36, 36, 0.6) 32px, rgba(36, 36, 36, 0) 78px),
    linear-gradient(180deg, rgba(36, 36, 36, 0.68) 0, rgba(36, 36, 36, 0.6) calc(var(--hdr-full, 224px) * 0.55), rgba(36, 36, 36, 0.4) var(--hdr-full, 224px), rgba(36, 36, 36, 0) calc(var(--hdr-full, 224px) + 90px)); }
}


/* shop: the catalogue number on the cover (KNEV1, Details III…) in Side A cream and heavier, so it reads at a glance.
   The stroke thickens the letters with any font (the preview font has a single weight). */
.cover:not(.ink):not(.alt) .top .label:first-child { color: #e7e2d8; font-weight: 500; font-size: 11.5px; -webkit-text-stroke: 0.45px currentColor; }
.cover.alt .top .label:first-child, .cover.ink .top .label:first-child { font-weight: 500; font-size: 11.5px; -webkit-text-stroke: 0.45px currentColor; }
@media (max-width: 600px) { .cover .top .label:first-child { font-size: 10px; } }

/* =========================================================
   THE PROJECT (replaces About us, 23/10/2026): told like a record.
   Side A = what Side A does now (dig, select, share); Side B = what comes next, only hinted.
   ========================================================= */
.pj { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px 48px; margin-top: 52px; }
.pj-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 2px solid var(--fg); font-family: var(--font-brand); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.pj-head span:last-child { color: var(--muted); font-size: 10px; }
.pj-tracks { list-style: none; margin: 0; padding: 0; }
.pj-tracks li { display: grid; grid-template-columns: 44px minmax(0, 120px) minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pj-tracks b { font-family: var(--font-brand); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; color: var(--fg); -webkit-text-stroke: 0.3px currentColor; }
.pj-tracks .t { font-family: var(--font-brand); font-weight: 300; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; }
.pj-tracks .d { color: var(--muted); font-size: 15px; line-height: 1.55; }
/* side B: still to come, drawn with a dashed line like an empty slot */
.pj-side.is-next .pj-head { border-bottom: 2px dashed rgba(231, 226, 216, 0.45); }
.pj-side.is-next .pj-tracks li { grid-template-columns: 44px minmax(0, 1fr); border-bottom-style: dashed; }
.pj-side.is-next .pj-tracks .d { grid-column: 2; }
.pj-tease { margin: 18px 0 0; font-style: italic; color: var(--fg); }
@media (max-width: 800px) {
  .pj { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 36px; }
  .pj-tracks li, .pj-side.is-next .pj-tracks li { grid-template-columns: 40px minmax(0, 1fr); }
  .pj-tracks .d { grid-column: 2; }
}

/* city page: one closing line after the last photo */
.city-outro { margin: 80px auto 0; max-width: 26em; text-align: center; font-style: italic; font-weight: 300; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; }
.city-outro::before { content: ""; display: block; width: 44px; height: 1px; margin: 0 auto 26px; background: var(--fg); opacity: 0.6; }

/* =========================================================
   WIDE SCREENS (23/10/2026): from 1440px the page grows with the screen instead of
   staying a narrow column in the middle. Same layout and proportions, just more of
   everything: wider column, larger type, bigger records, more air between sections.
   ========================================================= */
@media (min-width: 1440px) {
  .wrap { max-width: clamp(1120px, 76vw, 1480px); }
  body { font-size: 17px; }
  section { padding-block: 88px; }
  html h2 { font-size: clamp(24px, 1.45vw, 30px); }
  html .label { font-size: 11.5px; }
  .brand svg { width: 232px; }
  html header nav { gap: 10px; }
  html header nav a { font-size: 13px; padding: 12px 20px 12px 24px; }
  html .btn { font-size: 12.5px; padding: 16px 26px; }
  /* hero */
  .hero.bar { min-height: clamp(560px, 42vw, 820px); }
  .hero.bar > div:first-child { max-width: 800px; }
  .hero h1 { font-size: clamp(60px, 4.3vw, 86px); }
  .hero .lead { font-size: 19.5px; max-width: 36em; }
  /* text */
  .prose p { font-size: 17.5px; }
  .prose p:first-child { font-size: 22px; }
  .two { gap: 32px 96px; }
  /* rotations: bigger sleeves */
  .rot-cards { gap: 72px 112px; }
  .sleeve-info h3 { font-size: 23px; }
  .picks-head h3 { font-size: 17px; }
  .fr { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 40px 96px; }
  .series-title { font-size: clamp(66px, 4.6vw, 90px); }
  /* shop: larger covers */
  .shop { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 40px 28px; }
  .item h3 { font-size: 20px; }
  /* digging, project, contact */
  a.dig-row { padding: 28px 32px; }
  .dig-row .city { font-size: 20px; }
  .dig-row .what { font-size: 16px; }
  .pj { gap: 40px 72px; margin-top: 64px; }
  .pj-tracks .t { font-size: 20px; }
  .pj-tracks .d { font-size: 16px; }
  .contact-box { padding: 52px 48px; }
}

/* =========================================================
   SHOP (23/10/2026): home shows 4 cards (real records + empty slots for the next ones),
   the full list lives on /shop/, laid out like the collection.
   ========================================================= */
.item.slot { pointer-events: none; }
.cover.slot-cover { background: transparent; border: 1px dashed rgba(231, 226, 216, 0.32); display: grid; place-items: center; justify-content: center; align-content: center; padding: 0; }
.cover.slot-cover::after { content: none; }
.slot-disc { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(231, 226, 216, 0.18); }
.slot-disc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(231, 226, 216, 0.14); }
.slot-txt { position: relative; font-family: var(--font-brand); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.slot-note { margin: 4px 0 0; font-size: 13px; color: var(--muted); font-style: italic; }
#store .collection-row { margin-top: 44px; }

/* collection + shop lists: the record a little bigger */
.crate-row { grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1.1fr) 56px minmax(0, 1.1fr) 30px; }
.crate-disc { width: 64px; height: 64px; }
.crate-disc::after { width: 3.5px; height: 3.5px; }
/* shop list row: + condition and price */
.sale-row { grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr) 52px minmax(0, 1.2fr) 74px 30px; grid-template-areas: "disc rec lbl year tags price go"; }
.crate-cond { font-size: 13px; color: var(--fg); opacity: 0.85; }
.sale-price { grid-area: price; justify-self: end; font-family: var(--font-display); font-weight: 500; font-size: 18px; font-variant-numeric: tabular-nums; }
.go.ext::before { content: "\2197"; }
.shoplist .collection-row { margin-top: 28px; }
@media (max-width: 800px) {
  .crate-row { grid-template-columns: 54px minmax(0, 1fr) 30px; }
  .crate-disc { width: 54px; height: 54px; }
  .sale-row { grid-template-columns: 54px minmax(0, 1fr) 30px; grid-template-areas: "disc rec go" "disc lbl go" "disc tags go" "disc price go"; }
  .sale-price { justify-self: start; font-size: 16px; margin-top: 4px; }
}

/* scheduled episodes: both states are in the page, only one is shown */
.sched { display: contents; }
.sched[hidden] { display: none; }

/* =========================================================
   SLEEVES v2 (25/10/2026): the sleeve rests in the middle of its column; when you reach it
   the sleeve slides left and the record slides right, so the record comes much further out.
   --sa = width/height of the stage; --ss / --rs = how far sleeve and record travel.
   The waiting series do the same (record still, countdown on its label).
   ========================================================= */
.sleeve-stage { --sa: 1.7; --k: calc(1.42 / var(--sa)); --ss: 33.5%; --rs: 37%; max-width: none; aspect-ratio: var(--sa) / 1; }
.rot-cards .sleeve-card { width: 100%; max-width: 580px; justify-self: center; }
.rot-cards .sleeve-info { max-width: none; text-align: center; }
.sleeve { width: calc(100% / var(--sa)); left: calc((100% - 100% / var(--sa)) / 2); transition: transform 0.75s cubic-bezier(0.22, 0.8, 0.26, 1); }
.sleeve-rec { width: calc(96% / var(--sa)); left: calc((100% - 100% / var(--sa)) / 2 + 2% / var(--sa)); }
.sleeve .s-brand, .sleeve .s-no { font-size: max(7px, calc(1.9cqw * var(--k))); }
.sleeve .s-name { font-size: max(12px, calc(4.4cqw * var(--k))); }
.sleeve .s-day { font-size: max(7px, calc(1.8cqw * var(--k))); }
.sleeve-card.is-out .sleeve-rec { transform: translateX(var(--rs)); }
.sleeve-card.is-out .sleeve { transform: translateX(calc(-1 * var(--ss))); }
.sleeve-card:has(.btn:focus-visible) .sleeve-rec { transform: translateX(var(--rs)); }
.sleeve-card:has(.btn:focus-visible) .sleeve { transform: translateX(calc(-1 * var(--ss))); }
@media (hover: hover) {
  .sleeve-card:has(.sleeve-stage:hover, .btn:hover) .sleeve-rec { transform: translateX(var(--rs)); }
  .sleeve-card:has(.sleeve-stage:hover, .btn:hover) .sleeve { transform: translateX(calc(-1 * var(--ss))); }
}
/* waiting series: the record comes out too, but stays still so the countdown can be read */
.sleeve-card.is-waiting .vinyl { animation: none; }
.lbl-wait { display: block; }
.lbl-wait b { position: absolute; left: 0; right: 0; top: 20%; margin: 0; text-align: center; font-size: max(7px, calc(1.7cqw * var(--k))); }
.lbl-count { position: absolute; left: 0; right: 0; top: 58%; text-align: center; font-family: var(--font-brand); font-weight: 400; font-size: max(7px, calc(1.6cqw * var(--k))); letter-spacing: 0.06em; color: #e7e2d8; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* series pages: the card next to the text keeps its layout, with room for the wider stage */
.also .sleeve-card { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
@media (max-width: 800px) {
  .sleeve-stage { --sa: 1.6; --ss: 28.5%; --rs: 32%; }
}
@media (min-width: 1440px) {
  .rot-cards .sleeve-card { max-width: 760px; }
}
@media (prefers-reduced-motion: reduce) { .sleeve { transition: none; } }

/* =========================================================
   LISTS (25/10/2026): collection rows only link where there is something to open on the site
   (a series page, a record in the shop); the others are plain rows without arrow.
   10 records per page, with a small pager under the list.
   ========================================================= */
.crate-row.is-static { cursor: default; }
a.crate-row:not([href]) { cursor: default; }
a.crate-row:not([href]) .go { visibility: hidden; }
@media (hover: hover) {
  .crate-row.is-static:hover .artist, a.crate-row:not([href]):hover .artist { text-decoration: none; }
}
.pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pager[hidden] { display: none; }
.pager .pg { min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--fg); font-family: var(--font-brand); font-size: 11px; letter-spacing: 0.1em; cursor: pointer; }
.pager .pg:hover:not(:disabled) { border-color: var(--fg); }
.pager .pg.is-on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pager .pg:disabled { opacity: 0.35; cursor: default; }

/* clear vinyl (Details III): a smoky see-through disc, light catching the surface, a bright edge.
   In the shop the cover has a fine hatch that shows through the record. */
.cover-disc.clear, .crate-disc.clear {
  background:
    conic-gradient(from 25deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.17) 32deg, rgba(255, 255, 255, 0) 72deg, rgba(255, 255, 255, 0) 205deg, rgba(255, 255, 255, 0.13) 236deg, rgba(255, 255, 255, 0) 276deg),
    repeating-radial-gradient(circle at 50% 50%, rgba(231, 226, 216, 0.04) 0 2px, rgba(231, 226, 216, 0.1) 2px 3px),
    rgba(20, 20, 20, 0.32);
}
.cover-disc.clear { box-shadow: inset 0 0 0 1.5px rgba(231, 226, 216, 0.4), 0 10px 26px rgba(0, 0, 0, 0.2); }
.crate-disc.clear { box-shadow: 0 0 0 2px var(--ring, var(--fg)), inset 0 0 0 1px rgba(231, 226, 216, 0.35); }
.cover.rec.has-clear { background-image: repeating-linear-gradient(135deg, rgba(231, 226, 216, 0.06) 0 1px, transparent 1px 8px); }
/* small clear disc in the lists: the fine hatch is drawn inside it, as if seen through the record */
.crate-disc.clear {
  background:
    conic-gradient(from 25deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.2) 32deg, rgba(255, 255, 255, 0) 72deg, rgba(255, 255, 255, 0) 205deg, rgba(255, 255, 255, 0.15) 236deg, rgba(255, 255, 255, 0) 276deg),
    repeating-radial-gradient(circle at 50% 50%, rgba(231, 226, 216, 0.04) 0 1.5px, rgba(231, 226, 216, 0.1) 1.5px 2.5px),
    repeating-linear-gradient(135deg, rgba(231, 226, 216, 0.09) 0 1px, transparent 1px 5px),
    rgba(20, 20, 20, 0.3);
}

/* the closing row of a section (See the full collection / See all records for sale) sits in the
   middle between its top line and the next section's line */
#selection > .collection-row, #store > .collection-row, .series section > .collection-row { padding-top: 64px; }
@media (max-width: 800px) { #selection > .collection-row, #store > .collection-row, .series section > .collection-row { padding-top: 48px; } }
@media (min-width: 1440px) { #selection > .collection-row, #store > .collection-row, .series section > .collection-row { padding-top: 88px; } }

/* collection: the closing line, while the list is still being filled */
.crate-end { margin: 72px auto 8px; max-width: 34em; text-align: center; }
.crate-end-line { margin: 0; font-style: italic; font-weight: 300; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; }
.crate-end-line::before { content: ""; display: block; width: 44px; height: 1px; margin: 0 auto 26px; background: var(--fg); opacity: 0.6; }
.crate-end-sub { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }

/* big page titles (COLLECTION, SHOP, FRIDAY ROTATION, STOCKHOLM…): a bit smaller, and a word is never
   broken in the middle. The script shrinks a title further if its longest word would not fit. */
.series-title { font-size: clamp(26px, 5vw, 60px); overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.city-title { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
@media (min-width: 1440px) { .series-title { font-size: clamp(60px, 4.2vw, 82px); } }