/* MDNT. Midnight navy, ivory type, brushed brass and walnut from the turntable; ember-amber means "sound is playing". */

/* Self-hosted variable fonts (SIL Open Font License, see /fonts). Latin only. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  --ink: #070B1E;
  --night: #0F1632;
  --line: #222B58;
  --brass: #D9B05A;
  --brass-hi: #F3D68A;
  --brass-lo: #8A6420;
  --brass-line: rgba(214, 170, 90, .42);
  --walnut: #3A2216;
  --dusk: #9EA6C8;
  --moon: #F3EEE1;
  --lamp: #F0A233;
  --brass-grad: linear-gradient(180deg, #F7E1A4 0%, #D9B05A 52%, #A67C2C 100%);
  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --text: "Newsreader", Georgia, serif;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --p: 0%; /* playback progress, set by player.js */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: radial-gradient(60rem 36rem at 88% 4%, rgba(232, 137, 43, .13), transparent 70%), radial-gradient(50rem 30rem at 6% 0%, rgba(40, 56, 140, .28), transparent 70%), var(--ink); background-attachment: fixed; color: var(--moon); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.125rem/1.6 var(--text); min-height: 100vh; }
body.has-bar { padding-bottom: 7rem; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 3px; }

.wrap { max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 30; background: var(--brass-hi); color: var(--ink); padding: .5rem 1rem; font: 700 1rem var(--display); }

/* Progress fill: text goes from moon to lamp as the track plays. */
.fill {
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .34)), linear-gradient(90deg, #FF9A2E var(--p), #EBCB86 var(--p));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; padding-top: 0; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero-art { position: absolute; z-index: -1; right: calc(-1 * var(--gutter)); top: -2.5rem; width: min(62%, 45rem); aspect-ratio: 4 / 3; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side at 54% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(closest-side at 54% 50%, #000 52%, transparent 100%); }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .96; }
@media (max-width: 52rem) {
  .hero-art { position: relative; right: auto; top: auto; width: calc(100% + 2 * var(--gutter)); margin: -1rem calc(-1 * var(--gutter)) -2.5rem; z-index: 0; order: 3; }
  .hero { display: flex; flex-direction: column; }
}
.nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .25rem 1.75rem; font: 500 1rem var(--display); }
.nav a { color: var(--dusk); text-decoration: none; padding-block: .25rem; }
.nav a:hover { color: var(--moon); text-decoration: underline; text-underline-offset: .25em; }

.wordmark {
  display: block; width: max-content; max-width: none; white-space: nowrap;
  margin: .25rem 0 0;
  padding-top: .05em;
  padding-bottom: .04em;
  font: 900 clamp(4.5rem, min(26vw, 12.5rem), 12.5rem) / .84 var(--display);
  font-stretch: 62%;
  letter-spacing: -.015em;
}
.byline { margin: .9rem 0 0; font: 500 1.25rem var(--display); color: var(--dusk); }
.lede { margin: 1.5rem 0 2rem; max-width: 34ch; font-size: 1.5rem; line-height: 1.4; }

.cta {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--brass-grad); color: #1A1204;
  box-shadow: 0 1px 0 rgba(255, 244, 205, .6) inset, 0 8px 22px -10px rgba(232, 137, 43, .55);
  font: 700 1.0625rem var(--display);
  padding: .85rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer;
}
.cta-icon {
  width: 4.5rem; height: 4.5rem; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
}
.cta-icon .ico { width: 1.75rem; height: 1.75rem; }
.cta-icon[aria-pressed="true"] { background: var(--lamp); }
.cta:hover, .btn:hover { filter: brightness(1.08); }

