:root {
--bg: #f4efe6;
--bg-card: #fbf7ef;
--ink: #1a1714;
--ink-soft: #4a423a;
--ink-mute: #8b8278;
--line: #e3dccf;
--line-soft: #ece5d6;
--accent: #b8431f;
--accent-ink:#5a1d0a;
--accent-teal: #2f6363;
--accent-mustard: #b88a1f;
--accent-moss: #4a7a47;
--accent-moss-deep: #3d6b3a;
--accent-moss-ink: #2c4e2a;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 14px;
--shadow: 0 1px 2px rgba(26,23,20,0.04), 0 8px 24px rgba(26,23,20,0.06);
--shadow-hover: 0 4px 8px rgba(26,23,20,0.06), 0 16px 40px rgba(26,23,20,0.10);
--font-display: "Fraunces", Georgia, serif;
--font-body: "Inter", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
/* ============================================================
RECORD SHOP SCENE — fixed, never scrolls
wood wall + framed posters + turntable + chalkboard + crates
============================================================ */
body {
/* faint paper grain on top of everything */
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: repeat;
background-size: 160px 160px;
background-attachment: fixed;
}
.shop-scene {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
/* Wood-plank wall — fills viewport, never scrolls */
.shop-wall {
position: absolute;
inset: 0;
background:
/* vertical plank seams */
repeating-linear-gradient(
90deg,
transparent 0,
transparent 159px,
rgba(90, 55, 25, 0.16) 159px,
rgba(90, 55, 25, 0.16) 160px,
transparent 160px,
transparent 161px
),
/* warm wash that's slightly darker toward edges to suggest a room */
radial-gradient(ellipse at center,
rgba(244, 239, 230, 0) 0%,
rgba(120, 80, 40, 0.08) 60%,
rgba(80, 50, 25, 0.16) 100%);
}
/* Floor strip at the bottom — a darker wood band where the crates sit */
.shop-floor {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 180px;
background:
linear-gradient(180deg,
rgba(60, 35, 18, 0.0) 0%,
rgba(60, 35, 18, 0.18) 35%,
rgba(40, 22, 10, 0.30) 100%),
repeating-linear-gradient(
90deg,
rgba(40, 22, 10, 0.12) 0,
rgba(40, 22, 10, 0.12) 1px,
transparent 1px,
transparent 80px
);
}
/* SVG illustrations on each side wall — fixed via parent .shop-scene */
.shop-art {
position: absolute;
top: 70px;
bottom: 0;
width: 300px;
height: calc(100vh - 70px);
opacity: 0.92;
}
.shop-art-left { left: 0; }
.shop-art-right { right: 0; }
/* Hide the side art on narrow screens — too crowded */
@media (max-width: 1100px) {
.shop-art { display: none; }
}
/* keep all real content above the scene */
.site-header, .page, .site-footer { position: relative; z-index: 1; }
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
/* HEADER */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 40px;
border-bottom: 1px solid var(--line);
background: var(--bg);
position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 19px;
letter-spacing: -0.01em;
}
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
position: relative;
font-size: 14px; color: var(--ink-soft); font-weight: 500;
padding: 6px 12px; border-radius: var(--r-sm);
text-decoration: none;
white-space: nowrap;
transition: color 140ms ease;
}
.site-nav a:hover { color: var(--accent-ink); }
.site-nav a.active {
color: var(--ink);
font-weight: 600;
}
.site-nav a.active::after {
content: "";
position: absolute;
left: 12px; right: 12px; bottom: -2px;
height: 2px;
background: var(--accent-ink);
border-radius: 2px;
}
/* PAGE */
.page {
max-width: 1200px;
margin: 0 auto;
padding: 48px 40px 80px;
}
.back {
display: inline-block;
font-size: 14px;
color: var(--ink-mute);
margin-bottom: 24px;
}
.back:hover { color: var(--accent-ink); }
/* HERO */
.hero {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
margin-bottom: 56px;
padding-bottom: 32px;
border-bottom: 1px solid var(--line);
}
/* v2: editorial hero — left-aligned headline + right-aligned search/stats column */
.hero-v2 {
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
margin-bottom: 28px;
padding-bottom: 32px;
border-bottom: 1px solid var(--line);
}
/* groove: second hairline below the divider, like a record groove or master-tape leader */
.hero-v2::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: -4px;
height: 1px;
background: var(--line);
opacity: 0.55;
}
.hero-v2 .hero-left { flex: 1 1 auto; min-width: 0; }
.hero-v2 .hero-right {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
min-width: 280px;
}
.hero-v2 h1 { font-size: 64px; margin-top: 4px; }
.hero-v2 .lede { max-width: 620px; margin-bottom: 0; }
/* Search box in the hero */
.hero-search {
display: flex;
align-items: center;
gap: 8px;
width: 320px;
max-width: 100%;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 14px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.hero-search:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.hero-search-icon { color: var(--ink-mute); flex: 0 0 auto; }
.hero-search input {
flex: 1 1 auto;
min-width: 0;
border: none;
background: transparent;
outline: none;
font-family: var(--font-body);
font-size: 14px;
color: var(--ink);
padding: 0;
}
.hero-search input::placeholder { color: var(--ink-mute); }
.hero-search input::-webkit-search-cancel-button { display: none; }
.hero-search-clear {
flex: 0 0 auto;
background: transparent;
border: none;
color: var(--ink-mute);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 2px 6px;
border-radius: 999px;
transition: color .15s ease, background-color .15s ease;
}
.hero-search-clear:hover { color: var(--ink); background-color: rgba(0,0,0,0.06); }
.stat-line {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-mute);
margin: 0;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.stat-line .stat-n {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: var(--ink);
letter-spacing: -0.01em;
text-transform: none;
}
.stat-line .stat-l { margin-right: 2px; }
.stat-line .stat-sep { margin: 0 8px; color: var(--line); }
.eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--accent-ink);
background: rgba(184, 67, 31, 0.08);
border: 1px solid rgba(184, 67, 31, 0.35);
border-radius: 2px;
padding: 4px 10px 3px;
margin: 0 0 14px;
transform: rotate(-1.2deg);
transform-origin: left center;
box-shadow: 1px 1px 0 rgba(184, 67, 31, 0.10);
}
.hero h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: 56px;
line-height: 1;
letter-spacing: -0.02em;
margin: 0 0 12px;
font-variation-settings: "opsz" 120;
}
.lede {
max-width: 540px;
color: var(--ink-soft);
margin: 0;
font-size: 16px;
line-height: 1.5;
}
.lede-lead {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 19px;
color: var(--ink);
letter-spacing: -0.005em;
margin-right: 4px;
}
/* SIDE A · LIBRARY leader stamp — record-label inner ring vibe */
.side-leader {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.side-leader-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--accent);
color: #fbf7ef;
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0;
line-height: 1;
padding-top: 1px;
}
.side-leader-text {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink-soft);
}
.side-leader-rule {
flex: 1;
height: 1px;
background: var(--line);
}
.stats {
display: flex;
gap: 32px;
margin: 0;
}
.stats div { text-align: right; }
.stats dt {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-mute);
margin: 0 0 4px;
}
.stats dd {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
margin: 0;
letter-spacing: -0.02em;
}
/* RARITY MEDALLION BADGE — inline SVG shield with score + tier band */
.rarity-badge {
display: inline-block;
width: 36px;
margin-left: 10px;
vertical-align: -0.32em;
line-height: 0;
filter: drop-shadow(0 1px 2px rgba(26, 23, 20, 0.22));
}
.rarity-badge svg { width: 100%; height: auto; display: block; overflow: visible; }
.rarity-badge.lg { width: 64px; margin-left: 16px; vertical-align: -0.18em; }
/* Tier gradient stops (top → bottom of shield) */
.rarity-badge.tier-grail .g-top { stop-color: #d76a4a; } .rarity-badge.tier-grail .g-bot { stop-color: #8a2a14; }
.rarity-badge.tier-scarce .g-top { stop-color: #e3a665; } .rarity-badge.tier-scarce .g-bot { stop-color: #a06c1f; }
.rarity-badge.tier-uncommon .g-top { stop-color: #b6c498; } .rarity-badge.tier-uncommon .g-bot { stop-color: #5e6e3f; }
.rarity-badge.tier-common .g-top { stop-color: #cfc8b5; } .rarity-badge.tier-common .g-bot { stop-color: #7e7561; }
/* Ribbon tails — darker tone per tier */
.rarity-badge.tier-grail .ribbon { fill: #5e1a08; }
.rarity-badge.tier-scarce .ribbon { fill: #6e4612; }
.rarity-badge.tier-uncommon .ribbon { fill: #3f4a26; }
.rarity-badge.tier-common .ribbon { fill: #574f3f; }
.rarity-badge .shield-ring { stroke: rgba(255, 255, 255, 0.42); stroke-width: 0.7; }
.rarity-badge .groove { stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.6; }
.rarity-badge .groove-dot { fill: rgba(255, 255, 255, 0.7); }
.rarity-badge .score {
font-size: 20px;
fill: #fff;
letter-spacing: -0.02em;
}
.rarity-badge .tier {
font-size: 6.5px;
letter-spacing: 0.18em;
fill: rgba(255, 255, 255, 0.92);
font-weight: 600;
}
.rarity-badge.lg .score { font-size: 22px; }
.rarity-badge.lg .tier { font-size: 7px; }
/* SHOWCASE TRIO — large editorial 3-up band beneath the hero */
.showcase-trio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 0 0 56px;
}
.showcase-tile {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 200ms ease;
}
.showcase-tile:hover {
transform: translateY(-2px);
border-color: rgba(0,0,0,0);
box-shadow:
0 1px 0 var(--stripe) inset,
0 12px 28px -10px rgba(26, 23, 20, 0.22),
0 4px 10px -4px rgba(26, 23, 20, 0.12);
}
.showcase-tile.placeholder {
opacity: 0.55;
pointer-events: none;
}
/* Tier stripe sits on the top edge of the card */
.showcase-tile::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 4px;
background: var(--stripe);
z-index: 2;
}
.showcase-tile.kind-rarest { --stripe: linear-gradient(90deg, #b03219, #8a2a14 60%, #5e1a08); }
.showcase-tile.kind-collectable { --stripe: linear-gradient(90deg, #d3a05b, #a06c1f 60%, #6e4612); }
.showcase-tile.kind-valuable { --stripe: linear-gradient(90deg, #93a571, #5e6e3f 60%, #3f4a26); }
/* Cover: large square with overlaid kicker + badge */
.showcase-tile-cover {
position: relative;
aspect-ratio: 1 / 1;
background: #1a1714;
overflow: hidden;
}
/* Subtle corner scrims to guarantee badge legibility against busy cover art */
.showcase-tile-cover::before,
.showcase-tile-cover::after {
content: "";
position: absolute;
z-index: 1;
pointer-events: none;
}
.showcase-tile-cover::before {
top: 0; left: 0; right: 0;
height: 96px;
background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%);
}
.showcase-tile-cover::after {
bottom: 0; left: 0; right: 0;
height: 120px;
background: linear-gradient(0deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.30) 55%, rgba(0,0,0,0) 100%);
}
.showcase-tile-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms ease;
}
.showcase-tile:hover .showcase-tile-cover img { transform: scale(1.035); }
.showcase-tile-cover.empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-mute);
}
.showcase-tile-cover.empty svg { width: 56px; height: 56px; opacity: 0.5; }
/* Kicker label — top-left chip over the cover */
.showcase-kicker {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
padding: 5px 9px 4px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #1a1714;
background: #fcf8f0;
border-radius: 2px;
box-shadow: 0 2px 6px rgba(0,0,0,0.32);
}
/* Metric badge — bottom-right over cover, glassy dark */
.showcase-badge {
position: absolute;
right: 14px;
bottom: 14px;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0;
padding: 8px 12px 9px;
background: #14120f;
color: #fcf8f0;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 3px 10px rgba(0,0,0,0.45);
min-width: 64px;
text-align: right;
}
.showcase-badge .badge-l {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(252, 248, 240, 0.7);
line-height: 1;
margin-bottom: 3px;
}
.showcase-badge .badge-v {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.02em;
line-height: 1;
font-variation-settings: "opsz" 60;
}
/* Body */
.showcase-tile-body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.showcase-tile-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
line-height: 1.18;
letter-spacing: -0.015em;
margin: 0;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.showcase-tile-artist {
font-size: 13px;
color: var(--ink-soft);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.showcase-tile-artist .yr { color: var(--ink-mute); }
.showcase-hint {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin: 8px 0 0;
font-weight: 600;
}
.showcase-note {
font-size: 12px;
line-height: 1.45;
color: var(--ink-mute);
margin: 6px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.showcase-empty-msg {
font-size: 13px;
color: var(--ink-mute);
font-style: italic;
margin: 0;
}
/* edition line on cards */
.edition-line {
text-transform: none;
letter-spacing: 0;
font-family: var(--font-body);
font-size: 12px;
font-style: italic;
color: var(--ink-mute);
margin-top: 6px;
}
/* EDITION + RARITY PANELS (album detail) */
.edition-panel, .rarity-panel {
margin: 0 0 40px;
padding: 22px 24px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--r-md);
}
.edition-panel h2, .rarity-panel h2 {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 14px;
}
.edition-name {
font-family: var(--font-display);
font-size: 17px;
color: var(--ink);
margin: 0 0 10px;
font-style: italic;
}
.edition-body { margin: 0; color: var(--ink-soft); max-width: 65ch; font-size: 15px; }
.rarity-head {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.rarity-head h2 { margin: 0; }
.rarity-tag {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid;
font-weight: 600;
}
.rarity-tag.tier-grail { color: #6c2424; border-color: #c98a8a; background: #f7e6e6; }
.rarity-tag.tier-scarce { color: #7a4a14; border-color: #d8a878; background: #fbecd6; }
.rarity-tag.tier-uncommon { color: #4a5238; border-color: #b6bd9c; background: #eef0e3; }
.rarity-tag.tier-common { color: #6b6b6b; border-color: #cfcabd; background: #f0ece1; }
.rarity-bar {
margin: 18px 0 0;
}
.rarity-track {
position: relative;
height: 10px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
}
.rarity-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #b8431f 0%, #d4924e 40%, #b6bd9c 70%, #cfcabd 100%);
}
.rarity-scale {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-mute);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 10px;
}
.rarity-notes { margin: 20px 0 0; color: var(--ink-soft); max-width: 65ch; font-size: 14.5px; }
/* TOP-5 PANEL (top artists + top genres) */
.top-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 48px;
}
.top-card {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 20px 22px;
}
.top-title {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent);
margin: 0 0 14px;
display: flex;
align-items: baseline;
gap: 10px;
}
.top-sub {
color: var(--ink-mute);
letter-spacing: 0.08em;
font-size: 10px;
}
.top-list {
list-style: none;
padding: 0;
margin: 0;
}
.top-list li {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: baseline;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--line-soft);
}
.top-list li:last-child { border-bottom: none; }
.rank {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.top-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
line-height: 1.25;
}
.top-name:hover { color: var(--accent-ink); }
.top-name.as-link {
background: none;
border: none;
padding: 0;
text-align: left;
cursor: pointer;
}
.top-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
/* CONTROLS (sort + genre filter) */
.controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 32px;
margin-bottom: 32px;
}
.sort-control { display: flex; align-items: center; gap: 10px; }
.sort-control label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-mute);
}
.sort-control select {
font-family: var(--font-body);
font-size: 14px;
color: var(--ink);
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 7px 28px 7px 12px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
transition: border-color .15s ease;
}
.sort-control select:hover { border-color: var(--ink-mute); }
.sort-control select:focus { outline: none; border-color: var(--accent); }
.genre-filter {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
}
/* Genre filter section pinned below the library grid */
.genre-filter-section {
margin-top: 56px;
padding-top: 28px;
border-top: 1px solid var(--line);
}
.genre-filter-title {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-mute);
margin: 0 0 14px;
}
/* Active-filter indicator next to the Sort dropdown */
.genre-active-indicator {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-mute);
}
.chip.inline { padding: 4px 6px 4px 12px; }
.chip-clear {
background: transparent;
border: none;
color: inherit;
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 2px 6px;
border-radius: 999px;
opacity: 0.7;
transition: opacity .15s ease, background-color .15s ease;
}
.chip-clear:hover { opacity: 1; background-color: rgba(0,0,0,0.08); }
.chip {
font-family: var(--font-body);
font-size: 13px;
color: var(--ink-soft);
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
transition: all .15s ease;
}
.chip:hover { border-color: var(--ink-mute); color: var(--ink); }
.chip.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.chip-n {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--ink-mute);
background: var(--bg);
border-radius: 999px;
padding: 1px 6px;
}
.chip.active .chip-n { color: #fff; background: rgba(255,255,255,0.18); }
/* GROUPED RESULTS (when sorted by artist/genre) */
.group { margin-bottom: 48px; }
.group:last-child { margin-bottom: 0; }
.group-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 20px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: baseline;
gap: 10px;
}
.group-title a:hover { color: var(--accent-ink); }
.group-count {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
color: var(--ink-mute);
letter-spacing: 0.08em;
}
.no-results {
text-align: center;
padding: 60px 20px;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* genre tags inside cards */
.genre-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.chip-mini {
font-family: var(--font-body);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
color: var(--ink-soft);
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 999px;
padding: 2px 8px;
}
/* GRID */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 32px;
}
.card {
background: transparent;
display: flex; flex-direction: column;
transition: transform .2s ease;
}
.card:hover { transform: translateY(-2px); }
.card:hover .cover { box-shadow: var(--shadow-hover); }
.cover {
aspect-ratio: 1/1;
background: var(--bg-card);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow);
transition: box-shadow .2s ease;
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: var(--ink-mute);
}
.cover-placeholder.big { background: var(--bg-card); border-radius: var(--r-lg); }
.card-body { padding: 14px 4px 0; }
.card-body h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
margin: 0 0 2px;
line-height: 1.25;
letter-spacing: -0.01em;
display: flex;
align-items: flex-start;
gap: 4px;
justify-content: space-between;
}
.card-body h3 .rarity-badge { flex: 0 0 auto; margin-top: 2px; }
.artist { margin: 0 0 6px; color: var(--ink-soft); font-size: 14px; }
.meta {
margin: 0;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.08em;
display: flex; gap: 8px; flex-wrap: wrap;
}
.meta-sub { margin-top: 4px; }
.dot { color: var(--line); }
/* ALBUM DETAIL */
.album-hero {
display: grid;
grid-template-columns: minmax(260px, 360px) 1fr;
gap: 56px;
margin-bottom: 56px;
padding-bottom: 32px;
border-bottom: 1px solid var(--line);
}
.album-cover {
aspect-ratio: 1/1;
background: var(--bg-card);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-hover);
}
.album-cover img { width: 100%; height: 100%; object-fit: cover; }
.album-info h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: 48px;
margin: 0 0 6px;
line-height: 1.05;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.album-artist {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
font-style: italic;
color: var(--accent-ink);
margin: 0 0 24px;
}
.album-artist a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kv {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px 32px;
margin: 0 0 24px;
}
.kv div { border-top: 1px solid var(--line); padding-top: 10px; }
.kv dt {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-mute);
margin: 0 0 4px;
}
.kv dd { margin: 0; font-size: 15px; color: var(--ink); }
.kv dd .kv-link {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--line);
padding-bottom: 1px;
transition: color 120ms ease, border-color 120ms ease;
}
.kv dd .kv-link:hover,
.kv dd .kv-link:focus-visible {
color: var(--accent);
border-bottom-color: currentColor;
outline: none;
}
.notes { margin-top: 16px; color: var(--ink-soft); font-size: 15px; max-width: 60ch; }
.source a { color: var(--accent); font-family: var(--font-mono); font-size: 12px; }
/* TRACKS */
.tracklist h2 {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 20px;
}
.tracks { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.tracks li {
display: grid;
grid-template-columns: 36px 1fr auto 60px;
align-items: center;
gap: 16px;
padding: 12px 4px;
border-bottom: 1px solid var(--line-soft);
}
.tracks li:hover { background: var(--bg-card); }
.tn {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-mute);
}
.ttitle { font-size: 15px; }
.twriters { font-size: 12px; color: var(--ink-mute); font-style: italic; }
.tdur { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); text-align: right; }
.muted { color: var(--ink-mute); }
/* ARTIST */
.artist-hero { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.artist-hero h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: 56px;
margin: 0 0 24px;
letter-spacing: -0.02em;
}
.artist-hero .kv { max-width: 600px; }
.bio { margin-top: 20px; max-width: 65ch; color: var(--ink-soft); }
/* EMPTY */
.empty {
text-align: center;
padding: 80px 20px;
max-width: 480px;
margin: 0 auto;
}
.empty-icon { color: var(--ink-mute); margin-bottom: 16px; }
.empty h2 {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.empty p { color: var(--ink-soft); margin: 0; }
/* FOOTER */
.site-footer {
border-top: 1px solid var(--line);
padding: 22px 40px 26px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.site-footer .footer-beta { color: var(--ink-soft, var(--ink-mute)); }
.site-footer .footer-beta a {
color: var(--accent, #2f6f4a);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
text-transform: none;
letter-spacing: 0.02em;
}
.site-footer .footer-beta a:hover { opacity: 0.85; }
/* RESPONSIVE */
@media (max-width: 980px) {
.showcase-trio { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
.showcase-tile-cover { aspect-ratio: 16 / 9; }
.hero-v2 h1 { font-size: 48px; }
.hero-v2 { flex-direction: column; align-items: stretch; gap: 24px; }
.hero-v2 .hero-right { align-items: stretch; min-width: 0; }
.hero-search { width: 100%; }
}
@media (max-width: 768px) {
.site-header, .page { padding-left: 20px; padding-right: 20px; }
.hero { flex-direction: column; align-items: flex-start; gap: 24px; }
.hero h1 { font-size: 40px; }
.stats { gap: 24px; }
.stats div { text-align: left; }
.album-hero { grid-template-columns: 1fr; gap: 24px; }
.album-cover { max-width: 340px; }
.album-info h1 { font-size: 36px; }
.tracks li { grid-template-columns: 28px 1fr auto; }
.twriters { display: none; }
.controls { flex-direction: column; align-items: stretch; gap: 16px; }
.top-panel { grid-template-columns: 1fr; gap: 16px; }
}
/* states */
.loading, .error {
text-align: center;
padding: 100px 20px;
color: var(--ink-mute);
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.error { color: var(--accent-ink); }
.error .muted { display: block; margin-top: 8px; font-size: 11px; color: var(--ink-mute); text-transform: none; letter-spacing: 0; }
/* ===========================================================================
Next Spin — homepage teaser + dedicated page
=========================================================================== */
/* --- Homepage teaser strip --- */
.ns-teaser {
margin: 32px 0 36px;
padding: 22px 26px;
background:
linear-gradient(180deg, #fbf7ef 0%, #f7efe1 100%);
border: 1px solid rgba(184, 67, 31, 0.22);
border-left: 4px solid var(--accent);
border-radius: 6px;
box-shadow: 0 1px 0 rgba(26,23,20,0.04), 0 8px 22px -16px rgba(26,23,20,0.22);
position: relative;
}
.ns-teaser-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
color: var(--ink-soft);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.ns-teaser-kicker {
color: var(--accent-ink);
font-weight: 600;
}
.ns-teaser-sep { color: var(--ink-mute); }
.ns-teaser-tag {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
text-transform: none;
letter-spacing: 0;
font-size: 13px;
color: var(--ink-soft);
}
.ns-teaser-row {
display: grid;
grid-template-columns: 96px 1fr;
gap: 22px;
align-items: start;
}
.ns-teaser-cover {
display: block;
width: 96px;
height: 96px;
border-radius: 4px;
overflow: hidden;
background: #1a1410;
box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 8px 18px -10px rgba(26,23,20,0.35);
}
.ns-teaser-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-teaser-body { min-width: 0; }
.ns-teaser-context {
color: var(--ink-mute);
font-size: 13px;
margin: 0 0 6px;
}
.ns-teaser-context a, .ns-anchor-link { color: var(--accent-ink); font-weight: 500; }
.ns-teaser-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 700;
font-size: 22px;
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 6px;
}
.ns-teaser-title a { color: inherit; text-decoration: none; }
.ns-teaser-title a:hover { color: var(--accent-ink); }
.ns-teaser-artist {
font-weight: 400;
font-size: 16px;
color: var(--ink-soft);
font-style: italic;
margin-left: 4px;
}
.ns-teaser-yr { color: var(--ink-mute); font-style: normal; }
.ns-teaser-reason {
margin: 4px 0 14px;
color: var(--ink-soft);
font-size: 14px;
line-height: 1.5;
max-width: 64ch;
}
.ns-teaser-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.ns-teaser-loading, .ns-teaser-error .ns-teaser-body { color: var(--ink-mute); font-style: italic; }
/* --- Match pill --- */
.ns-match-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
background: rgba(47, 99, 99, 0.10);
color: var(--accent-teal);
border: 1px solid rgba(47, 99, 99, 0.28);
border-radius: 999px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
.ns-match-score {
padding: 2px 5px;
background: var(--accent-teal);
color: #fbf7ef;
border-radius: 999px;
font-size: 9px;
font-weight: 700;
}
/* --- Buttons --- */
.ns-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 4px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ns-btn:disabled { opacity: 0.55; cursor: wait; }
.ns-btn-primary {
background: var(--accent);
color: #fbf7ef;
border-color: var(--accent);
}
.ns-btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.ns-btn-secondary {
background: #fbf7ef;
color: var(--ink);
border-color: rgba(26,23,20,0.18);
}
.ns-btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.ns-btn-ghost {
background: transparent;
color: var(--ink-soft);
border-color: rgba(26,23,20,0.16);
}
.ns-btn-ghost:hover { color: var(--accent-ink); border-color: var(--accent); background: rgba(184, 67, 31, 0.06); }
/* --- Dedicated page hero --- */
.ns-page-hero {
margin: 8px 0 28px;
max-width: 760px;
}
.ns-page-hero h1 {
font-family: 'Fraunces', Georgia, serif;
font-weight: 700;
font-size: 48px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
margin: 4px 0 12px;
}
.ns-page-hero .lede { color: var(--ink-soft); font-size: 15px; max-width: 60ch; line-height: 1.55; }
/* --- Controls panel --- */
.ns-controls {
background: var(--bg-card);
border: 1px solid rgba(26,23,20,0.10);
border-radius: 6px;
padding: 22px 24px;
margin-bottom: 28px;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 22px;
}
.ns-control-title {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-mute);
margin: 0 0 12px;
font-weight: 600;
}
.ns-theme-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ns-theme-chip {
appearance: none;
background: transparent;
border: 1px solid rgba(26,23,20,0.18);
color: var(--ink-soft);
padding: 8px 14px;
border-radius: 999px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.12s;
}
.ns-theme-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.ns-theme-chip.active {
background: var(--accent);
border-color: var(--accent);
color: #fbf7ef;
}
.ns-filter-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
margin-bottom: 16px;
}
.ns-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.ns-field-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-mute);
font-weight: 600;
}
.ns-field select {
appearance: none;
background: #fbf7ef;
border: 1px solid rgba(26,23,20,0.18);
border-radius: 4px;
padding: 8px 28px 8px 12px;
color: var(--ink);
font-family: inherit;
font-size: 13px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
.ns-field select:focus { border-color: var(--accent); outline: none; }
.ns-toggle-row {
display: flex;
flex-wrap: wrap;
gap: 14px 22px;
margin-bottom: 14px;
}
.ns-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--ink-soft);
cursor: pointer;
user-select: none;
}
.ns-toggle input { accent-color: var(--accent); width: 14px; height: 14px; }
.ns-toggle:hover { color: var(--ink); }
.ns-actions-bar {
display: flex;
gap: 10px;
padding-top: 4px;
border-top: 1px solid rgba(26,23,20,0.08);
padding-top: 14px;
}
/* --- Result grid --- */
.ns-result { margin-bottom: 36px; }
.ns-result-head { margin-bottom: 14px; }
.ns-result-eyebrow {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
color: var(--ink-soft);
font-size: 14px;
margin: 0;
}
.ns-result-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: 20px;
align-items: start;
}
@media (max-width: 760px) {
.ns-result-grid { grid-template-columns: 1fr; }
}
/* Anchor card */
.ns-anchor-card {
display: block;
background: #1a1714;
color: #f4efe6;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 14px 30px -22px rgba(26,23,20,0.65);
transition: transform 0.15s;
}
.ns-anchor-card:hover { transform: translateY(-2px); }
.ns-anchor-card.empty {
background: #fbf7ef;
color: var(--ink-soft);
border: 1px dashed rgba(26,23,20,0.2);
padding: 22px;
}
.ns-anchor-cover {
aspect-ratio: 1 / 1;
background: #0a0805;
}
.ns-anchor-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-anchor-body { padding: 14px 16px 16px; }
.ns-anchor-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--accent-mustard);
margin: 0 0 6px;
font-weight: 600;
}
.ns-anchor-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 700;
font-size: 17px;
line-height: 1.2;
margin: 0 0 4px;
}
.ns-anchor-artist {
font-size: 13px;
color: rgba(244,239,230,0.78);
margin: 0 0 8px;
}
.ns-anchor-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ns-chip-mini {
display: inline-block;
padding: 2px 7px;
background: rgba(244,239,230,0.10);
color: rgba(244,239,230,0.82);
border-radius: 999px;
font-size: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ns-anchor-empty { font-size: 13px; margin: 8px 0 0; line-height: 1.5; }
/* Suggestion cards */
.ns-primary-slot { margin-bottom: 16px; }
.ns-suggest-card {
display: grid;
grid-template-columns: 140px 1fr;
gap: 18px;
padding: 18px;
background: var(--bg-card);
border: 1px solid rgba(26,23,20,0.10);
border-radius: 6px;
}
.ns-suggest-card.primary {
border-color: rgba(184, 67, 31, 0.35);
background:
linear-gradient(180deg, #fbf7ef 0%, #f7eddd 100%);
box-shadow: 0 10px 28px -22px rgba(184, 67, 31, 0.45);
}
.ns-suggest-cover {
display: block;
aspect-ratio: 1 / 1;
width: 140px;
border-radius: 4px;
overflow: hidden;
background: #1a1410;
box-shadow: 0 8px 18px -12px rgba(26,23,20,0.5);
}
.ns-suggest-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-suggest-body { min-width: 0; }
.ns-suggest-role {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-mute);
font-weight: 600;
margin: 0 0 4px;
}
.ns-suggest-card.primary .ns-suggest-role { color: var(--accent-ink); }
.ns-suggest-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 700;
font-size: 19px;
line-height: 1.2;
margin: 0 0 4px;
}
.ns-suggest-title a { color: var(--ink); text-decoration: none; }
.ns-suggest-title a:hover { color: var(--accent-ink); }
.ns-suggest-artist {
font-size: 13px;
color: var(--ink-soft);
margin: 0 0 8px;
}
.ns-suggest-reason {
color: var(--ink-soft);
font-size: 13.5px;
line-height: 1.5;
margin: 0 0 12px;
max-width: 56ch;
}
.ns-suggest-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.ns-alternates {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
}
.ns-empty-card {
padding: 30px;
background: var(--bg-card);
border: 1px dashed rgba(26,23,20,0.18);
border-radius: 6px;
text-align: center;
}
.ns-empty-card h3 {
font-family: 'Fraunces', Georgia, serif;
font-size: 18px;
color: var(--ink);
margin: 0 0 6px;
}
.ns-empty-card p { color: var(--ink-mute); margin: 0; }
.ns-muted { color: var(--ink-mute); font-size: 13px; }
/* Section titles */
.ns-section-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
margin: 0 0 6px;
color: var(--ink);
}
.ns-section-sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; }
/* Override search */
.ns-override { margin: 8px 0 36px; }
.ns-search-wrap { position: relative; max-width: 560px; }
.ns-search-input {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(26,23,20,0.18);
border-radius: 4px;
background: var(--bg-card);
color: var(--ink);
font-family: inherit;
font-size: 14px;
}
.ns-search-input:focus { border-color: var(--accent); outline: none; }
.ns-search-results {
margin-top: 6px;
background: var(--bg-card);
border: 1px solid rgba(26,23,20,0.14);
border-radius: 4px;
max-height: 360px;
overflow-y: auto;
box-shadow: 0 14px 28px -20px rgba(26,23,20,0.35);
}
.ns-search-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
align-items: center;
width: 100%;
padding: 9px 12px;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(26,23,20,0.06);
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
}
.ns-search-row:last-child { border-bottom: 0; }
.ns-search-row:hover { background: rgba(184, 67, 31, 0.06); }
.ns-search-cover {
width: 36px; height: 36px;
background: #1a1410;
border-radius: 3px;
overflow: hidden;
}
.ns-search-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-search-meta { display: flex; flex-direction: column; min-width: 0; }
.ns-search-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.ns-search-artist { font-size: 11.5px; color: var(--ink-mute); }
.ns-search-cue {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent-ink);
font-weight: 600;
}
.ns-search-empty { padding: 14px; color: var(--ink-mute); font-size: 13px; margin: 0; }
/* History list */
.ns-history-list { display: flex; flex-direction: column; gap: 0; }
.ns-history-row {
display: grid;
grid-template-columns: 44px 36px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
background: var(--bg-card);
border: 1px solid rgba(26,23,20,0.08);
border-top: 0;
text-decoration: none;
color: var(--ink);
font-size: 13px;
transition: background 0.12s;
}
.ns-history-row:first-child { border-top: 1px solid rgba(26,23,20,0.08); border-radius: 4px 4px 0 0; }
.ns-history-row:last-child { border-radius: 0 0 4px 4px; }
.ns-history-row:hover { background: rgba(184, 67, 31, 0.05); }
.ns-history-idx {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
color: var(--ink-mute);
text-align: center;
}
.ns-history-row:first-child .ns-history-idx {
color: #fbf7ef;
background: var(--accent);
border-radius: 999px;
padding: 2px 0;
}
.ns-history-cover { width: 36px; height: 36px; border-radius: 3px; overflow: hidden; background: #1a1410; }
.ns-history-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-history-meta { display: flex; flex-direction: column; min-width: 0; }
.ns-history-title { font-weight: 600; color: var(--ink); }
.ns-history-artist { color: var(--ink-mute); font-size: 11.5px; }
.ns-history-source {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-teal);
padding: 2px 8px;
background: rgba(47, 99, 99, 0.08);
border-radius: 999px;
}
.ns-history-time {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: var(--ink-mute);
}
@media (max-width: 640px) {
.ns-history-row { grid-template-columns: 36px 36px 1fr auto; }
.ns-history-source { display: none; }
.ns-teaser-row { grid-template-columns: 80px 1fr; }
.ns-teaser-cover { width: 80px; height: 80px; }
.ns-teaser-title { font-size: 19px; }
.ns-page-hero h1 { font-size: 36px; }
}
/* ---------------------------------------------------------------------------
Now Spinning — live homepage card (chalkboard-inspired)
--------------------------------------------------------------------------- */
.now-spinning-card {
display: grid;
grid-template-columns: 168px 1fr;
gap: 22px;
align-items: stretch;
margin: 22px 0 4px;
padding: 18px 22px 18px 18px;
background:
linear-gradient(180deg, #1d2f27 0%, #16261f 100%);
border: 1px solid #0e1a14;
border-radius: 8px;
box-shadow:
0 2px 0 #5a3a20, /* warm wood ledge */
0 10px 22px -10px rgba(10, 12, 10, 0.55),
inset 0 0 0 1px rgba(255, 247, 230, 0.04);
color: #fbf7ef;
text-decoration: none;
position: relative;
overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.now-spinning-card:hover {
transform: translateY(-1px);
box-shadow:
0 2px 0 #5a3a20,
0 14px 26px -10px rgba(10, 12, 10, 0.6),
inset 0 0 0 1px rgba(255, 247, 230, 0.06);
}
.now-spinning-card::before {
/* faint chalk-dust texture on the board */
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 12% 18%, rgba(255, 247, 230, 0.05) 0, transparent 38%),
radial-gradient(circle at 88% 78%, rgba(255, 247, 230, 0.04) 0, transparent 42%);
pointer-events: none;
}
.now-spinning-loading, .now-spinning-empty {
grid-template-columns: 1fr;
min-height: 96px;
padding: 18px 22px;
}
.ns-kicker-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.ns-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #b8431f;
box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18);
animation: nsPulse 2.2s ease-in-out infinite;
}
.ns-dot-off {
background: #6b6258;
box-shadow: none;
animation: none;
}
@keyframes nsPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18); }
50% { box-shadow: 0 0 0 6px rgba(184, 67, 31, 0.06); }
}
.ns-kicker {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #b88a1f;
}
.ns-cover {
position: relative;
width: 168px; height: 168px;
border-radius: 4px;
overflow: hidden;
background: #0a0805;
box-shadow:
0 1px 0 rgba(255, 247, 230, 0.04),
0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.ns-cover img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.ns-cover-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: rgba(255, 247, 230, 0.35);
}
.ns-disc {
position: absolute;
right: -52px; top: 50%;
transform: translateY(-50%);
width: 110px; height: 110px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, #b8431f 0 18%, transparent 18.5%),
repeating-radial-gradient(circle at 50% 50%,
#15110d 0 2px, #1a1410 2px 4px);
box-shadow:
0 0 0 1.5px #0a0805,
0 4px 10px -3px rgba(0, 0, 0, 0.55);
opacity: 0.94;
}
.ns-body {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding-right: 6px;
}
.ns-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 500;
font-size: 30px;
line-height: 1.1;
letter-spacing: -0.01em;
margin: 2px 0 6px;
color: #fbf7ef;
}
.ns-artist {
font-family: 'Fraunces', Georgia, serif;
font-size: 16px;
color: #e9dcc1;
margin: 0 0 6px;
}
.ns-year {
color: #b88a1f;
font-size: 14px;
}
.ns-sidetrack {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.06em;
color: #b88a1f;
margin: 4px 0 2px;
}
.ns-note {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 14px;
color: rgba(251, 247, 239, 0.78);
margin: 6px 0 4px;
}
.ns-cta {
display: inline-block;
margin-top: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #b8431f;
border-bottom: 1px solid transparent;
transition: border-color 0.18s ease, color 0.18s ease;
}
a.now-spinning-card:hover .ns-cta {
color: #d96b3a;
border-bottom-color: #d96b3a;
}
.ns-empty-line {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 18px;
color: #e9dcc1;
margin: 4px 0;
}
.ns-empty-sub { margin: 4px 0 0; }
.ns-empty-link {
color: #b8431f;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
text-decoration: none;
letter-spacing: 0.06em;
border-bottom: 1px solid rgba(184, 67, 31, 0.4);
}
.ns-empty-link:hover { border-bottom-color: #b8431f; }
.ns-loading {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
color: rgba(251, 247, 239, 0.6);
}
@media (max-width: 640px) {
.now-spinning-card { grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; }
.ns-cover { width: 110px; height: 110px; }
.ns-disc { display: none; }
.ns-title { font-size: 22px; }
.ns-artist { font-size: 14px; }
}
/* ---------------------------------------------------------------------------
Album page editorial upgrade — NOW SPINNING badge, story, trivia, lyrics
--------------------------------------------------------------------------- */
.album-now-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
background: rgba(184, 67, 31, 0.08);
border: 1px solid rgba(184, 67, 31, 0.28);
padding: 4px 10px 4px 8px;
border-radius: 999px;
margin-bottom: 14px;
}
.album-now-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18);
animation: nsPulse 2.2s ease-in-out infinite;
}
.album-hero.is-now-spinning {
border-left: 3px solid var(--accent);
padding-left: 18px;
}
.album-year { color: var(--ink-mute); font-size: 0.92em; }
.album-actions {
display: flex; gap: 10px; flex-wrap: wrap;
margin-top: 14px;
}
.album-action {
display: inline-block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-ink);
padding: 6px 12px;
background: rgba(184, 67, 31, 0.06);
border: 1px solid rgba(184, 67, 31, 0.25);
border-radius: 4px;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.album-action:hover {
background: rgba(184, 67, 31, 0.12);
border-color: var(--accent);
}
.album-action[disabled],
.album-action:disabled {
cursor: default;
opacity: 1;
}
.album-action.album-action-primary {
background: var(--accent);
color: #fbf7ef;
border-color: var(--accent);
cursor: pointer;
font-weight: 600;
}
.album-action.album-action-primary:hover {
background: var(--accent-ink);
border-color: var(--accent-ink);
}
.album-action.album-action-primary:disabled {
background: var(--ink-mute);
border-color: var(--ink-mute);
cursor: wait;
}
.album-action.album-action-current {
background: rgba(47, 99, 99, 0.12);
color: var(--accent-teal);
border-color: rgba(47, 99, 99, 0.4);
font-weight: 600;
}
/* Current-spin strip (editable) */
.current-spin-strip {
margin: 18px 0 8px;
padding: 14px 18px;
background: var(--bg-card);
border: 1px solid rgba(184, 67, 31, 0.2);
border-left: 3px solid var(--accent);
border-radius: 6px;
}
.cs-kicker {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-teal);
margin-bottom: 10px;
}
.cs-fields {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
align-items: flex-end;
}
.cs-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.cs-field-wide { flex: 1 1 220px; }
.cs-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mute);
}
.cs-input {
font-family: 'Fraunces', Georgia, serif;
font-size: 14px;
padding: 6px 10px;
background: #fdfaf3;
border: 1px solid rgba(26, 23, 20, 0.18);
border-radius: 4px;
color: var(--ink);
min-width: 60px;
}
.cs-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(184, 67, 31, 0.18);
}
.cs-input-narrow { width: 72px; }
.cs-save, .cs-stop {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 7px 14px;
border-radius: 4px;
cursor: pointer;
border: 1px solid;
transition: background 0.15s ease;
}
.cs-save {
color: #fbf7ef;
background: var(--accent);
border-color: var(--accent);
}
.cs-save:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.cs-stop {
color: var(--ink-soft);
background: transparent;
border-color: rgba(26, 23, 20, 0.25);
}
.cs-stop:hover { background: rgba(26, 23, 20, 0.05); }
.cs-status {
margin: 8px 0 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: var(--ink-mute);
min-height: 14px;
}
/* Read-only spin strip (shown on someone else's public vault) */
.cs-fields-readonly {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.cs-pill {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 5px 10px;
border: 1px solid rgba(26, 23, 20, 0.15);
border-radius: 999px;
background: rgba(255, 255, 255, 0.6);
font-size: 13px;
color: var(--ink);
}
.cs-pill .cs-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-mute);
}
.cs-pill-note {
font-style: italic;
color: var(--ink-soft);
}
/* Read-only view chrome: hidden nav links */
body.vv-readonly-view .site-nav a.is-hidden { display: none; }
/* Story section */
.album-story {
margin: 28px 0 6px;
padding: 22px 26px;
background: var(--bg-card);
border: 1px solid rgba(26, 23, 20, 0.08);
border-radius: 6px;
position: relative;
}
.album-story-kicker {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 12px;
}
.album-story-body {
font-family: 'Fraunces', Georgia, serif;
font-size: 17px;
line-height: 1.65;
color: var(--ink-soft);
}
.album-story-body p { margin: 0 0 14px; }
.album-story-body p:last-child { margin-bottom: 0; }
.album-story-body p:first-child::first-letter {
font-family: 'Fraunces', Georgia, serif;
font-weight: 700;
font-size: 3.2em;
float: left;
line-height: 0.9;
padding: 4px 10px 0 0;
color: var(--accent);
}
.album-story-empty .album-story-body { font-style: italic; }
/* Trivia section */
.album-trivia {
margin: 22px 0 6px;
padding: 20px 26px;
background: #f8f3ea;
border: 1px dashed rgba(26, 23, 20, 0.16);
border-radius: 6px;
}
.album-trivia-kicker {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-teal);
margin: 0 0 12px;
}
.album-trivia-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.album-trivia-list li {
font-family: 'Fraunces', Georgia, serif;
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
padding-left: 18px;
position: relative;
}
.album-trivia-list li::before {
content: '';
position: absolute;
left: 0; top: 0.65em;
width: 6px; height: 6px;
background: var(--accent-mustard);
border-radius: 50%;
}
@media (max-width: 640px) {
.album-story { padding: 18px; }
.album-story-body { font-size: 16px; }
.album-trivia { padding: 16px 18px; }
.cs-input-narrow { width: 60px; }
}
/* ============================================================
Enrichment — admin strip + per-album CTA + source footers
============================================================ */
.enrich-admin {
margin: 18px 0 6px;
padding: 14px 18px;
background: var(--bg-card);
border: 1px solid rgba(47, 99, 99, 0.25);
border-left: 3px solid var(--accent-teal);
border-radius: 6px;
}
.enrich-admin-row {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
}
.enrich-admin-meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.enrich-admin-kicker {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent-teal); font-weight: 700;
}
.enrich-admin-count {
font-size: 14px; color: var(--ink); font-weight: 500;
}
.enrich-admin-fail {
font-size: 11px; color: var(--accent); font-weight: 600;
padding: 2px 8px; background: rgba(184,67,31,0.1); border-radius: 3px;
}
.enrich-admin-actions { display: flex; align-items: center; gap: 12px; }
.enrich-progress {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px; color: var(--ink-soft);
}
.enrich-admin-btn {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
font-weight: 600;
background: var(--accent-teal); color: #fbf7ef;
border: 1px solid var(--accent-teal);
padding: 7px 14px; border-radius: 4px; cursor: pointer;
transition: background 0.15s ease;
}
.enrich-admin-btn:hover:not(:disabled) { background: #1f4a4a; border-color: #1f4a4a; }
.enrich-admin-btn:disabled { opacity: 0.55; cursor: default; }
.enrich-admin-bar {
margin-top: 10px; height: 4px;
background: rgba(47, 99, 99, 0.12); border-radius: 2px; overflow: hidden;
}
.enrich-admin-bar-fill {
height: 100%; background: var(--accent-teal);
transition: width 0.4s ease;
}
/* Per-album Generate CTA */
.enrich-cta {
margin: 24px 0;
padding: 22px 24px;
background: var(--bg-card);
border: 1px dashed rgba(184, 67, 31, 0.35);
border-radius: 6px;
text-align: center;
}
.enrich-cta-kicker {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--accent); font-weight: 700; margin-bottom: 8px;
}
.enrich-cta-body {
font-size: 14px; color: var(--ink-soft); margin: 0 auto 14px;
max-width: 520px; line-height: 1.55;
}
.enrich-cta-error {
font-size: 12px; color: var(--accent); margin: 0 0 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.enrich-status {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px; color: var(--ink-mute);
margin-top: 10px; min-height: 1em;
}
/* Source footer under story / trivia */
.enrich-foot {
margin-top: 12px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; color: var(--ink-mute);
letter-spacing: 0.04em;
padding-top: 8px;
border-top: 1px dashed rgba(0,0,0,0.08);
}
.enrich-foot a { color: var(--accent-teal); text-decoration: none; }
.enrich-foot a:hover { text-decoration: underline; }
.enrich-refresh {
margin-left: 10px;
background: none; border: 1px solid rgba(184, 67, 31, 0.3);
color: var(--accent-ink); font-family: inherit; font-size: 10px;
padding: 2px 8px; border-radius: 3px; cursor: pointer; text-transform: uppercase;
letter-spacing: 0.08em;
}
.enrich-refresh:hover { background: rgba(184, 67, 31, 0.08); }
/* =========================================================================
Vault Paths
========================================================================= */
/* --- Homepage teaser (mirrors ns-teaser, mustard-leaning accent) --- */
.vp-teaser {
margin: 28px 0 36px;
padding: 22px 26px;
background:
linear-gradient(180deg, #fbf7ef 0%, #f5ecdc 100%);
border: 1px solid rgba(184, 138, 31, 0.28);
border-left: 4px solid var(--accent-mustard);
border-radius: 6px;
box-shadow: 0 1px 0 rgba(26,23,20,0.04), 0 8px 22px -16px rgba(26,23,20,0.22);
position: relative;
}
.vp-teaser-eyebrow {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 12px;
color: var(--ink-soft);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.vp-teaser-kicker { color: var(--accent-ink); font-weight: 600; }
.vp-teaser-sep { color: var(--ink-mute); }
.vp-teaser-tag {
font-family: 'Fraunces', Georgia, serif;
font-style: italic; text-transform: none;
letter-spacing: 0; font-size: 13px; color: var(--ink-soft);
}
.vp-teaser-count {
margin-left: auto;
padding: 3px 8px;
background: rgba(184, 138, 31, 0.14);
color: var(--accent-mustard);
border-radius: 999px;
font-size: 10px; font-weight: 700;
}
.vp-teaser-row {
display: grid;
grid-template-columns: 96px 1fr;
gap: 22px;
align-items: start;
}
.vp-teaser-cover {
display: flex; align-items: center; justify-content: center;
width: 96px; height: 96px;
border-radius: 4px; overflow: hidden;
background: #1a1410; color: rgba(251, 247, 239, 0.45);
box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 8px 18px -10px rgba(26,23,20,0.35);
}
.vp-teaser-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-teaser-cover .vp-cover-ghost { width: 60%; height: 60%; display: flex; }
.vp-teaser-cover .vp-cover-ghost svg { width: 100%; height: 100%; }
.vp-teaser-body { min-width: 0; }
.vp-teaser-context { color: var(--ink-mute); font-size: 13px; margin: 0 0 6px; }
.vp-teaser-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 700; font-size: 22px; line-height: 1.18;
letter-spacing: -0.01em; color: var(--ink);
margin: 0 0 6px;
}
.vp-teaser-title a { color: inherit; text-decoration: none; }
.vp-teaser-title a:hover { color: var(--accent-ink); }
.vp-teaser-artist {
font-weight: 400; font-size: 16px;
color: var(--ink-soft); font-style: italic; margin-left: 4px;
}
.vp-teaser-yr { color: var(--ink-mute); font-style: normal; }
.vp-teaser-reason {
margin: 4px 0 14px; color: var(--ink-soft);
font-size: 14px; line-height: 1.5; max-width: 64ch;
}
.vp-teaser-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vp-teaser-loading, .vp-teaser-error .vp-teaser-body {
color: var(--ink-mute); font-style: italic;
}
.vp-teaser-empty .vp-teaser-body { color: var(--ink-soft); }
/* --- Page hero --- */
.vp-hero {
margin: 8px 0 24px;
max-width: 760px;
}
.vp-hero-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 700; font-size: 48px; line-height: 1.05;
letter-spacing: -0.02em; color: var(--ink);
margin: 4px 0 12px;
}
.vp-hero-lede {
color: var(--ink-soft); font-size: 15px;
max-width: 60ch; line-height: 1.55;
}
/* --- Generator bar --- */
.vp-genbar {
margin: 0 0 22px;
padding: 18px 22px;
background: var(--bg-card);
border: 1px solid rgba(26,23,20,0.10);
border-radius: 6px;
}
.vp-genbar-head {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
margin-bottom: 12px;
}
.vp-genbar-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600; font-size: 18px; color: var(--ink);
margin: 0;
}
.vp-genbar-sub { color: var(--ink-mute); font-size: 13px; font-style: italic; }
.vp-genbar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vp-chip {
padding: 6px 12px;
background: transparent;
color: var(--ink-soft);
border: 1px solid rgba(26,23,20,0.18);
border-radius: 999px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px; font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.vp-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.vp-chip.active {
background: var(--accent);
color: #fbf7ef;
border-color: var(--accent);
}
.vp-genbar-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vp-genbar-limit {
display: inline-flex; align-items: center; gap: 8px;
color: var(--ink-soft); font-size: 13px;
}
.vp-genbar-limit input {
width: 64px; padding: 6px 8px;
border: 1px solid rgba(26,23,20,0.18);
border-radius: 4px; background: #fbf7ef;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px; color: var(--ink);
}
.vp-genbar-limit input:focus { outline: none; border-color: var(--accent); }
/* --- Tabs --- */
.vp-tabs {
display: flex; gap: 4px;
margin: 0 0 18px;
border-bottom: 1px solid rgba(26,23,20,0.12);
}
.vp-tab {
padding: 10px 16px;
background: transparent; border: none;
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px; font-weight: 500;
color: var(--ink-soft);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.vp-tab:hover { color: var(--accent-ink); }
.vp-tab.active {
color: var(--accent-ink);
border-bottom-color: var(--accent);
font-weight: 600;
}
/* --- List + cards --- */
.vp-list { display: flex; flex-direction: column; gap: 14px; }
.vp-loading, .vp-empty {
padding: 32px 0; text-align: center; font-style: italic;
}
.vp-card {
display: grid;
grid-template-columns: 80px 1fr;
gap: 18px;
padding: 18px 20px;
background: var(--bg-card);
border: 1px solid rgba(26,23,20,0.10);
border-left: 3px solid rgba(26,23,20,0.18);
border-radius: 6px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.vp-card:hover {
border-color: rgba(184, 67, 31, 0.30);
box-shadow: 0 6px 16px -12px rgba(26,23,20,0.20);
}
.vp-card-pinned {
border-left-color: var(--accent-moss, #4a7a47);
background: linear-gradient(180deg, var(--bg-card) 0%, #f3f6ee 100%);
}
.vp-card-resolved { border-left-color: var(--accent-teal); background: linear-gradient(180deg, #fbf7ef 0%, #f1f5f3 100%); }
.vp-card-cover {
display: flex; align-items: center; justify-content: center;
width: 80px; height: 80px;
background: #1a1410; color: rgba(251, 247, 239, 0.45);
border-radius: 4px; overflow: hidden;
box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 6px 14px -10px rgba(26,23,20,0.32);
}
.vp-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-card-cover .vp-cover-ghost { width: 56%; height: 56%; display: flex; }
.vp-card-cover .vp-cover-ghost svg { width: 100%; height: 100%; }
.vp-card-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vp-card-head { display: flex; flex-direction: column; gap: 8px; }
.vp-card-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 700; font-size: 18px;
line-height: 1.22; letter-spacing: -0.005em;
color: var(--ink); margin: 0;
}
.vp-card-title a { color: inherit; text-decoration: none; }
.vp-card-title a:hover { color: var(--accent-ink); }
/* Title-as-button (unresolved paths): inherits typographic styling from .vp-card-title */
.vp-card-title-btn {
display: inline; appearance: none; background: none; border: 0; padding: 0; margin: 0;
font: inherit; color: inherit; letter-spacing: inherit; text-align: left;
cursor: pointer; line-height: inherit;
}
.vp-card-title-btn:hover { color: var(--accent-ink); }
.vp-card-title-btn:focus-visible { outline: 2px solid var(--accent-moss, #4f6f44); outline-offset: 3px; border-radius: 2px; }
.vp-card-chev {
display: inline-block; margin-left: 6px;
font-weight: 600; color: var(--ink-mute);
transition: transform 160ms ease;
}
.vp-card-title-btn[aria-expanded="true"] .vp-card-chev { transform: rotate(90deg); color: var(--accent-ink); }
/* Expand button in the card footer */
.vp-btn-expand .vp-expand-icon {
display: inline-block; transition: transform 160ms ease;
}
.vp-btn-expand[aria-expanded="true"] .vp-expand-icon { transform: rotate(90deg); }
/* Collapsed state — the [hidden] attribute already hides it, but keep this for clarity */
.vp-pressing-collapsed[hidden] { display: none; }
/* Open state — a subtle fade-in so the drawer doesn't pop */
.vp-pressing-open { animation: vp-pressing-fade 180ms ease-out both; }
@keyframes vp-pressing-fade {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
.vp-card-artist {
font-weight: 400; font-size: 14px;
color: var(--ink-soft); font-style: italic; margin-left: 4px;
}
.vp-card-yr { color: var(--ink-mute); font-style: normal; }
.vp-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vp-card-reason {
margin: 0; color: var(--ink-soft);
font-size: 13.5px; line-height: 1.5;
}
.vp-card-notes {
margin: 0; padding: 8px 12px;
background: rgba(184, 138, 31, 0.08);
border-left: 2px solid var(--accent-mustard);
border-radius: 0 4px 4px 0;
color: var(--ink-soft); font-size: 13px;
}
.vp-card-notes-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.12em; color: var(--accent-mustard);
font-weight: 700; margin-right: 6px;
}
.vp-card-actions { display: flex; gap: 8px; margin-top: 4px; }
.vp-card-backups {
font-size: 12.5px; color: var(--ink-soft);
}
.vp-card-backups summary {
cursor: pointer;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px; text-transform: uppercase;
letter-spacing: 0.12em; color: var(--ink-mute);
padding: 4px 0; outline: none;
}
.vp-card-backups summary:hover { color: var(--accent-ink); }
.vp-card-backups[open] summary { color: var(--accent-ink); margin-bottom: 6px; }
/* --- Version blocks --- */
.vp-version {
padding: 10px 12px;
border-radius: 4px;
font-size: 13px;
}
.vp-version-preferred {
background: rgba(47, 99, 99, 0.07);
border: 1px solid rgba(47, 99, 99, 0.22);
}
.vp-version-backup {
background: rgba(26,23,20,0.03);
border: 1px dashed rgba(26,23,20,0.14);
margin-top: 6px;
}
.vp-version-head {
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
margin-bottom: 6px;
}
.vp-version-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.12em; font-weight: 700;
color: var(--accent-teal);
}
.vp-version-backup .vp-version-label { color: var(--ink-mute); }
.vp-version-why {
font-family: 'Fraunces', Georgia, serif;
font-style: italic; font-size: 12.5px;
color: var(--ink-soft);
}
.vp-version-lines {
display: flex; flex-wrap: wrap; gap: 4px 10px;
color: var(--ink); font-size: 13px;
}
.vp-version-lines span { white-space: nowrap; }
.vp-version-lines span:not(:last-child)::after {
content: '·'; margin-left: 10px; color: var(--ink-mute);
}
.vp-version-avoid {
margin: 6px 0 0; padding: 4px 8px;
background: rgba(184, 67, 31, 0.07);
border-left: 2px solid var(--accent);
color: var(--ink-soft); font-size: 12px;
border-radius: 0 3px 3px 0;
}
/* --- Pills (source + status) --- */
.vp-pill {
display: inline-flex; align-items: center;
padding: 3px 9px;
border-radius: 999px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.1em; font-weight: 600;
border: 1px solid transparent;
white-space: nowrap;
}
.vp-pill-rust { background: rgba(184, 67, 31, 0.10); color: var(--accent-ink); border-color: rgba(184, 67, 31, 0.28); }
.vp-pill-teal { background: rgba(47, 99, 99, 0.10); color: var(--accent-teal); border-color: rgba(47, 99, 99, 0.28); }
.vp-pill-mustard { background: rgba(184, 138, 31, 0.12); color: var(--accent-mustard); border-color: rgba(184, 138, 31, 0.32); }
.vp-pill-ink { background: rgba(26, 23, 20, 0.06); color: var(--ink-soft); border-color: rgba(26, 23, 20, 0.16); }
/* --- Priority bar --- */
.vp-prio {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; color: var(--ink-mute);
}
.vp-prio-bar {
display: inline-block; width: 56px; height: 5px;
background: rgba(26,23,20,0.10);
border-radius: 999px; overflow: hidden;
}
.vp-prio-fill {
display: block; height: 100%;
background: linear-gradient(90deg, var(--accent-mustard), var(--accent));
border-radius: 999px;
}
.vp-prio-n { font-weight: 700; color: var(--ink-soft); letter-spacing: 0.05em; }
/* --- Buttons (parallel to ns-btn for consistency) --- */
.vp-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px;
border-radius: 4px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12.5px; font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.vp-btn:disabled { opacity: 0.55; cursor: wait; }
.vp-btn-primary {
background: var(--accent); color: #fbf7ef; border-color: var(--accent);
}
.vp-btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.vp-btn-ghost {
background: transparent; color: var(--ink-soft); border-color: rgba(26,23,20,0.16);
}
.vp-btn-ghost:hover { color: var(--accent-ink); border-color: var(--accent); background: rgba(184, 67, 31, 0.06); }
/* --- Mobile --- */
@media (max-width: 720px) {
.vp-teaser-row { grid-template-columns: 64px 1fr; gap: 14px; }
.vp-teaser-cover { width: 64px; height: 64px; }
.vp-teaser-title { font-size: 18px; }
.vp-teaser-artist { font-size: 14px; }
.vp-hero-title { font-size: 34px; }
.vp-card { grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 16px; }
.vp-card-cover { width: 64px; height: 64px; }
.vp-card-title { font-size: 16px; }
.vp-tabs { overflow-x: auto; }
.vp-tab { white-space: nowrap; }
}
/* =========================================================================
Vault Paths — Pinned state (green) + Pressing Notes drawer
========================================================================= */
/* Pin button — pinned variant
Muted forest green: tasteful, editorial, never neon. */
.vp-btn-pinned {
background: var(--accent-moss);
color: #fbfaf4;
border-color: var(--accent-moss-deep);
font-weight: 600;
letter-spacing: 0.01em;
}
.vp-btn-pinned:hover:not(:disabled) {
background: var(--accent-moss-deep);
border-color: var(--accent-moss-deep);
color: #fbfaf4;
}
.vp-btn-pinned:disabled {
opacity: 0.85;
cursor: progress;
}
.vp-pin-icon {
display: inline-block;
font-size: 0.95em;
line-height: 1;
margin-right: 2px;
transform: translateY(-0.5px);
}
/* "Actively hunting" pill in the meta row */
.vp-pill-hunting {
background: rgba(74, 122, 71, 0.10);
color: var(--accent-moss-ink);
border-color: rgba(74, 122, 71, 0.32);
gap: 6px;
}
.vp-hunting-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent-moss);
box-shadow: 0 0 0 0 rgba(74, 122, 71, 0.45);
animation: vp-hunt-pulse 2.2s ease-out infinite;
flex: 0 0 auto;
}
@keyframes vp-hunt-pulse {
0% { box-shadow: 0 0 0 0 rgba(74, 122, 71, 0.45); }
70% { box-shadow: 0 0 0 6px rgba(74, 122, 71, 0); }
100% { box-shadow: 0 0 0 0 rgba(74, 122, 71, 0); }
}
@media (prefers-reduced-motion: reduce) {
.vp-hunting-dot { animation: none; }
}
/* Pressing Notes drawer — inline expandable section
Lives between card body content and .vp-card-actions footer.
Light moss tint, never gamified. */
.vp-pressing {
margin-top: 10px;
padding: 14px 16px 16px;
background: rgba(74, 122, 71, 0.06);
border: 1px solid rgba(74, 122, 71, 0.18);
border-radius: 6px;
}
.vp-pressing-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 10px;
}
.vp-pressing-kicker {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--accent-moss-ink);
font-weight: 700;
}
.vp-pressing-sub {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 12.5px;
color: var(--ink-mute);
}
/* Tag row */
.vp-pressing-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 12px;
}
.vp-tag {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.01em;
border: 1px solid transparent;
background: rgba(26,23,20,0.04);
color: var(--ink-soft);
}
.vp-tag-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
opacity: 0.75;
}
.vp-tag-avail-easy { background: rgba(74, 122, 71, 0.12); color: var(--accent-moss-ink); border-color: rgba(74, 122, 71, 0.32); }
.vp-tag-avail-moderate { background: rgba(184, 138, 31, 0.12); color: var(--accent-mustard); border-color: rgba(184, 138, 31, 0.32); }
.vp-tag-avail-hard { background: rgba(184, 67, 31, 0.10); color: var(--accent-ink); border-color: rgba(184, 67, 31, 0.28); }
.vp-tag-price-budget { background: rgba(47, 99, 99, 0.10); color: var(--accent-teal); border-color: rgba(47, 99, 99, 0.28); }
.vp-tag-price-mid { background: rgba(184, 138, 31, 0.12); color: var(--accent-mustard); border-color: rgba(184, 138, 31, 0.32); }
.vp-tag-price-premium { background: rgba(184, 67, 31, 0.10); color: var(--accent-ink); border-color: rgba(184, 67, 31, 0.28); }
.vp-tag-source { background: rgba(26, 23, 20, 0.05); color: var(--ink-mute); border-color: rgba(26, 23, 20, 0.10); }
/* Field grid — 2 col on desktop, 1 col on mobile */
.vp-pressing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 22px;
margin: 0;
}
.vp-pressing-row {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
padding: 4px 0;
border-top: 1px solid rgba(74, 122, 71, 0.14);
}
.vp-pressing-row:first-child,
.vp-pressing-row:nth-child(2) {
border-top: 0;
padding-top: 0;
}
.vp-pressing-key {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-mute);
font-weight: 600;
margin: 0;
}
.vp-pressing-val {
font-size: 13.5px;
color: var(--ink);
margin: 1px 0 0;
line-height: 1.4;
}
.vp-pressing-note {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 14px;
line-height: 1.5;
color: var(--ink-soft);
margin: 12px 0 0;
padding-top: 10px;
border-top: 1px solid rgba(74, 122, 71, 0.18);
}
.vp-pressing-loading {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
color: var(--ink-mute);
margin: 4px 0 0;
}
/* Mobile: stack grid + tighten padding */
@media (max-width: 720px) {
.vp-pressing {
padding: 12px 14px 14px;
}
.vp-pressing-grid {
grid-template-columns: 1fr;
gap: 0;
}
.vp-pressing-row {
border-top: 1px solid rgba(74, 122, 71, 0.14);
padding: 6px 0;
}
.vp-pressing-row:nth-child(2) {
border-top: 1px solid rgba(74, 122, 71, 0.14);
padding-top: 6px;
}
.vp-pressing-row:first-child {
border-top: 0;
padding-top: 0;
}
}
/* =========================================================================
Vault Paths layout — side modules (Latest Listens + Active Hunts)
========================================================================= */
/* Three-column layout. Sides at fixed 260px, main fluid.
The decorative shop-art SVGs only appear above 1100px, so the side
modules effectively REPLACE them on the Vault Paths route in that range. */
.vp-layout {
display: grid;
grid-template-columns: 260px minmax(0, 1fr) 260px;
gap: 28px;
align-items: start;
}
.vp-main { min-width: 0; }
.vp-side {
position: sticky;
top: 88px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* On the Vault Paths route, fade the decorative gutters so the
functional panels are the dominant frame. We don't hide them
entirely — a faint trace preserves the record-shop atmosphere. */
body.on-vault-paths .shop-art { opacity: 0.18; transition: opacity 0.3s ease; }
/* Shared side-module header styling */
.vp-side-head {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 2px;
}
.vp-side-kicker {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink-mute);
font-weight: 600;
}
.vp-side-title {
font-family: 'Fraunces', Georgia, serif;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.005em;
color: var(--ink);
margin: 0;
line-height: 1.15;
}
.vp-side-loading,
.vp-side-empty {
margin: 0;
padding: 8px 4px;
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 13px;
color: var(--ink-mute);
}
.vp-side-foot {
align-self: flex-start;
margin-top: 2px;
padding: 4px 2px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent-ink);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.vp-side-foot:hover {
color: var(--accent);
border-bottom-color: rgba(184, 67, 31, 0.45);
}
/* -------- Latest Listens list -------- */
.vp-ll-list {
list-style: none;
margin: 0;
padding: 0;
background: var(--bg-card);
border: 1px solid rgba(26, 23, 20, 0.10);
border-radius: 6px;
overflow: hidden;
}
.vp-ll-row + .vp-ll-row { border-top: 1px solid rgba(26, 23, 20, 0.08); }
.vp-ll-link {
display: grid;
grid-template-columns: 36px 1fr;
gap: 10px;
align-items: center;
padding: 9px 11px;
text-decoration: none;
color: inherit;
transition: background 0.12s;
}
.vp-ll-link:hover { background: rgba(184, 67, 31, 0.05); }
.vp-ll-thumb {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: #1a1410;
border-radius: 3px;
overflow: hidden;
flex: 0 0 auto;
}
.vp-ll-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-ll-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
opacity: 0.7;
}
.vp-ll-body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.vp-ll-title {
font-family: 'Fraunces', Georgia, serif;
font-size: 14px;
font-weight: 600;
color: var(--ink);
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vp-ll-artist {
font-size: 11.5px;
color: var(--ink-soft);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vp-ll-year { opacity: 0.7; }
.vp-ll-when {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-mute);
margin-top: 1px;
}
/* -------- Active Hunts quick-link card -------- */
.vp-hunt-card {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
width: 100%;
padding: 16px 14px 14px;
background: linear-gradient(180deg, var(--bg-card) 0%, #f0f4ec 100%);
border: 1px solid rgba(74, 122, 71, 0.30);
border-left: 3px solid var(--accent-moss);
border-radius: 6px;
text-align: left;
cursor: pointer;
color: inherit;
font: inherit;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.vp-hunt-card:hover {
border-color: var(--accent-moss-deep);
box-shadow: 0 8px 22px -14px rgba(74, 122, 71, 0.55);
transform: translateY(-1px);
}
.vp-hunt-card:focus-visible {
outline: 2px solid var(--accent-moss);
outline-offset: 2px;
}
.vp-hunt-art {
display: block;
width: 92px;
height: 92px;
margin: 0 auto;
}
.vp-hunt-art svg { width: 100%; height: 100%; display: block; }
.vp-hunt-body {
display: flex;
flex-direction: column;
gap: 4px;
}
.vp-hunt-title {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-family: 'Fraunces', Georgia, serif;
font-size: 19px;
font-weight: 700;
color: var(--ink);
line-height: 1.1;
margin: 0;
}
.vp-hunt-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 7px;
background: var(--accent-moss);
color: #fbfaf4;
border-radius: 999px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
transform: translateY(-1px);
}
.vp-hunt-sub {
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.4;
}
.vp-hunt-cta {
margin-top: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent-moss-ink);
font-weight: 600;
}
/* -------- Pinned tab active accent (subtle moss tint) -------- */
.vp-tab[data-vp-tab="pinned"].active {
color: var(--accent-moss-ink);
border-bottom-color: var(--accent-moss);
}
/* -------- Mobile: stack the layout, drop sticky -------- */
@media (max-width: 980px) {
.vp-layout {
grid-template-columns: 1fr;
gap: 18px;
}
.vp-side {
position: static;
top: auto;
}
/* On mobile, surface the Active Hunts card ABOVE the main list
(it's the most actionable element) and Latest Listens BELOW. */
.vp-side-right { order: -1; }
.vp-side-left { order: 2; }
.vp-main { order: 1; }
.vp-hunt-card {
grid-template-columns: 72px 1fr;
align-items: center;
gap: 14px;
}
.vp-hunt-art { width: 72px; height: 72px; margin: 0; }
}
/* === Phase C: Auth, Account, Add-album === */
/* Header layout: nav center, account right */
.site-header { gap: 24px; }
.site-nav { flex: 1; justify-content: flex-start; margin-left: 28px; }
.account-slot { display: flex; align-items: center; gap: 10px; }
.acct-anon { display: flex; align-items: center; gap: 8px; }
.acct-link {
background: transparent; border: 0; font-size: 14px;
color: var(--ink-soft); cursor: pointer; padding: 6px 10px;
font-family: inherit; font-weight: 500;
}
.acct-link:hover { color: var(--accent-ink); }
.acct-cta {
background: var(--ink); color: var(--bg-card);
border: 1px solid var(--ink); border-radius: var(--r-sm);
padding: 7px 14px; font-size: 13.5px; font-weight: 600;
cursor: pointer; font-family: inherit;
transition: background 140ms ease, transform 140ms ease;
}
.acct-cta:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.acct-menu { position: relative; }
.acct-chip {
display: flex; align-items: center; gap: 8px;
background: transparent; border: 1px solid var(--line);
border-radius: 999px; padding: 4px 12px 4px 4px;
font-family: inherit; font-size: 14px; color: var(--ink);
cursor: pointer; transition: border-color 140ms ease;
}
.acct-chip:hover { border-color: var(--ink-mute); }
.acct-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: var(--accent-ink); color: var(--bg-card);
font-size: 13px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.acct-name { font-weight: 500; }
.acct-pop {
position: absolute; right: 0; top: calc(100% + 8px);
background: var(--bg-card); border: 1px solid var(--line);
border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,0.12);
min-width: 240px; padding: 6px; z-index: 30;
display: flex; flex-direction: column;
/* Hidden by default; revealed by hover or click (is-open). */
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(-4px);
transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.acct-menu:hover .acct-pop,
.acct-menu:focus-within .acct-pop,
.acct-menu.is-open .acct-pop {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateY(0);
transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 0s;
}
/* Invisible bridge so cursor can travel from chip to dropdown without losing hover */
.acct-pop::before {
content: "";
position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.acct-pop a, .acct-pop button {
text-align: left; background: transparent; border: 0;
padding: 9px 14px; font-size: 14px; color: var(--ink);
text-decoration: none; border-radius: var(--r-sm);
font-family: inherit; cursor: pointer;
}
.acct-pop a:hover, .acct-pop button:hover { background: var(--line-soft); color: var(--accent-ink); }
.acct-logout { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 11px; color: var(--ink-soft); }
/* Auth modal */
.auth-overlay {
position: fixed; inset: 0; z-index: 100;
background: rgba(26,23,20,0.55);
display: flex; align-items: center; justify-content: center;
padding: 24px;
backdrop-filter: blur(6px);
}
.auth-card {
background: var(--bg-card); border-radius: var(--r-md);
width: 100%; max-width: 420px;
padding: 28px 28px 22px; position: relative;
box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.auth-close {
position: absolute; top: 12px; right: 14px;
background: transparent; border: 0; font-size: 24px;
color: var(--ink-mute); cursor: pointer; line-height: 1;
font-family: inherit;
}
.auth-close:hover { color: var(--ink); }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.auth-tab {
background: transparent; border: 0;
padding: 10px 14px; font-size: 14px; font-weight: 500;
color: var(--ink-mute); cursor: pointer; font-family: inherit;
border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.auth-tab.active { color: var(--ink); border-bottom-color: var(--accent-ink); font-weight: 600; }
.auth-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.auth-form .field label { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.auth-form .field input, .auth-form .field textarea {
padding: 10px 12px; font-family: inherit; font-size: 15px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--bg); color: var(--ink);
}
.auth-form .field input:focus { outline: none; border-color: var(--accent-ink); }
.field-hint { font-size: 12px; color: var(--ink-mute); }
.auth-err, .acct-err, .add-err {
background: #f8e6e0; color: #6b1f0a;
padding: 9px 12px; border-radius: var(--r-sm);
font-size: 13px; margin-bottom: 12px;
}
.acct-ok {
background: #e3efe1; color: #234d1a;
padding: 9px 12px; border-radius: var(--r-sm);
font-size: 13px; margin-bottom: 12px;
}
.acct-pw-form .field { margin-bottom: 14px; }
.acct-pw-form .field-label {
display: block; font-size: 12px; color: var(--ink-mute);
text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
}
.acct-pw-form input {
width: 100%; padding: 10px 12px;
background: var(--bg-card); border: 1px solid var(--line);
border-radius: var(--r-sm); font-family: inherit; font-size: 14px;
color: var(--ink);
}
.acct-pw-form input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent-ink); }
.auth-submit {
width: 100%; padding: 11px;
background: var(--ink); color: var(--bg-card);
border: 0; border-radius: var(--r-sm);
font-family: inherit; font-size: 14.5px; font-weight: 600;
cursor: pointer; margin-top: 4px;
transition: background 140ms ease;
}
.auth-submit:hover:not(:disabled) { background: var(--accent-ink); }
.auth-submit:disabled { opacity: 0.6; cursor: wait; }
.auth-foot { font-size: 12.5px; color: var(--ink-mute); text-align: center; margin: 14px 0 0; }
/* Account settings page */
.account-page, .add-page { max-width: 720px; margin: 0 auto; padding: 36px 32px 64px; }
.account-head, .add-head { margin-bottom: 28px; }
.account-head h1, .add-head h1 {
font-family: var(--font-display); font-weight: 700;
font-size: 36px; letter-spacing: -0.015em; margin: 4px 0 8px;
}
.account-head .eyebrow, .add-head .eyebrow {
font-family: var(--font-mono);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--accent-ink); margin: 0;
}
.account-head .lede, .add-head .lede { color: var(--ink-soft); font-size: 15px; margin: 0; }
.acct-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
margin-bottom: 24px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field .field-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; letter-spacing: 0.02em; }
.field input, .field textarea {
padding: 10px 12px; font-family: inherit; font-size: 15px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--bg); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-ink); }
.acct-public {
border: 1px solid var(--line); border-radius: var(--r-md);
padding: 16px 18px; margin-bottom: 22px;
}
.acct-public legend {
font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-soft); padding: 0 8px;
}
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.check-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent-ink); }
.slug-row {
display: flex; align-items: stretch;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--bg); overflow: hidden;
}
.slug-row .slug-prefix {
padding: 10px 12px; background: var(--line-soft);
font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft);
border-right: 1px solid var(--line); white-space: nowrap;
}
.slug-row input { border: 0; flex: 1; font-family: var(--font-mono); }
.slug-link { font-size: 13px; color: var(--accent-ink); margin-top: 8px; display: inline-block; }
.acct-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.btn-primary {
background: var(--ink); color: var(--bg-card);
border: 1px solid var(--ink); border-radius: var(--r-sm);
padding: 10px 18px; font-family: inherit; font-size: 14px; font-weight: 600;
cursor: pointer; text-decoration: none;
transition: background 140ms ease;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-secondary {
background: transparent; color: var(--ink-soft);
border: 1px solid var(--line); border-radius: var(--r-sm);
padding: 10px 18px; font-family: inherit; font-size: 14px; font-weight: 500;
cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { color: var(--ink); border-color: var(--ink-mute); }
/* Add album page */
.photo-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
margin-bottom: 28px;
}
.photo-tile { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.photo-frame {
width: 100%; aspect-ratio: 1;
background: var(--line-soft);
border: 1px dashed var(--ink-mute);
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-empty {
font-family: var(--font-mono);
font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-mute);
}
.btn-photo {
background: var(--bg-card); border: 1px solid var(--ink);
color: var(--ink); border-radius: var(--r-sm);
padding: 9px 16px; font-family: inherit; font-size: 13.5px; font-weight: 600;
cursor: pointer;
}
.btn-photo:hover { background: var(--ink); color: var(--bg-card); }
.photo-status {
font-size: 12px; color: var(--ink-mute); margin: 0;
min-height: 1em;
}
.add-form .field { margin-bottom: 16px; }
@media (max-width: 640px) {
.acct-grid { grid-template-columns: 1fr; }
.photo-grid { grid-template-columns: 1fr; }
.account-page, .add-page { padding: 24px 18px 48px; }
.site-header { padding: 14px 18px; gap: 10px; flex-wrap: wrap; }
.site-nav { margin-left: 0; }
.acct-name { display: none; }
.acct-anon .acct-link { display: none; }
}
/* --- Phase C: clear the shop-art SVG decorations ---
Above 1100px the .shop-art-left/right SVGs occupy 300px on each side.
Pull page content inward so hero text doesn't overlap them.
Placed at end of file so it wins source-order against the base .page rule. */
@media (min-width: 1101px) {
.page { padding-left: 320px !important; padding-right: 320px !important; max-width: 1640px !important; }
.site-header { padding-left: 320px !important; padding-right: 320px !important; }
.site-footer { padding-left: 320px !important; padding-right: 320px !important; }
}
@media (min-width: 1700px) {
.page { padding-left: 340px !important; padding-right: 340px !important; max-width: 1800px !important; }
.site-header { padding-left: 340px !important; padding-right: 340px !important; }
.site-footer { padding-left: 340px !important; padding-right: 340px !important; }
}
/* ============================================================
Landing page — high-end vintage aesthetic
============================================================ */
/* Nav hides when logged out */
.site-nav.is-hidden { display: none !important; }
/* Kill the cheesy shop-scene SVGs everywhere — the photo backdrop carries the atmosphere now. */
.shop-scene { display: none !important; }
html, body { background: transparent !important; }
body { background-image: none !important; } /* drop the body paper grain (we add a fresh one over the photo) */
.site-header {
background: linear-gradient(180deg, rgba(244,239,230,0.94) 0%, rgba(244,239,230,0.82) 70%, rgba(244,239,230,0) 100%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: none;
}
.site-footer { background: transparent; }
.page { background: transparent; }
/* Hero photographic backdrop — the wall photo backs the landing, the turntable photo backs the vault. */
.hero-bg {
display: none;
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
body.logged-out .hero-bg-landing { display: block; }
body:not(.logged-out) .hero-bg-vault { display: block; }
.hero-bg picture,
.hero-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.hero-bg img {
object-fit: cover;
/* Slightly desaturate + lift midtones so it sits behind type without competing */
filter: contrast(0.95) saturate(0.85);
}
/* Warm cream veil — fades the photo so type stays readable but atmosphere comes through.
Landing variant is asymmetric (heavier on the headline side so the lede reads,
lighter on the right so the record wall is unmistakable). Bottom still fades to
cream so the photo dissolves before the footer. */
.hero-bg-landing .hero-bg-veil {
position: absolute;
inset: 0;
background:
linear-gradient(105deg, rgba(244, 239, 230, 0.78) 0%, rgba(244, 239, 230, 0.66) 38%, rgba(244, 239, 230, 0.38) 70%, rgba(244, 239, 230, 0.28) 100%),
linear-gradient(180deg, rgba(244, 239, 230, 0.05) 0%, rgba(244, 239, 230, 0) 35%, rgba(244, 239, 230, 0.45) 78%, rgba(244, 239, 230, 0.90) 100%);
}
/* Vault variant: the turntable should be clearly visible — just softened
enough that album covers and metadata stay legible on top of it.
Lighter at the top (where the hero/headline sits) so the photo reads,
denser toward the middle where the cards stack. */
.hero-bg-vault .hero-bg-veil {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(244, 239, 230, 0.55) 0%,
rgba(244, 239, 230, 0.65) 30%,
rgba(244, 239, 230, 0.78) 60%,
rgba(244, 239, 230, 0.88) 100%);
}
.hero-bg-vault img {
filter: contrast(1.0) saturate(0.85) brightness(1.0);
}
/* Subtle paper grain — SVG noise turbulence, ~4% opacity */
.hero-bg-grain {
position: absolute;
inset: 0;
opacity: 0.06;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* Landing layout */
.landing {
padding: 12px 0 80px;
position: relative;
}
/* Hero: single column, centered-left, generous whitespace */
.land-hero {
max-width: 760px;
margin: 0 auto;
padding: 80px 0 96px;
text-align: left;
position: relative;
}
@media (max-width: 800px) {
.land-hero { padding: 48px 0 64px; }
}
.land-hero-rule {
width: 56px;
height: 1px;
background: var(--ink);
margin-bottom: 22px;
opacity: 0.8;
}
.land-kicker {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 20px;
}
.land-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(48px, 8vw, 96px);
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 28px;
font-variation-settings: "opsz" 144;
}
.land-title-line {
display: block;
}
.land-title em {
font-style: italic;
font-weight: 300;
color: var(--accent-ink);
}
.land-lede {
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
font-size: clamp(18px, 2vw, 22px);
line-height: 1.5;
color: var(--ink-soft);
max-width: 520px;
margin: 0 0 36px;
font-variation-settings: "opsz" 18;
}
.land-cta-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.land-cta {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 15px 28px;
border-radius: 0; /* sharp corners — feels printed */
border: 1px solid transparent;
cursor: pointer;
transition: background 180ms, color 180ms, border-color 180ms, transform 80ms;
line-height: 1;
}
.land-cta:active { transform: translateY(1px); }
.land-cta.primary {
background: var(--ink);
color: var(--bg-card);
border-color: var(--ink);
}
.land-cta.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.land-cta.ghost {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.land-cta.ghost:hover { background: var(--ink); color: var(--bg-card); }
.land-foot-note {
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-mute);
margin: 10px 0 0;
font-family: var(--font-body);
}
/* Feature triad — magazine columns with big Fraunces numerals */
.land-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
max-width: 1100px;
margin: 0 auto;
padding: 80px 0;
border-top: 1px solid rgba(26, 23, 20, 0.12);
border-bottom: 1px solid rgba(26, 23, 20, 0.12);
}
@media (max-width: 900px) {
.land-features { grid-template-columns: 1fr; gap: 40px; padding: 56px 0; }
}
.land-feature {
background: transparent;
border: none;
padding: 0;
box-shadow: none;
}
.land-feature-num {
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
font-size: 54px;
line-height: 1;
color: var(--accent);
margin: 0 0 18px;
font-variation-settings: "opsz" 144;
letter-spacing: -0.02em;
}
.land-feature h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 26px;
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0 0 12px;
color: var(--ink);
font-variation-settings: "opsz" 36;
}
.land-feature p {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.65;
color: var(--ink-soft);
margin: 0;
}
/* Closing rule — centered editorial pull-quote */
.land-rule {
text-align: center;
padding: 96px 24px 32px;
max-width: 720px;
margin: 0 auto;
}
.land-rule-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(32px, 4.5vw, 52px);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 24px;
color: var(--ink);
font-variation-settings: "opsz" 96;
}
.land-rule-title em {
font-style: italic;
font-weight: 300;
color: var(--accent-ink);
}
.land-rule-body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--ink-soft);
margin: 0 auto 32px;
max-width: 540px;
}
.land-rule-cta { padding: 16px 32px; font-size: 13px; }
/* ============================================================
Brand mark — Fraunces italic VV stamp (v4)
============================================================ */
.brand-mark { color: var(--ink); display: block; }
.brand { gap: 12px; }
.brand-name {
letter-spacing: 0.01em;
}
/* ============================================================
Admin — owner-only console
============================================================ */
.admin-wrap {
max-width: 100%;
margin: 0 auto;
padding: 16px 0 64px;
}
.admin-eyebrow {
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 11px;
color: var(--ink-muted, #5f5448);
margin-bottom: 8px;
}
.admin-title {
font-family: var(--font-display, "Fraunces", Georgia, serif);
font-weight: 600;
font-size: 44px;
line-height: 1.05;
margin: 0 0 6px;
color: var(--ink);
}
.admin-sub {
font-family: var(--font-body, "Inter", sans-serif);
color: var(--ink-muted, #5f5448);
margin: 0 0 32px;
max-width: 560px;
}
.admin-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin-bottom: 40px;
}
.admin-stat {
background: rgba(255, 252, 246, 0.85);
border: 1px solid rgba(26, 23, 20, 0.08);
border-radius: 4px;
padding: 20px 22px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.admin-stat-label {
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 10px;
color: var(--ink-muted, #5f5448);
margin-bottom: 8px;
}
.admin-stat-value {
font-family: var(--font-display, "Fraunces", Georgia, serif);
font-weight: 600;
font-size: 36px;
line-height: 1;
color: var(--ink);
}
.admin-stat-meta {
font-family: var(--font-body, "Inter", sans-serif);
font-size: 12px;
color: var(--ink-muted, #5f5448);
margin-top: 6px;
}
.admin-section-title {
font-family: var(--font-display, "Fraunces", Georgia, serif);
font-weight: 500;
font-style: italic;
font-size: 22px;
margin: 0 0 14px;
color: var(--ink);
}
.admin-table-wrap {
background: rgba(255, 252, 246, 0.85);
border: 1px solid rgba(26, 23, 20, 0.08);
border-radius: 4px;
overflow-x: auto;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.admin-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body, "Inter", sans-serif);
font-size: 13px;
min-width: 920px;
}
.admin-table th {
text-align: left;
font-family: var(--font-mono);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 10px;
color: var(--ink-muted, #5f5448);
padding: 12px 12px;
border-bottom: 1px solid rgba(26, 23, 20, 0.08);
background: rgba(26, 23, 20, 0.025);
white-space: nowrap;
}
.admin-table td {
padding: 11px 12px;
border-bottom: 1px solid rgba(26, 23, 20, 0.05);
color: var(--ink);
vertical-align: middle;
white-space: nowrap;
}
.admin-table td:nth-child(2) { white-space: normal; max-width: 180px; }
.admin-table td:nth-child(3) { font-size: 12.5px; color: var(--ink-muted, #5f5448); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(184, 67, 31, 0.03); }
.admin-table td.num { font-variant-numeric: tabular-nums; color: var(--ink-muted, #5f5448); }
.admin-role {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 8px;
border-radius: 2px;
background: rgba(26, 23, 20, 0.08);
color: var(--ink);
}
.admin-role[data-role="owner"] {
background: #1a1714;
color: #fbf7ef;
}
.admin-role[data-role="admin"] {
background: #b8431f;
color: #fbf7ef;
}
.admin-empty {
padding: 48px;
text-align: center;
color: var(--ink-muted, #5f5448);
font-style: italic;
}
/* ----- admin: per-row plan select + delete button ----- */
.admin-plan-select {
font-family: var(--font-mono);
font-size: 11px;
text-transform: lowercase;
letter-spacing: 0.04em;
padding: 4px 22px 4px 8px;
border: 1px solid rgba(26, 23, 20, 0.18);
border-radius: 3px;
background: #fbf7ef;
color: var(--ink);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 6px center;
}
.admin-plan-select:hover { border-color: rgba(184, 67, 31, 0.5); }
.admin-plan-select:focus {
outline: none;
border-color: #b8431f;
box-shadow: 0 0 0 2px rgba(184, 67, 31, 0.15);
}
.admin-plan-select:disabled { opacity: 0.5; cursor: wait; }
.admin-actions-cell { text-align: right; }
.admin-delete-btn {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 5px 10px;
border: 1px solid rgba(26, 23, 20, 0.18);
border-radius: 2px;
background: transparent;
color: var(--ink-muted, #5f5448);
cursor: pointer;
transition: all 0.15s ease;
}
.admin-delete-btn:hover {
background: #7a2417;
border-color: #7a2417;
color: #fbf7ef;
}
.admin-delete-btn:disabled {
opacity: 0.55;
cursor: wait;
}
.admin-self-tag {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted, #5f5448);
opacity: 0.6;
}
/* =====================================================================
THE CONSOLE — unified frame around Now Spinning, Next Spin,
Vault Paths, and Latest Listens. Replaces the old stacked rows.
===================================================================== */
.console {
margin: 18px 0 32px;
padding: 18px 18px 20px;
background:
linear-gradient(180deg, rgba(255,253,247,0.65) 0%, rgba(251,247,239,0.45) 100%);
border: 1px solid rgba(26, 23, 20, 0.10);
border-radius: 6px;
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 8px 24px -16px rgba(26, 23, 20, 0.18);
position: relative;
}
.console::before {
/* faint inner ruled line evoking a mixer's panel */
content: '';
position: absolute;
inset: 6px;
border: 1px dashed rgba(26, 23, 20, 0.07);
border-radius: 4px;
pointer-events: none;
}
.console-eyebrow {
display: flex;
align-items: center;
gap: 8px;
padding: 0 4px 14px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink-mute, #5f5448);
position: relative;
z-index: 1;
}
.console-mark {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent, #b8431f);
box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18);
animation: console-pulse 2.4s ease-in-out infinite;
}
@keyframes console-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18); }
50% { box-shadow: 0 0 0 5px rgba(184, 67, 31, 0.06); }
}
.console-kicker { color: var(--ink, #1a1714); font-weight: 600; letter-spacing: 0.22em; }
.console-sep { opacity: 0.5; }
.console-tag { font-style: italic; text-transform: none; letter-spacing: 0; font-family: 'Fraunces', Georgia, serif; font-size: 13px; color: var(--ink-mute, #5f5448); }
.console-grid {
display: grid;
/* Two columns: a wide "now" zone on the left (Now Spinning on top,
Next Spin + Vault Paths in a row underneath) and the Latest Listens
timeline as a tall right column. */
grid-template-columns: minmax(0, 1fr) 250px;
grid-template-rows: auto auto;
grid-template-areas:
"anchor listens"
"sublane listens";
gap: 16px;
position: relative;
z-index: 1;
}
.console-cell-anchor { grid-area: anchor; }
.console-cell-listens { grid-area: listens; }
/* The middle sub-lane that holds Next Spin and Vault Paths side-by-side */
.console-sublane {
grid-area: sublane;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.console-cell-next,
.console-cell-paths { min-width: 0; }
/* Margin reset on existing teaser cards so they sit flush in console cells */
.console-cell .ns-teaser,
.console-cell .vp-teaser,
.console-cell .now-spinning-card {
margin: 0;
height: 100%;
}
/* When Next Spin / Vault Paths are in the narrow sublane, switch the grid
to a single column so cover stacks above the body (no word-by-word wrap). */
.console-cell-next .ns-teaser-row,
.console-cell-paths .vp-teaser-row {
grid-template-columns: 1fr !important;
gap: 12px;
align-items: start;
}
.console-cell-next .ns-teaser-cover,
.console-cell-paths .vp-teaser-cover {
width: 84px !important;
height: 84px !important;
}
.console-cell-next .ns-teaser-cover img,
.console-cell-paths .vp-teaser-cover img {
width: 100%; height: 100%; object-fit: cover;
}
/* Trim heavy padding inside teasers so they fit the narrow column */
.console-cell-next .ns-teaser,
.console-cell-paths .vp-teaser {
padding: 16px 14px;
}
/* Smaller title/lede sizing in sublane teasers */
.console-cell-next .ns-teaser-title,
.console-cell-paths .vp-teaser-title {
font-size: 19px;
line-height: 1.2;
}
.console-cell-next .ns-teaser-reason,
.console-cell-paths .vp-teaser-reason {
font-size: 12.5px;
line-height: 1.45;
}
/* Buttons can wrap and shrink in narrow cells */
.console-cell-next .ns-teaser-actions,
.console-cell-paths .vp-teaser-actions {
flex-wrap: wrap;
gap: 8px;
}
.console-cell-next .ns-btn,
.console-cell-paths .vp-btn {
font-size: 10px;
padding: 6px 10px;
}
/* Tag chip can wrap, count pill moves below */
.console-cell-next .ns-teaser-eyebrow,
.console-cell-paths .vp-teaser-eyebrow {
flex-wrap: wrap;
gap: 4px 6px;
}
.console-cell-paths .vp-teaser-count {
margin-left: 0;
}
/* Soft seam between the now-lane and the listens column */
.console-cell-listens { border-left: 1px solid rgba(26, 23, 20, 0.08); padding-left: 16px; }
/* ---- Latest Listens vertical timeline (right column of console) ---- */
.ll-col {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
}
.ll-col-head {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 2px 4px;
}
.ll-col-kicker {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink, #1a1714);
}
.ll-col-tag {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 12px;
color: var(--ink-mute, #5f5448);
}
.ll-col-loading,
.ll-col-empty {
margin: 0;
padding: 6px 2px;
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 12.5px;
color: var(--ink-mute, #5f5448);
}
.ll-stack {
list-style: none;
margin: 0;
padding: 0 0 0 12px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}
/* Vertical timeline rail */
.ll-stack::before {
content: '';
position: absolute;
left: 3px;
top: 6px;
bottom: 6px;
width: 1px;
background: linear-gradient(180deg,
rgba(184, 67, 31, 0.6) 0%,
rgba(26, 23, 20, 0.12) 35%,
rgba(26, 23, 20, 0.05) 100%);
}
.ll-stack-row {
display: grid;
grid-template-columns: 36px 1fr;
gap: 8px;
align-items: center;
text-decoration: none;
color: inherit;
padding: 4px 6px 4px 0;
border-radius: 3px;
position: relative;
transition: background 0.15s ease, transform 0.15s ease;
}
.ll-stack-row:hover {
background: rgba(184, 67, 31, 0.05);
transform: translateX(1px);
}
.ll-stack-tick {
position: absolute;
left: -12px;
top: 50%;
width: 7px;
height: 7px;
border-radius: 50%;
background: #fbf7ef;
border: 1px solid rgba(26, 23, 20, 0.35);
transform: translateY(-50%);
}
.ll-stack-row.is-latest .ll-stack-tick {
background: var(--accent, #b8431f);
border-color: var(--accent, #b8431f);
box-shadow: 0 0 0 2px rgba(184, 67, 31, 0.18);
}
.ll-stack-thumb {
width: 36px; height: 36px;
display: block;
overflow: hidden;
border-radius: 2px;
background: rgba(26, 23, 20, 0.06);
flex-shrink: 0;
}
.ll-stack-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-stack-dot {
width: 100%; height: 100%;
display: block;
background: radial-gradient(circle, rgba(26,23,20,0.18) 0%, rgba(26,23,20,0.06) 70%);
}
.ll-stack-body {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
.ll-stack-title {
font-family: 'Fraunces', Georgia, serif;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
color: var(--ink, #1a1714);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ll-stack-artist {
font-size: 11.5px;
color: var(--ink-mute, #5f5448);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ll-stack-when {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-mute, #5f5448);
opacity: 0.75;
margin-top: 1px;
}
.ll-col-foot {
align-self: flex-start;
margin-top: auto;
padding: 6px 2px 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent-ink, #7a2417);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.ll-col-foot:hover {
color: var(--accent, #b8431f);
border-bottom-color: rgba(184, 67, 31, 0.45);
}
/* ---- Mobile: collapse console to single column ---- */
@media (max-width: 980px) {
.console { padding: 14px 14px 16px; }
.console-grid {
grid-template-columns: 1fr;
grid-template-areas:
"anchor"
"sublane"
"listens";
gap: 12px;
}
.console-sublane { grid-template-columns: 1fr; }
.console-cell-listens {
border-left: none;
border-top: 1px solid rgba(26, 23, 20, 0.07);
padding-left: 0;
padding-top: 12px;
}
/* On mobile, restore the original side-by-side cover+body for the teasers */
.console-cell-next .ns-teaser-row,
.console-cell-paths .vp-teaser-row {
flex-direction: row;
align-items: center;
}
}
/* ---- The Console as its own page: larger frame, taller listens lane ---- */
.console-page {
margin: 22px 0 48px;
padding: 24px 24px 28px;
}
.console-grid-page {
/* Same two-column shape, but with a wider Latest Listens lane since it now
shows the last 10 spins instead of 5. */
grid-template-columns: minmax(0, 1fr) 320px;
gap: 22px;
}
.console-grid-page .console-sublane { gap: 18px; }
.console-grid-page .console-cell-listens .ll-stack {
/* Roomier vertical timeline for 10 entries */
max-height: none;
}
.hero-console h1 {
/* Slightly tighter hero so the Console gets the visual weight */
margin-bottom: 4px;
}
.hero-console .lede { margin-top: 4px; }
@media (max-width: 980px) {
.console-page { padding: 16px 14px 18px; }
.console-grid-page { grid-template-columns: 1fr; gap: 14px; }
}
/* Vault Paths: 2-col variant (Latest Listens lives in The Console now) */
.vp-layout.vp-layout-2col {
grid-template-columns: minmax(0, 1fr) 260px;
}
@media (max-width: 980px) {
.vp-layout.vp-layout-2col { grid-template-columns: 1fr; }
}
/* --- Top-nav "Add album" CTA (tasteful moss accent) --- */
.site-nav a.nav-add-cta { white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 12px;
padding: 6px 12px 6px 10px;
border: 1px solid var(--accent-moss);
border-radius: 999px;
color: var(--accent-moss-ink);
background: rgba(74, 122, 71, 0.06);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.site-nav a.nav-add-cta span[aria-hidden="true"] {
font-size: 15px;
font-weight: 700;
line-height: 1;
color: var(--accent-moss-deep);
}
.site-nav a.nav-add-cta:hover {
background: rgba(74, 122, 71, 0.14);
border-color: var(--accent-moss-deep);
color: var(--accent-moss-ink);
}
.site-nav a.nav-add-cta.active::after { display: none; }
@media (max-width: 720px) {
.site-nav a.nav-add-cta { white-space: nowrap; margin-left: 6px; padding: 5px 10px 5px 8px; font-size: 12px; }
}
/* ===== Beta-full waitlist panel (auth modal swap) ===== */
.beta-full { padding: 32px 28px 28px; text-align: left; }
.beta-full-eyebrow {
text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
color: var(--ink-mute); font-weight: 600; margin: 0 0 8px;
}
.beta-full-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 700; font-size: 24px; line-height: 1.2;
color: var(--ink); margin: 0 0 12px;
}
.beta-full-lede {
color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; margin: 0 0 18px;
}
.beta-full-form .field { margin-bottom: 12px; }
.beta-full-actions { margin-top: 8px; }
/* ===== Admin: Beta access section ===== */
.admin-beta {
margin: 0 0 28px;
background: var(--surface, #fff);
border: 1px solid var(--rule, #e6e1d8);
border-radius: 12px;
padding: 18px 20px;
}
.admin-beta-grid {
display: grid; gap: 24px;
grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
}
@media (max-width: 800px) {
.admin-beta-grid { grid-template-columns: 1fr; }
}
.admin-beta-label {
display: block; font-weight: 600; font-size: 13px;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-mute); margin: 0 0 4px;
}
.admin-beta-hint {
color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin: 0 0 12px;
}
.admin-beta-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.admin-beta-row input[type="number"] {
width: 110px; padding: 8px 10px;
border: 1px solid var(--rule, #d8d2c4); border-radius: 6px;
font: 600 16px 'Inter', system-ui, sans-serif; color: var(--ink);
background: #fcfbf7;
}
.admin-beta-row input[type="number"]:focus {
outline: 2px solid var(--accent-moss, #4f6f44); outline-offset: 1px;
border-color: var(--accent-moss, #4f6f44);
}
.admin-beta-save {
appearance: none; cursor: pointer;
background: var(--accent-moss, #4f6f44); color: #fff;
border: 0; border-radius: 6px; padding: 9px 16px;
font: 600 13px 'Inter', system-ui, sans-serif;
letter-spacing: 0.02em;
}
.admin-beta-save:hover { background: var(--accent-moss-deep, #3e5836); }
.admin-beta-save:disabled { opacity: 0.6; cursor: not-allowed; }
.admin-beta-status { font-size: 13px; color: var(--ink-soft); }
.admin-beta-status.is-ok { color: var(--accent-moss-deep, #3e5836); font-weight: 600; }
.admin-beta-status.is-error { color: #a8462e; font-weight: 600; }
.admin-beta-meta {
margin: 14px 0 0; font-size: 13px; color: var(--ink-soft);
}
.admin-beta-meta strong { color: var(--ink); }
.admin-beta-wl-title {
font-family: 'Fraunces', Georgia, serif;
font-size: 18px; font-weight: 700; color: var(--ink);
margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px;
}
.admin-beta-wl-count {
display: inline-block; min-width: 24px; padding: 2px 8px;
background: var(--accent-moss, #4f6f44); color: #fff;
border-radius: 999px; font: 600 12px 'Inter', sans-serif;
letter-spacing: 0.02em; text-align: center;
}
.admin-table-compact { font-size: 13px; }
.admin-table-compact th, .admin-table-compact td { padding: 6px 10px; }
/* === Beta pill (header) === */
.beta-pill {
display: inline-block; margin-left: 10px;
padding: 2px 9px; vertical-align: middle;
background: var(--accent-moss, #4f6f44); color: #fff;
border-radius: 999px;
font: 600 10px/1.5 'Inter', sans-serif;
letter-spacing: 0.08em; text-transform: uppercase;
user-select: none; cursor: default;
}
/* === Add Album: intake tabs (Photo / Manual) === */
.intake-tabs {
display: flex; gap: 0; margin: 0 0 22px;
border-bottom: 1px solid var(--rule, rgba(0,0,0,0.08));
}
.intake-tab {
appearance: none; background: none; border: none;
padding: 10px 16px; cursor: pointer;
font: 500 14px 'Inter', sans-serif;
color: var(--ink-soft, #6a6a6a);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.intake-tab.is-active { color: var(--ink, #1a1a1a); border-bottom-color: var(--accent-moss, #4f6f44); }
.intake-tab:hover:not(.is-active) { color: var(--ink, #1a1a1a); }
.intake-pane[hidden] { display: none; }
/* "Identify with AI" CTA row */
.identify-row {
display: flex; gap: 12px; align-items: center;
margin: 20px 0 24px; padding: 16px;
background: rgba(79, 111, 68, 0.04);
border: 1px solid rgba(79, 111, 68, 0.16);
border-radius: 8px;
}
.identify-row .identify-copy { flex: 1; font: 400 13px/1.5 'Inter', sans-serif; color: var(--ink-soft, #6a6a6a); }
.identify-row .identify-copy strong { color: var(--ink, #1a1a1a); font-weight: 600; }
.btn-identify {
appearance: none; cursor: pointer;
background: var(--accent-moss, #4f6f44); color: #fff;
border: none; border-radius: 6px;
padding: 10px 18px;
font: 600 13px 'Inter', sans-serif;
letter-spacing: 0.02em;
white-space: nowrap;
}
.btn-identify:hover:not(:disabled) { background: #3f5a36; }
.btn-identify:disabled { opacity: 0.5; cursor: not-allowed; }
/* Vision spinner / status */
.vision-status {
margin: 12px 0; padding: 14px 16px;
background: rgba(0,0,0,0.03); border-radius: 6px;
font: 400 13px 'Inter', sans-serif; color: var(--ink-soft);
display: flex; align-items: center; gap: 10px;
}
.vision-spinner {
width: 14px; height: 14px;
border: 2px solid rgba(79, 111, 68, 0.2);
border-top-color: var(--accent-moss, #4f6f44);
border-radius: 50%;
animation: vv-spin 0.8s linear infinite;
}
@keyframes vv-spin { to { transform: rotate(360deg); } }
/* Track list editor inside add form */
.track-editor { margin-top: 6px; }
.track-row {
display: grid; grid-template-columns: 48px 1fr 80px 32px;
gap: 8px; align-items: center; margin-bottom: 6px;
}
.track-row input {
padding: 7px 10px; border: 1px solid var(--rule, rgba(0,0,0,0.12));
border-radius: 4px; font: 400 13px 'Inter', sans-serif;
}
.track-row .track-num { text-align: center; }
.btn-track-remove {
appearance: none; cursor: pointer;
background: none; border: 1px solid var(--rule, rgba(0,0,0,0.12));
border-radius: 4px; width: 28px; height: 28px;
color: var(--ink-soft); font-size: 16px; line-height: 1;
}
.btn-track-remove:hover { color: #c44; border-color: #c44; }
.btn-track-add {
appearance: none; cursor: pointer;
background: none; border: 1px dashed var(--rule, rgba(0,0,0,0.18));
border-radius: 4px; padding: 7px 14px;
font: 500 12px 'Inter', sans-serif;
color: var(--ink-soft);
margin-top: 4px;
}
.btn-track-add:hover { color: var(--ink); border-color: var(--ink-soft); }
/* Edit / Delete buttons on album detail */
.album-action.album-action-edit { /* uses default album-action style */ }
.album-action.album-action-danger {
color: #b03030; border-color: rgba(176, 48, 48, 0.3);
}
.album-action.album-action-danger:hover { background: #b03030; color: #fff; border-color: #b03030; }
/* === Community page === */
.community {
max-width: 1200px;
margin: 0 auto;
padding: 48px 32px 80px;
}
.community-hero {
margin-bottom: 40px;
padding-bottom: 28px;
border-bottom: 1px solid var(--rule, rgba(0,0,0,0.12));
}
.community-kicker {
font: 500 11px/1 'Inter', sans-serif;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft, #6b6b66);
margin: 0 0 14px;
}
.community-title {
font: 600 44px/1.05 'Cormorant Garamond', 'Georgia', serif;
letter-spacing: -0.01em;
margin: 0 0 14px;
color: var(--ink, #1c1c1a);
}
.community-lede {
font: 400 16px/1.55 'Inter', sans-serif;
color: var(--ink-soft, #5a5a55);
margin: 0;
max-width: 640px;
}
.community-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.community-loading, .community-empty {
grid-column: 1 / -1;
padding: 32px 0;
font: 400 14px/1.5 'Inter', sans-serif;
}
.community-card {
display: flex;
gap: 16px;
padding: 18px;
background: #fff;
border: 1px solid var(--rule, rgba(0,0,0,0.10));
border-radius: 6px;
text-decoration: none;
color: inherit;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
align-items: flex-start;
}
.community-card:hover {
border-color: var(--ink-soft, rgba(0,0,0,0.35));
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.community-cover {
flex: 0 0 88px;
width: 88px;
height: 88px;
border-radius: 3px;
overflow: hidden;
background: #f4f3ef;
border: 1px solid rgba(0,0,0,0.06);
display: flex; align-items: center; justify-content: center;
}
.community-cover img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.community-cover-empty {
color: var(--ink-soft, #9a9994);
}
.community-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.community-card-kicker {
font: 500 10.5px/1.35 'Inter', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft, #7a7a75);
margin: 0;
/* Allow up to two lines so longer collection names ('The Buchanan Vinyl
Collection') aren't truncated mid-word. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.community-card-name {
font: 600 20px/1.2 'Cormorant Garamond', 'Georgia', serif;
margin: 2px 0 4px;
color: var(--ink, #1c1c1a);
letter-spacing: -0.005em;
}
.community-card-meta {
font: 400 12.5px/1.4 'Inter', sans-serif;
color: var(--ink-soft, #6e6e69);
margin: 0;
}
.community-card-stat {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin: 10px 0 0;
padding-top: 10px;
border-top: 1px dashed var(--rule, rgba(0,0,0,0.10));
font: 500 13px/1 'Inter', sans-serif;
}
.community-card-count {
color: var(--ink, #1c1c1a);
letter-spacing: 0.01em;
}
.community-card-arrow {
font-size: 16px;
color: var(--accent, #4a7257);
transition: transform 160ms ease;
}
.community-card:hover .community-card-arrow { transform: translateX(3px); }
@media (max-width: 640px) {
.community { padding: 32px 18px 60px; }
.community-title { font-size: 34px; }
.community-grid { grid-template-columns: 1fr; }
}
/* Compact nav for anonymous visitors — keeps the Community link visible. */
.site-nav.nav-public-only a[data-nav].is-hidden { display: none; }