/* ---------- sections ---------- */
.sec { display: grid; gap: 1.25rem; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sec h2 { margin: 0; font: 800 1.75rem / 1.1 var(--display); font-stretch: 75%; }
.sec-body { min-width: 0; }
@media (min-width: 56rem) {
  .sec { grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; }
}

.prose { max-width: 38rem; }
.prose p { margin: 0 0 1.1rem; }
.plain { list-style: none; margin: 0 0 1.5rem; padding: 0; font: 500 1rem var(--display); }
.plain li { margin-block: .4rem; }
.plain.inline { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem 0 0; }
.note { margin: 1.25rem 0 0; max-width: 38rem; font-size: 1rem; color: var(--dusk); }
.private { margin: .25rem 0 1rem; font: 500 .95rem var(--display); color: var(--dusk); }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-block; white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--brass-grad); color: #1A1204;
  font: 700 .95rem var(--display);
  padding: .55rem 1.05rem; border-radius: 999px; border: 0;
}
.link {
  background: none; border: 0; padding: .25rem 0; cursor: pointer;
  font: 600 .95rem var(--display); color: var(--moon);
  text-decoration: underline; text-decoration-color: var(--brass-lo); text-underline-offset: .25em;
}
.link:hover { text-decoration-color: var(--brass-hi); color: var(--brass-hi); }

/* ---------- play icon states ---------- */
.ico { width: 1.25rem; height: 1.25rem; fill: currentColor; }
[aria-pressed="true"] .i-play { display: none; }
[aria-pressed="false"] .i-pause { display: none; }

/* ---------- track list ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.row, .offer {
  display: grid; align-items: center; column-gap: 1rem;
  padding: 1rem 0; border-top: 1px solid var(--line);
}
.list > :last-child { border-bottom: 1px solid var(--line); }
.offer { grid-template-columns: minmax(0, 1fr) auto; }
.row { grid-template-columns: 3rem minmax(0, 1fr) auto auto auto auto; }
/* Track lists share one grid so BPM, key, length and actions line up from row to row. */
.tracks { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto auto auto; column-gap: 1rem; }
@supports (grid-template-columns: subgrid) {
  .tracks .row { grid-template-columns: subgrid; grid-column: 1 / -1; }
}
.row-meta { display: contents; }

.play {
  width: 3rem; height: 3rem; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: transparent; color: var(--brass-hi); border: 1.5px solid var(--brass);
}
.play[aria-pressed="true"] { background: var(--lamp); border-color: var(--lamp); color: var(--ink); }
.row.is-current .row-title { color: var(--lamp); }

.row-main { min-width: 0; }
.row-title {
  display: block; text-decoration: none;
  font: 800 1.5rem / 1.15 var(--display); font-stretch: 75%;
}
a.row-title:hover { text-decoration: underline; text-underline-offset: .2em; }
.row-mood { display: block; font: italic 400 1rem var(--text); color: var(--dusk); }
.row-bpm, .row-key, .row-dur {
  min-width: 3.5rem; font: 500 .95rem var(--display); font-variant-numeric: tabular-nums; color: var(--dusk);
}
.row-dur { text-align: right; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem 1.25rem; margin-left: 1rem; }

@media (max-width: 62rem) {
  .tracks { grid-template-columns: 3rem minmax(0, 1fr) auto auto auto; }
  .row { grid-template-columns: 3rem minmax(0, 1fr) auto auto auto; }
  .row-actions { grid-column: 2 / -1; justify-content: flex-start; flex-wrap: wrap; margin: .6rem 0 0; }
}
@media (max-width: 44rem) {
  .tracks, .row { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .row { row-gap: .15rem; }
  .row .play { grid-row: 1 / 3; align-self: start; }
  .row-main { grid-row: 1; }
  .row-dur { grid-column: 3; grid-row: 1; min-width: 0; }
  .row-meta { display: flex; gap: .9rem; grid-column: 2; grid-row: 2; }
  .row-bpm, .row-key { min-width: 0; }
  .row-actions { grid-column: 2 / -1; grid-row: 3; }
  .offer { grid-template-columns: 1fr; row-gap: .6rem; }
  .offer .row-actions { justify-content: flex-start; margin: 0; }
}

/* ---------- track page ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding-block: 1.25rem; }
.topbar nav { font: 500 1rem var(--display); }
.topbar nav a { color: var(--dusk); text-decoration: none; }
.topbar nav a:hover { color: var(--moon); text-decoration: underline; text-underline-offset: .25em; }
.home { font: 900 1.6rem / 1 var(--display); font-stretch: 62%; letter-spacing: .01em; text-decoration: none; }

.track { display: grid; gap: 2rem; padding-block: 1.5rem 3rem; }
.cover { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; }
.track-title { margin: 0; padding-bottom: .05em; font: 900 clamp(3rem, 8vw, 6.5rem) / .92 var(--display); font-stretch: 62%; }
.track-info .byline { margin-bottom: 1.5rem; }
.desc { margin: 1.5rem 0 0; max-width: 34rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin: 1.5rem 0; font: 500 1rem var(--display); }
.facts div { display: contents; }
.facts dt { color: var(--dusk); }
.facts dd { margin: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
@media (min-width: 56rem) {
  .track { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 4rem; align-items: start; }
}

/* ---------- footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding-block: 2.5rem; font: 400 .9rem var(--display); color: var(--dusk);
}
.foot p { margin: 0; }

/* ---------- sticky player ---------- */
.bar {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-template-columns: auto minmax(0, 14rem) auto minmax(0, 1fr) auto;
  align-items: center; gap: .5rem 1rem;
  padding: .75rem var(--gutter); background: linear-gradient(180deg, rgba(34, 22, 14, .88), rgba(10, 12, 28, .92)); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-top: 1px solid var(--brass-line);
  animation: rise .25s ease-out;
}
.bar[hidden] { display: none; }
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
.bar-cover { width: 2.75rem; height: 2.75rem; border-radius: 3px; display: block; }
.bar-text { display: grid; min-width: 0; font: 500 .9rem var(--display); }
.bar-text strong { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-text span { color: var(--dusk); }
.bar-btn {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--brass-grad); color: #1A1204;
}
.bar-btn[aria-pressed="true"] { background: var(--lamp); }
.bar-seek { width: 100%; accent-color: var(--brass); }
.bar-time { font: 500 .85rem var(--display); font-variant-numeric: tabular-nums; color: var(--dusk); }
.bar-status { color: var(--brass-hi); grid-column: 1 / -1; margin: 0; font: 600 .9rem var(--display); }
.bar-status:empty { display: none; }
@media (max-width: 44rem) {
  .bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bar-seek { grid-column: 1 / 3; }
  .bar-time { grid-column: 3; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .bar { animation: none; }
}

/* ---------- landing: top nav, hero row, cover grid ---------- */
.top { display: flex; justify-content: flex-end; padding-block: 1.25rem .5rem; }
.top nav, .topbar nav { display: flex; gap: .25rem 1.5rem; font: 500 1rem var(--display); }
.top nav a { color: var(--dusk); text-decoration: none; padding-block: .25rem; }
.top nav a:hover { color: var(--moon); text-decoration: underline; text-underline-offset: .25em; }
.hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.5rem; }
.hero-row .byline { margin: 0; }

.shelf { padding-bottom: 2.5rem; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
.card { min-width: 0; }
.art { position: relative; border-radius: 1.25rem; overflow: hidden; background: var(--night); aspect-ratio: 1; box-shadow: 0 0 0 1px var(--brass-line), 0 18px 36px -20px #000; transition: box-shadow .25s; }
.card:hover .art { box-shadow: 0 0 0 1px var(--brass), 0 18px 44px -18px rgba(232, 137, 43, .5); }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card.is-current .art { box-shadow: 0 0 0 2px var(--lamp), 0 12px 40px -12px rgba(240, 178, 62, .45); }
.play.big {
  position: absolute; left: .85rem; bottom: .85rem;
  width: 3.5rem; height: 3.5rem;
  background: var(--brass-grad); color: #1A1204; border-color: transparent;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .7);
}
.play.big .ico { width: 1.5rem; height: 1.5rem; }
.play.big[aria-pressed="true"] { background: var(--lamp); }
.dur {
  position: absolute; right: .85rem; bottom: 1.1rem;
  font: 600 .85rem var(--display); font-variant-numeric: tabular-nums;
  padding: .2rem .6rem; border-radius: 999px;
  background: rgba(7, 9, 22, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dur:empty { display: none; }
.card-body { padding-top: .9rem; }
.card-title { display: block; text-decoration: none; font: 800 1.45rem / 1.1 var(--display); font-stretch: 75%; }
.card-title:hover { text-decoration: underline; text-underline-offset: .2em; }
.card.is-current .card-title { color: var(--lamp); }
.card-actions { display: flex; align-items: center; gap: .5rem 1.25rem; margin-top: .75rem; flex-wrap: wrap; }

@media (max-width: 40rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .85rem; }
  .art { border-radius: 1rem; }
  .play.big { width: 3rem; height: 3rem; left: .6rem; bottom: .6rem; }
  .dur { display: none; }
  .card-title { font-size: 1.25rem; }
  .card-actions .btn { padding: .45rem .9rem; }
}

/* ---------- track page: buy panel, footer nav ---------- */
.buy-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap;
  margin-top: 1.75rem; padding: 1.1rem 1.25rem; max-width: 34rem;
  border-radius: 1rem; background: linear-gradient(180deg, rgba(58, 34, 22, .5), var(--night)); box-shadow: 0 0 0 1px var(--brass-line);
}
.buy-panel div { display: grid; gap: .1rem; font-family: var(--display); }
.buy-panel strong { font-size: 1.6rem; font-weight: 800; }
.buy-panel span { font-size: .95rem; color: var(--dusk); }
.track .cover { border-radius: 1.25rem; box-shadow: 0 0 0 1px var(--brass-line), 0 24px 50px -24px #000; }
.foot nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.foot a { color: var(--dusk); }

.share-status { margin: .9rem 0 0; max-width: 34rem; font: 500 .95rem var(--display); color: var(--dusk); }
.share-status:empty { display: none; }

/* Wide screens: column count comes from the build so the last row is as full as possible. */
@media (min-width: 62rem) {
  .cards { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
}

/* ---------- sync: hero text, search, filters, shortlist, licensing ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wordmark span { display: block; }
.kicker { margin: 1.25rem 0 0; font: 600 .85rem var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.kicker span { color: var(--brass-lo); margin-inline: .35em; }
.tagline { margin: 1.1rem 0 0; max-width: 22ch; font: 500 clamp(1.35rem, 3vw, 1.9rem) / 1.25 var(--text); font-style: italic; color: var(--moon); }
.uses { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; max-width: 24rem; }
.uses li { font: 600 .75rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-hi); padding: .3rem .65rem; border: 1px solid var(--brass-line); border-radius: 999px; background: rgba(10, 8, 6, .35); }
.hero .hero-row { margin-top: 1.5rem; }
.cta-ghost { background: transparent; color: var(--brass-hi); border: 1.5px solid var(--brass); box-shadow: none; text-decoration: none; }
.cta-ghost:hover { background: rgba(217, 176, 90, .12); }
.top { align-items: center; gap: 1.5rem; }
.topbar-r { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: flex-end; }
.topbar-r nav, .top nav { display: flex; gap: .25rem 1.5rem; font: 500 1rem var(--display); }
.topbar-r nav a { color: var(--dusk); text-decoration: none; }
.topbar-r nav a:hover { color: var(--moon); text-decoration: underline; text-underline-offset: .25em; }
.short-open { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--brass-line); background: rgba(10, 8, 6, .35); color: var(--brass-hi); font: 600 .85rem var(--display); cursor: pointer; }
.short-open:hover { border-color: var(--brass); }
.short-open b { font-weight: 800; min-width: 1ch; }
.short-ico { width: .9rem; height: .9rem; display: inline-block; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .85; }
[aria-pressed="true"] > .short-ico { opacity: 1; }

.finder { padding-bottom: 3rem; }
.filmstrip { height: 22px; margin: 0 0 2rem; border-block: 1px solid var(--brass-line); background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(217, 176, 90, .55) 14px 26px, transparent 26px 40px) center / 40px 8px repeat-x; opacity: .7; }
.finder-h { margin: 0 0 1rem; font: 800 clamp(1.6rem, 3.4vw, 2.3rem) / 1.1 var(--display); font-stretch: 75%; }
.search { position: relative; display: flex; align-items: center; }
.search input { width: 100%; font: 500 1.15rem var(--display); color: var(--moon); background: rgba(16, 20, 44, .75); border: 1.5px solid var(--brass-line); border-radius: 999px; padding: 1rem 5.5rem 1rem 3.4rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.search input::placeholder { color: var(--dusk); }
.search input:focus { border-color: var(--brass-hi); box-shadow: 0 0 0 4px rgba(217, 176, 90, .18); }
.search-ico { position: absolute; left: 1.2rem; width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search-clear { position: absolute; right: .9rem; background: none; border: 0; cursor: pointer; font: 600 .9rem var(--display); color: var(--brass-hi); text-decoration: underline; text-underline-offset: .2em; }
.examples { margin: .9rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font: 500 .9rem var(--display); color: var(--dusk); }
.tags { display: flex; flex-wrap: wrap; gap: .3rem .35rem; margin: 0; }
.tag { font: 600 .78rem var(--display); text-decoration: none; color: var(--brass-hi); background: rgba(217, 176, 90, .1); border: 1px solid rgba(217, 176, 90, .3); border-radius: 999px; padding: .2rem .6rem; cursor: pointer; line-height: 1.3; }
button.tag { font-family: var(--display); }
.tag:hover { background: rgba(217, 176, 90, .22); border-color: var(--brass); }
.filters { margin: 1rem 0 0; }
.filters summary { cursor: pointer; font: 600 .95rem var(--display); color: var(--brass-hi); width: max-content; }
.fgroup { border: 0; padding: 0; margin: .9rem 0 0; }
.fgroup legend { padding: 0; font: 600 .75rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--dusk); margin-bottom: .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { font: 600 .85rem var(--display); color: var(--moon); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
.chip:hover { border-color: var(--brass); }
.chip[aria-pressed="true"] { background: var(--brass-grad); color: #1A1204; border-color: transparent; }
.count { margin: 1.1rem 0 1.25rem; font: 500 .9rem var(--display); color: var(--dusk); }
.card[hidden] { display: none; }
.empty { padding: 1.5rem; border: 1px dashed var(--brass-line); border-radius: 1rem; max-width: 36rem; }
.empty[hidden] { display: none; }
.card-meta { margin: .25rem 0 .5rem; font: 500 .85rem var(--display); color: var(--dusk); font-variant-numeric: tabular-nums; }
.card-body .tags { margin-bottom: .2rem; }
.short { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font: 600 .9rem var(--display); color: var(--brass-hi); background: none; border: 1px solid var(--brass-line); border-radius: 999px; padding: .4rem .85rem; }
.short:hover { border-color: var(--brass); }
.short[aria-pressed="true"] { background: rgba(217, 176, 90, .18); border-color: var(--brass); }
.short-card { position: absolute; top: .7rem; right: .7rem; padding: .35rem .5rem; background: rgba(7, 9, 22, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.short-card .short-txt { display: none; }
.short-card .short-ico { width: 1rem; height: 1rem; }
.facts dd .tags { gap: .3rem; }
.shortlist { position: fixed; z-index: 25; right: 1rem; top: 4.25rem; width: min(24rem, calc(100vw - 2rem)); max-height: calc(100dvh - 7rem); overflow: auto; padding: 1.1rem 1.2rem; border-radius: 1rem; background: linear-gradient(180deg, #1c130d, #0d1024); border: 1px solid var(--brass-line); box-shadow: 0 24px 60px -16px #000; }
.shortlist[hidden] { display: none; }
.sl-head { display: flex; justify-content: space-between; align-items: baseline; font: 800 1.2rem var(--display); }
.sl-list { list-style: none; margin: .75rem 0; padding: 0; font: 500 1rem var(--display); }
.sl-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.sl-list a { text-decoration: none; }
.sl-empty { font: 500 .95rem var(--display); color: var(--dusk); }
.sl-empty[hidden], .sl-actions[hidden] { display: none; }
.sl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.sl-note { margin: .6rem 0 0; font: 500 .85rem var(--display); color: var(--brass-hi); }
.sl-note:empty { display: none; }
.services { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.services li { padding: 1.1rem 1.2rem; border-radius: 1rem; background: linear-gradient(180deg, rgba(58, 34, 22, .45), var(--night)); box-shadow: 0 0 0 1px var(--brass-line); }
.services h3 { margin: 0 0 .4rem; font: 800 1.2rem var(--display); font-stretch: 80%; color: var(--brass-hi); }
.services p { margin: 0; font-size: 1rem; }
.brief { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); max-width: 46rem; }
.brief label { display: grid; gap: .35rem; font: 600 .85rem var(--display); color: var(--dusk); }
.brief .wide { grid-column: 1 / -1; }
.brief input, .brief select, .brief textarea { font: 500 1rem var(--display); color: var(--moon); background: rgba(16, 20, 44, .75); border: 1px solid var(--line); border-radius: .6rem; padding: .7rem .85rem; }
.brief input:focus, .brief select:focus, .brief textarea:focus { outline: none; border-color: var(--brass-hi); }
@media (max-width: 52rem) { .hero .tagline, .hero .uses { max-width: none; } }
@media (max-width: 40rem) { .top, .topbar { flex-wrap: wrap; gap: .75rem; } .topbar-r { gap: .75rem 1rem; } .shortlist { top: 3.5rem; right: .5rem; } }

/* ---------- turntable player view ---------- */
.bar-stage { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 3px; line-height: 0; }
.bar-stage::after {
  content: ""; position: absolute; right: -.3rem; bottom: -.3rem; width: .9rem; height: .9rem; border-radius: 50%;
  background: radial-gradient(circle, var(--brass-hi) 0 22%, var(--ink) 24% 38%, #2a1d10 40%); border: 1px solid var(--brass);
}
.bar-stage[aria-pressed="true"]::after { border-color: var(--lamp); }
.stage {
  position: fixed; inset: 0 0 var(--bar-h, 0px) 0; z-index: 15; overflow: auto;
  display: grid; place-items: center; padding: 3.25rem var(--gutter) 1rem;
  background: radial-gradient(60rem 38rem at 78% 55%, rgba(232, 137, 43, .16), transparent 66%), radial-gradient(46rem 30rem at 20% 10%, rgba(30, 44, 120, .35), transparent 70%), #050816;
  opacity: 0; transform: translateY(1.5rem); transition: opacity .35s ease, transform .35s ease;
}
.stage[hidden] { display: none; }
.stage.is-open { opacity: 1; transform: none; }
.stage-inner { width: min(100%, 64rem); }
.stage-art { position: relative; margin-inline: auto; width: min(100%, calc((100dvh - var(--bar-h, 0px) - 15.5rem) * 1.338)); aspect-ratio: 1456 / 1088; border-radius: .9rem; overflow: hidden; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .55), 0 0 0 1px rgba(214, 170, 90, .18); background: #070b1f; }
.world { position: absolute; left: 0; top: 0; width: 1456px; height: 1088px; transform-origin: 0 0; }
.world .L { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.world .bg { left: 0; top: 0; width: 1456px; height: 1088px; }
.world .arm, .world .beam { transform-origin: 0 0; }
.world .glow { position: absolute; left: 900px; top: 200px; width: 640px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 40, .30), rgba(255, 120, 20, 0)); opacity: 0; mix-blend-mode: screen; transition: opacity 1.2s ease; pointer-events: none; }
.world .glow.on { opacity: 1; animation: breathe 3.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; } }
.world .rod { position: absolute; left: 621px; top: 250px; width: 54px; height: 40px; background: linear-gradient(90deg, #07080b 0%, #2b2d35 22%, #5a5c66 36%, #1a1b20 62%, #050507 100%); box-shadow: inset 0 -5px 0 #b98a2c, inset 0 -7px 0 #5a3f10; }
.world .hshadow { position: absolute; left: 686px; top: 471px; width: 620px; height: 150px; margin: -75px 0 0 -310px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); opacity: 0; pointer-events: none; }

/* bare platter, seen while the record is in the robot's hand */
.world .pmat { position: absolute; left: 686px; top: 471px; width: 596px; height: 136px; margin: -68px 0 0 -298px; border-radius: 50%; background: radial-gradient(closest-side, #3a1219 0 70%, #1f090e 96%, #0a0305); box-shadow: inset 0 0 0 3px #0c0507, inset 0 6px 16px rgba(0,0,0,.7); }
.world .pmat::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 12px; margin: -9px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff0b8, #c9a24a 60%, #6e4d12); box-shadow: 0 -8px 0 -3px #d9b45c; }
/* records: a flat 600px disc, squashed into the camera's ellipse by the parent transform */
.rec { position: absolute; left: 0; top: 0; width: 600px; height: 600px; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.rec.gone, .rec.hdisc:not(.on) { visibility: hidden; }
.rec-flat { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #08090c; box-shadow: inset 0 0 0 5px #050507, inset 0 0 30px rgba(0, 0, 0, .9); }
.rec-spin { position: absolute; inset: 0; will-change: transform; }
.rec-grain {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 6%, rgba(255, 255, 255, .07) 9%, rgba(255, 255, 255, 0) 13% 31%, rgba(255, 255, 255, .05) 35%, rgba(255, 255, 255, 0) 40% 57%, rgba(255, 255, 255, .07) 60%, rgba(255, 255, 255, 0) 65% 82%, rgba(255, 255, 255, .05) 86%, rgba(255, 255, 255, 0) 91%),
    radial-gradient(circle, transparent 0 34%, rgba(0, 0, 0, .5) 35% 36%, transparent 37% 70%, rgba(0, 0, 0, .45) 71% 72%, transparent 73%),
    #0a0a0d;
}
.rec-label { position: absolute; left: 31%; top: 31%; width: 38%; height: 38%; border-radius: 50%; background: #c9a24a center / cover no-repeat; box-shadow: 0 0 0 3px #2a1d08, 0 0 0 6px rgba(226, 184, 96, .55); }
.rec-label.blank { background: radial-gradient(circle at 40% 35%, #f3d68a, #c9a24a 55%, #8a6420); }
.rec-hole { position: absolute; left: 48.4%; top: 48.4%; width: 3.2%; height: 3.2%; border-radius: 50%; background: #050507; box-shadow: 0 0 0 2px rgba(255, 220, 140, .6); }
.rec-gloss {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 200deg, rgba(255, 226, 170, 0) 0 5%, rgba(255, 226, 170, .22) 10%, rgba(255, 226, 170, 0) 17% 52%, rgba(255, 226, 170, .12) 58%, rgba(255, 226, 170, 0) 66%);
}

.stage-close {
  position: absolute; top: 1rem; right: var(--gutter); padding: .5rem 1rem; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--brass-line); background: rgba(10, 8, 6, .5); color: var(--moon); font: 600 .9rem var(--display);
}
.stage-close:hover { border-color: var(--lamp); color: var(--lamp); }
.stage-now { margin: 1rem 0 0; display: grid; gap: .15rem; text-align: center; }
.stage-now span { font: 600 .8rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--lamp); }
.stage-now strong { font: 800 clamp(1.6rem, 5vw, 2.4rem) var(--display); font-stretch: 75%; color: var(--moon); min-height: 1.2em; }
.stage-picker { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; }
.pick { display: block; width: 3.4rem; height: 3.4rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 40% 35%, #f3d68a, #b98a2c 60%, #6e4d12); padding: 3px; opacity: .7; transition: opacity .2s ease, transform .2s ease; }
.pick i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #111 center / cover; box-shadow: inset 0 0 0 2px #0a0a0d, inset 0 0 0 5px rgba(0, 0, 0, .45); }
.pick:hover { opacity: 1; transform: translateY(-2px); }
.pick.is-on { opacity: 1; box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--lamp), 0 0 1.2rem rgba(240, 178, 62, .45); }
.stage-hint { margin: .6rem 0 0; text-align: center; color: var(--dusk); font: 500 .9rem var(--display); }
@media (max-width: 40rem) { .stage { padding-top: 3rem; } .stage-art { width: 100%; } .pick { width: 2.9rem; height: 2.9rem; } }
@media (prefers-reduced-motion: reduce) {
  .stage { transition: none; }
  .world .glow.on { animation: none; }
}

.stats { border-collapse: collapse; margin: 1.5rem 0; font: 500 1rem var(--display); min-width: min(100%, 36rem); }
.stats th, .stats td { text-align: right; padding: .6rem .9rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.stats th:first-child, .stats td:first-child { text-align: left; }
.stats th { color: var(--dusk); font-weight: 600; font-size: .85rem; }
.stats[hidden] { display: none; }