/* Three themes, one per major album:
   universe = Parallel Universe (1994): magenta haze, black void, iridescent speckle, heavy white sans
   pages    = Two Pages (1998): stained-glass panels, amber/rust/teal, dark leading, lowercase serif
   patterns = Creating Patterns (2001): black field, glowing orange rings, white horizon, spaced caps */

:root, [data-theme="patterns"] {
  --bg: #060506; --bg2: #120c0a; --ink: #f3ece4; --muted: #b3a79b;
  --accent: #ff5a1f; --accent2: #ffb23e; --cool: #7cc4ff; --line: #2a1d16;
  --card: #110b09; --chip: #1d1310;
  --f-logo: 'Cormorant Garamond', Georgia, serif; --f-head: 'Jost', system-ui, sans-serif; --f-body: 'Jost', system-ui, sans-serif;
  --head-case: uppercase; --head-track: .32em; --head-weight: 400; --radius: 2px;
}
[data-theme="pages"] {
  --bg: #efe2c6; --bg2: #e5d3ad; --ink: #2a1a10; --muted: #6b513c;
  --accent: #b5621a; --accent2: #8a3b16; --cool: #2f6f74; --line: #3b2414;
  --card: #f7ecd5; --chip: #e2cfa6;
  --f-logo: 'Cormorant Garamond', Georgia, serif; --f-head: 'Cormorant Garamond', Georgia, serif; --f-body: 'Lora', Georgia, serif;
  --head-case: none; --head-track: 0; --head-weight: 600; --radius: 0;
}
[data-theme="universe"] {
  --bg: #0b0410; --bg2: #24071f; --ink: #fbf2fa; --muted: #c9a9c4;
  --accent: #e2349b; --accent2: #5cf2c8; --cool: #7d8bff; --line: #3c1238;
  --card: #150816; --chip: #2a0d28;
  --f-logo: 'Archivo Black', Impact, sans-serif; --f-head: 'Archivo Black', Impact, sans-serif; --f-body: 'Space Grotesk', system-ui, sans-serif;
  --head-case: uppercase; --head-track: .04em; --head-weight: 400; --radius: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 var(--f-body); transition: background .4s, color .4s; overflow-x: hidden; }
a { color: var(--accent2); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--f-head); text-transform: var(--head-case); letter-spacing: var(--head-track); font-weight: var(--head-weight); line-height: 1.15; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }
[data-theme="pages"] h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
[data-theme="patterns"] h1, [data-theme="patterns"] h2 { font-weight: 300; }
p { margin: 0 0 1.1em; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.eyebrow { font-family: var(--f-head); font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: .8em; display: block; }
[data-theme="pages"] .eyebrow { font-family: var(--f-body); letter-spacing: .2em; color: var(--accent2); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { font-family: var(--f-logo); font-size: 1.9rem; color: var(--ink); text-decoration: none; line-height: 1; font-weight: 500; }
[data-theme="universe"] .logo { font-size: 1.5rem; text-transform: uppercase; display: inline-block; transform: rotate(180deg); }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font-family: var(--f-head); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; padding: 6px 0; border-bottom: 2px solid transparent; }
[data-theme="pages"] .nav a { font-size: 1.05rem; letter-spacing: .02em; text-transform: none; font-weight: 600; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line); color: var(--ink); padding: 6px 12px; font: inherit; cursor: pointer; }
@media (max-width: 1180px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Theme switcher ---------- */
.themes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.themes button { cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 8px 12px 8px 8px; display: flex; align-items: center; gap: 10px; font: .8rem var(--f-body); border-radius: var(--radius); }
.themes button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.themes .sw { width: 26px; height: 26px; flex: none; }
.sw.universe { background: radial-gradient(circle at 45% 55%, #000 0 30%, transparent 45%), radial-gradient(circle at 50% 50%, #5cf2c8 0 6%, transparent 12%), linear-gradient(135deg, #e2349b, #6d1a6b); }
.sw.pages { background: linear-gradient(90deg, #3b2414 0 2px, transparent 2px 12px, #3b2414 12px 14px, transparent 14px) , linear-gradient(#3b2414 0 2px, transparent 2px 13px, #3b2414 13px 15px, transparent 15px), conic-gradient(#c8741c 0 25%, #2f6f74 0 50%, #f3e6cc 0 75%, #8a3b16 0); }
.sw.patterns { background: radial-gradient(circle at 50% 75%, #ffb23e 0 10%, #ff5a1f 11% 30%, #8a1f05 31% 45%, #000 46%); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero .wrap { position: relative; z-index: 2; padding: clamp(64px, 12vw, 140px) 0 clamp(56px, 9vw, 110px); }
.hero h1 { max-width: 13ch; }
.hero .lede { font-size: 1.2rem; max-width: 52ch; color: var(--muted); }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.page-hero .wrap { padding: clamp(48px, 8vw, 96px) 0 clamp(36px, 6vw, 64px); }
.page-hero h1 { max-width: 20ch; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; text-decoration: none; font-family: var(--f-head); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--accent); color: var(--ink); background: transparent; border-radius: var(--radius); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--bg); }
.btn:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 25%, transparent); }
.btn.primary:hover { background: var(--accent2); color: var(--bg); border-color: var(--accent2); }
[data-theme="pages"] .btn { font-family: var(--f-body); letter-spacing: .08em; }

/* Decorative art layer: one look per theme */
.art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
[data-theme="patterns"] .art {
  background:
    radial-gradient(ellipse 140% 60% at 78% 118%, transparent 59.4%, rgba(255,255,255,.95) 60%, rgba(124,196,255,.5) 61%, transparent 64%),
    radial-gradient(circle at 80% 62%, #ffd27a 0 3%, transparent 3.5%),
    repeating-conic-gradient(from 8deg at 80% 62%, rgba(0,0,0,.55) 0 4deg, transparent 4deg 26deg),
    repeating-radial-gradient(circle at 80% 62%, #ff7a2a 0 22px, #d6400f 22px 26px, #ff9a3c 26px 46px, #7a1c04 46px 50px),
    #000;
  -webkit-mask: radial-gradient(circle at 80% 62%, #000 0 260px, transparent 420px);
          mask: radial-gradient(circle at 80% 62%, #000 0 260px, transparent 420px);
}
[data-theme="patterns"] .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 100% 70% at 80% 62%, rgba(255,90,31,.28), transparent 60%); }
[data-theme="universe"] .art {
  background:
    radial-gradient(ellipse 34% 42% at 66% 52%, #000 0 55%, transparent 72%),
    radial-gradient(circle at 63% 58%, rgba(92,242,200,.9) 0 1.2%, transparent 2.5%),
    radial-gradient(circle at 68% 47%, rgba(125,139,255,.9) 0 1%, transparent 2%),
    radial-gradient(circle at 61% 50%, rgba(92,242,200,.7) 0 .8%, transparent 1.8%),
    radial-gradient(ellipse 70% 80% at 60% 50%, #e2349b, #8c1d78 50%, #2a0628 85%);
  filter: contrast(1.05) saturate(1.1);
}
[data-theme="universe"] .art::after { content: ''; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="universe"] .hero .lede { color: #f1d6ec; }
[data-theme="pages"] .art {
  left: auto; width: min(46%, 520px); opacity: .95;
  background:
    linear-gradient(90deg, transparent 0 18%, var(--line) 18% 19.2%, transparent 19.2% 52%, var(--line) 52% 53.2%, transparent 53.2% 78%, var(--line) 78% 79.2%, transparent 79.2%),
    linear-gradient(transparent 0 22%, var(--line) 22% 23.4%, transparent 23.4% 48%, var(--line) 48% 49.4%, transparent 49.4% 74%, var(--line) 74% 75.4%, transparent 75.4%),
    linear-gradient(90deg, #c8741c 0 18%, #f6ecd2 18% 52%, #2f6f74 52% 78%, #8a3b16 78%) top / 100% 22% no-repeat,
    linear-gradient(90deg, #6b4a24 0 18%, #d9a441 18% 52%, #f6ecd2 52% 78%, #b5621a 78%) 0 33% / 100% 26% no-repeat,
    linear-gradient(90deg, #2f6f74 0 18%, #8a3b16 18% 52%, #c8741c 52% 78%, #f6ecd2 78%) 0 66% / 100% 26% no-repeat,
    linear-gradient(90deg, #f6ecd2 0 18%, #6b4a24 18% 52%, #8a3b16 52% 78%, #2f6f74 78%) bottom / 100% 25% no-repeat;
  border-left: 10px solid var(--line);
}
[data-theme="pages"] .art::after { content: ''; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1.15; transform: translate(-50%, -50%); background: var(--line); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
[data-theme="pages"] .art::before { content: ''; position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1.15; transform: translate(-50%, -44%); background: linear-gradient(#d9a441, #8a3b16); clip-path: polygon(50% 0, 100% 100%, 0 100%); z-index: 1; }
@media (max-width: 760px) { [data-theme="pages"] .art { width: 100%; opacity: .18; } }
@media (max-width: 1000px) { [data-theme="patterns"] .art { opacity: .4; } }
.page-hero .art { opacity: .5; }
[data-theme="pages"] .page-hero .art { opacity: .9; width: min(30%, 320px); }
@media (max-width: 760px) { [data-theme="pages"] .page-hero .art { opacity: .15; width: 100%; } }

/* ---------- Sections ---------- */
section { padding: clamp(48px, 7vw, 88px) 0; }
section + section { border-top: 1px solid var(--line); }
.grid { display: grid; gap: 24px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); padding: 24px; border-radius: var(--radius); }
[data-theme="pages"] .card { border-width: 3px; }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.6em; }
.pull { font-family: var(--f-logo); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3; border-left: 4px solid var(--accent); padding-left: 20px; margin: 1.6em 0; }
[data-theme="universe"] .pull { font-family: var(--f-body); font-weight: 700; }

/* Album showcase: the three majors */
.majors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.major { text-decoration: none; color: var(--ink); display: block; }
.major .cover { margin-bottom: 14px; transition: transform .3s; }
.major:hover .cover { transform: translateY(-4px); }
.major h3 { margin: 0; }
.major .meta { color: var(--muted); font-size: .9rem; }

/* Generated covers (no copyrighted artwork is used) */
.cover { aspect-ratio: 1; position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--chip); display: flex; flex-direction: column; justify-content: space-between; padding: 8%; color: #fff; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover .c-artist { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .9; position: relative; }
.cover .c-title { font-family: var(--f-logo); font-size: 1.25rem; line-height: 1.1; position: relative; }
.cover.universe { background: radial-gradient(ellipse 45% 50% at 50% 55%, #000 0 55%, transparent 75%), radial-gradient(circle at 46% 62%, #5cf2c8 0 3%, transparent 6%), radial-gradient(circle at 54% 50%, #7d8bff 0 2%, transparent 4%), linear-gradient(160deg, #e9449f, #8c1d78 60%, #3a0a3a); }
.cover.universe .c-artist { font-family: 'Archivo Black', sans-serif; font-size: 1.5rem; letter-spacing: .02em; transform: rotate(180deg); align-self: center; margin-top: 30%; }
.cover.universe .c-title { font-family: 'Space Grotesk', sans-serif; letter-spacing: .25em; text-transform: lowercase; font-size: .95rem; transform: rotate(180deg); align-self: center; order: -1; margin-top: 50%; }
.cover.pages { background:
  linear-gradient(90deg, transparent 0 30%, #2b170c 30% 33%, transparent 33% 66%, #2b170c 66% 69%, transparent 69%),
  linear-gradient(transparent 0 30%, #2b170c 30% 33%, transparent 33% 66%, #2b170c 66% 69%, transparent 69%),
  conic-gradient(from 90deg at 33% 33%, #c8741c 0 25%, #2f6f74 0 50%, #e9d8b0 0 75%, #8a3b16 0), #6b4a24; color: #f3e6cc; }
.cover.pages::after { content: ''; position: absolute; left: 50%; top: 52%; width: 38%; aspect-ratio: 1.15; transform: translate(-50%, -50%); background: linear-gradient(#d9a441, #6b2b0e); clip-path: polygon(50% 0, 100% 100%, 0 100%); outline: 4px solid #2b170c; }
.cover.pages .c-artist { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; text-transform: none; letter-spacing: 0; background: #e9d8b0; color: #2b170c; padding: 0 8px; align-self: flex-start; z-index: 1; }
.cover.pages .c-title { font-family: 'Cormorant Garamond', serif; align-self: flex-end; background: #8a3b16; padding: 2px 8px; z-index: 1; }
.cover.patterns { background: radial-gradient(ellipse 120% 40% at 50% 8%, transparent 48%, #fff 49%, #7cc4ff 50.5%, transparent 54%), radial-gradient(circle at 50% 66%, #ffd27a 0 4%, #ff7a2a 4.5% 14%, #c43a0b 14.5% 15.5%, #ff8a34 16% 26%, #7a1c04 26.5% 28%, #e85a1a 28.5% 40%, transparent 46%), #000; text-align: center; }
.cover.patterns .c-artist { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; text-transform: none; letter-spacing: 0; margin-top: -4%; }
.cover.patterns .c-title { font-family: 'Jost', sans-serif; font-size: .62rem; letter-spacing: .4em; text-transform: uppercase; order: -1; display: none; }
.cover.patterns .c-artist::after { content: attr(data-title); display: block; font: .55rem 'Jost', sans-serif; letter-spacing: .38em; text-transform: uppercase; margin-top: 4px; }
.cover.plain .c-title { font-size: 1.05rem; }

/* ---------- Discography ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 28px; }
.toolbar input { flex: 1 1 220px; padding: 11px 14px; background: var(--card); color: var(--ink); border: 1px solid var(--line); font: inherit; border-radius: var(--radius); }
.chip { cursor: pointer; padding: 8px 14px; border: 1px solid var(--line); background: var(--chip); color: var(--ink); font: .82rem var(--f-body); border-radius: 999px; }
[data-theme="pages"] .chip, [data-theme="universe"] .chip { border-radius: 0; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.disc-group { margin-bottom: 48px; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 24px; }
.rel { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 90px; }
.rel:target .cover { outline: 3px solid var(--accent); outline-offset: 3px; }
.rel h3 { font-size: 1.02rem; margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-weight: 600; }
.rel .meta { font-size: .85rem; color: var(--muted); }
.rel .note { font-size: .88rem; color: var(--muted); margin: 0; }
.rel details { font-size: .88rem; }
.rel summary { cursor: pointer; color: var(--accent2); }
.rel ol { padding-left: 1.3em; margin: 8px 0 0; color: var(--muted); }
.rel ol li.disc { list-style: none; margin-left: -1.3em; color: var(--ink); font-weight: 600; margin-top: 6px; }
.list { border-top: 1px solid var(--line); }
.list-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.list-row .yr { font-family: var(--f-head); color: var(--accent); font-size: .9rem; letter-spacing: .1em; }
.list-row .t { font-weight: 600; }
.list-row .meta { color: var(--muted); font-size: .88rem; }
@media (max-width: 560px) { .list-row { grid-template-columns: 48px 1fr; } .list-row .act { grid-column: 2; } }

/* Buy menu */
.buy { position: relative; }
.buy > summary { list-style: none; display: inline-flex; padding: 7px 14px; border: 1px solid var(--accent); font: .78rem var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-radius: var(--radius); cursor: pointer; }
.buy > summary::-webkit-details-marker { display: none; }
.buy[open] > summary { background: var(--accent); color: var(--bg); }
.buy .stores { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 290px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.35); padding: 6px; }
.list-row .buy .stores { left: auto; right: 0; }
.stores a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; text-decoration: none; color: var(--ink); font-size: .9rem; }
.stores a { align-items: baseline; } .stores a small { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.stores a:hover { background: var(--chip); }

/* Shop */
.shop-row { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.shop-row:target { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.shop-row .cover { padding: 10%; }
.shop-row .cover .c-title { font-size: .85rem; }
.shop-row .cover .c-artist { font-size: .6rem; }
.shop-row .cover.universe .c-artist, .shop-row .cover.pages .c-artist, .shop-row .cover.patterns .c-artist { font-size: .9rem; }
.store-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.store-btns a { padding: 8px 12px; border: 1px solid var(--line); background: var(--chip); color: var(--ink); text-decoration: none; font-size: .85rem; border-radius: var(--radius); }
.store-btns a:hover { border-color: var(--accent); }
.store-btns a.direct { border-color: var(--accent); }
@media (max-width: 560px) { .shop-row { grid-template-columns: 84px 1fr; gap: 16px; } }
.disclosure { font-size: .82rem; color: var(--muted); border: 1px dashed var(--line); padding: 14px 16px; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 26px 28px; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; }
[data-theme="pages"] .timeline li::before { border-radius: 0; transform: rotate(45deg); }
.timeline .yr { font-family: var(--f-head); color: var(--accent); letter-spacing: .12em; font-size: .9rem; display: block; }

/* Members */
.member-card { text-decoration: none; color: var(--ink); display: block; }
.member-card .mono { font-family: var(--f-logo); font-size: 4rem; line-height: 1; color: var(--accent); }
.alias-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 64px; margin-top: 40px; font-size: .9rem; color: var(--muted); }
.site-footer .wrap { display: grid; gap: 28px; }
.site-footer .row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.site-footer a { color: var(--muted); }
[data-theme="patterns"] h1 { letter-spacing: .14em; }
.hero h1, .hero .lede { text-shadow: 0 2px 24px var(--bg); }
[data-theme="pages"] .hero h1, [data-theme="pages"] .hero .lede { text-shadow: none; }
@media (min-width: 761px) { [data-theme="pages"] .hero .wrap > * { max-width: min(52ch, calc(100% - min(46vw, 540px))); } }
.shop-row > div { min-width: 0; }
.shop-row h3 { font-size: 1.1rem; letter-spacing: .04em; overflow-wrap: anywhere; }
@media (max-width: 760px) { [data-theme="patterns"] .art { opacity: .28; } }

/* Photos */
.photo { margin: 0 0 1.6em; }
.photo img, .hero-portrait img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
[data-theme="pages"] .photo img, [data-theme="pages"] .hero-portrait img { border: 6px solid var(--line); }
figcaption { font-size: .78rem; color: var(--muted); margin-top: 8px; }
figcaption a { color: inherit; }
.hero-portrait { margin: 32px 0 0; max-width: 260px; }
@media (min-width: 900px) {
  .page-hero .wrap:has(.hero-portrait) { padding-right: 320px; }
  .hero-portrait { position: absolute; right: 0; bottom: clamp(36px, 6vw, 64px); width: 270px; margin: 0; }
}
[data-theme="pages"] .page-hero:has(.hero-portrait) .art { display: none; }
.member-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; display: block; margin-bottom: 12px; border: 2px solid var(--accent); }
[data-theme="pages"] .member-photo { border-radius: 0; }

/* ---------- Fan Favourites ---------- */
.rate-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .rate-layout { grid-template-columns: 1fr; } .rate-layout .chart { order: -1; } }
.toolbar select { padding: 11px 14px; background: var(--card); color: var(--ink); border: 1px solid var(--line); font: inherit; border-radius: var(--radius); max-width: 100%; }
.rate-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.rate-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rate-list .t, .top .t { font-weight: 600; }
.rate-list .meta, .top .meta { font-size: .82rem; color: var(--muted); }
.stars { display: inline-flex; flex: none; }
.stars button { background: none; border: 0; padding: 4px 3px; font-size: 1.35rem; line-height: 1; cursor: pointer; color: var(--line); transition: color .15s, transform .15s; }
[data-theme="pages"] .stars button { color: #c9b48b; }
.stars button.on { color: var(--accent2); }
[data-theme="patterns"] .stars button.on { color: var(--accent); }
.stars button:hover, .stars button:focus-visible { transform: scale(1.25); }
.stars:hover button { color: var(--accent2); }
.stars button:hover ~ button { color: var(--line); }
.chart { position: sticky; top: 88px; }
.chart .small { font-size: .82rem; }
.top { list-style: none; padding: 0; margin: 16px 0 0; }
.top li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.top .rank { font-family: var(--f-head); font-size: 1.3rem; color: var(--accent); line-height: 1.2; }
.bar { height: 6px; background: var(--chip); margin: 6px 0 4px; overflow: hidden; }
.bar span { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--accent), var(--accent2)); }

/* ---------- Motion ---------- */
@property --rot { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --bx { syntax: '<percentage>'; inherits: true; initial-value: 66%; }
@property --by { syntax: '<percentage>'; inherits: true; initial-value: 52%; }

@media (prefers-reduced-motion: no-preference) {
  /* scroll reveal */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
  .reveal.in { opacity: 1; transform: none; }
  [data-theme="universe"] .reveal { transform: translateY(22px) skewY(1.5deg); filter: blur(4px); transition-property: opacity, transform, filter; }
  [data-theme="universe"] .reveal.in { filter: none; transform: none; }
  [data-theme="pages"] .reveal { transform: translateY(14px) scale(.98); }
  [data-theme="pages"] .reveal.in { transform: none; }

  /* hero entrance */
  .hero .wrap > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero .wrap > :nth-child(2) { animation-delay: .1s; }
  .hero .wrap > :nth-child(3) { animation-delay: .22s; }
  .hero .wrap > :nth-child(4) { animation-delay: .34s; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } }

  /* Creating Patterns: rings turn, glow breathes, horizon shimmers */
  [data-theme="patterns"] .art {
    background:
      radial-gradient(ellipse 140% 60% at 78% 118%, transparent 59.4%, rgba(255,255,255,.95) 60%, rgba(124,196,255,.5) 61%, transparent 64%),
      radial-gradient(circle at 80% 62%, #ffd27a 0 3%, transparent 3.5%),
      repeating-conic-gradient(from calc(8deg + var(--rot)) at 80% 62%, rgba(0,0,0,.55) 0 4deg, transparent 4deg 26deg),
      repeating-conic-gradient(from calc(-1 * var(--rot) * 1.6) at 80% 62%, rgba(255,210,122,.16) 0 2deg, transparent 2deg 45deg),
      repeating-radial-gradient(circle at 80% 62%, #ff7a2a 0 22px, #d6400f 22px 26px, #ff9a3c 26px 46px, #7a1c04 46px 50px),
      #000;
    animation: spin 60s linear infinite;
  }
  [data-theme="patterns"] .hero::before { animation: breathe 6s ease-in-out infinite; }
  @keyframes spin { to { --rot: 360deg; } }
  @keyframes breathe { 50% { opacity: .45; } }

  /* Parallel Universe: the void drifts, colours shift, grain flickers */
  [data-theme="universe"] .art {
    background:
      radial-gradient(ellipse 34% 42% at var(--bx) var(--by), #000 0 55%, transparent 72%),
      radial-gradient(circle at calc(var(--bx) - 3%) calc(var(--by) + 6%), rgba(92,242,200,.9) 0 1.2%, transparent 2.5%),
      radial-gradient(circle at calc(var(--bx) + 2%) calc(var(--by) - 5%), rgba(125,139,255,.9) 0 1%, transparent 2%),
      radial-gradient(circle at calc(var(--bx) - 5%) calc(var(--by) - 2%), rgba(92,242,200,.7) 0 .8%, transparent 1.8%),
      radial-gradient(ellipse 70% 80% at 60% 50%, #e2349b, #8c1d78 50%, #2a0628 85%);
    animation: drift 18s ease-in-out infinite alternate, hue 12s ease-in-out infinite alternate;
  }
  [data-theme="universe"] .art::after { animation: grain .5s steps(3) infinite; }
  @keyframes drift { 0% { --bx: 62%; --by: 48%; } 50% { --bx: 70%; --by: 58%; } 100% { --bx: 66%; --by: 44%; } }
  @keyframes hue { to { filter: contrast(1.05) saturate(1.2) hue-rotate(-22deg); } }
  @keyframes grain { 0% { transform: translate(0,0); } 33% { transform: translate(-6px,4px); } 66% { transform: translate(5px,-3px); } }
  [data-theme="universe"] .logo:hover { animation: glitch .4s steps(2) 2; }
  @keyframes glitch { 0% { text-shadow: 2px 0 #5cf2c8, -2px 0 #e2349b; } 50% { text-shadow: -3px 0 #5cf2c8, 3px 0 #e2349b; transform: rotate(180deg) translateX(2px); } 100% { text-shadow: none; } }

  /* Two Pages: light passes through the stained glass */
  [data-theme="pages"] .hero::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: min(46%, 520px); z-index: 2; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255,240,200,.55) 45%, rgba(255,255,255,.15) 50%, transparent 62%) -200% 0 / 200% 100% no-repeat;
    mix-blend-mode: soft-light; animation: sweep 7s ease-in-out infinite; }
  [data-theme="pages"] .page-hero::before { width: min(30%, 320px); }
  [data-theme="pages"] .page-hero:has(.hero-portrait)::before { display: none; }
  @media (max-width: 760px) { [data-theme="pages"] .hero::before { display: none; } }
  @keyframes sweep { 0%, 15% { background-position: -200% 0; } 70%, 100% { background-position: 300% 0; } }
  [data-theme="pages"] .art::before { animation: glow 5s ease-in-out infinite; }
  @keyframes glow { 50% { filter: brightness(1.25) saturate(1.2); } }

  /* covers: tilt with a moving glare */
  .cover { transition: transform .35s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; will-change: transform; }
  .cover.tilt { transition: transform .08s linear; }
  .cover::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.35), transparent 55%); }
  .cover.tilt::before { opacity: 1; }
  .major:hover .cover { transform: none; }

  /* buttons & links */
  .btn { transition: background .25s, color .25s, transform .2s; }
  .btn:hover { transform: translateY(-2px); }
  .nav a { transition: color .2s, border-color .2s; }
  .member-card .member-photo, .member-card .mono { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
  .member-card:hover .member-photo, .member-card:hover .mono { transform: scale(1.08) rotate(-3deg); }

  /* ratings */
  .stars.pop { animation: pop .35s ease; }
  @keyframes pop { 40% { transform: scale(1.18); } }
  .top li { animation: rise .5s ease both; animation-delay: calc(var(--i) * 50ms); }
  .bar span { animation: fill 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 50ms + .2s); }
  @keyframes fill { from { width: 0; } }

  /* view transition when the theme changes */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; }
  ::view-transition-new(root) { animation-name: wipe; }
  @keyframes wipe { from { clip-path: circle(0 at 50% 0); } to { clip-path: circle(150% at 50% 0); } }
}

/* ticker on the home page */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding: 14px 0; white-space: nowrap; font-family: var(--f-head); text-transform: uppercase; letter-spacing: .25em; font-size: .85rem; color: var(--muted); }
.ticker div { display: inline-block; padding-left: 100%; }
@media (prefers-reduced-motion: no-preference) { .ticker div { padding-left: 0; animation: tick 50s linear infinite; } }
@media (prefers-reduced-motion: reduce) { .ticker div { padding-left: 0; } }
.ticker span { margin-right: 2.5em; }
.ticker span::after { content: '✦'; margin-left: 2.5em; color: var(--accent); }
@keyframes tick { to { transform: translateX(-50%); } }

/* Press */
.press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 32px; }
.press-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.press-item h3 { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 1.05rem; margin: 6px 0; }
.press-item h3 a { color: var(--ink); text-decoration: none; }
.press-item h3 a:hover { color: var(--accent); }
.press-item p { margin: 0; font-size: .9rem; }
.press-item .meta, .review-head .meta { font-size: .8rem; color: var(--muted); }
.tag { display: inline-block; padding: 1px 8px; background: var(--chip); color: var(--accent); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; }
.review-group { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .review-group { grid-template-columns: 1fr; gap: 12px; } }
.review-head { display: flex; flex-direction: column; gap: 10px; }
.review-head .cover { width: 140px; padding: 8%; }
.review-head .cover .c-title { font-size: .8rem; } .review-head .cover .c-artist { font-size: .6rem; }
.review-head h3 { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-weight: 600; margin: 0; }
.reviews { list-style: none; margin: 0; padding: 0; }
.reviews li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.reviews li:last-child { border-bottom: 0; }
.score { flex: none; font-family: var(--f-head); color: var(--accent); font-size: 1.05rem; }
.mini-reviews { padding-left: 1.2em; margin: 6px 0 0; color: var(--muted); }

/* ---------- Play with the Changes (2007): black ink on white, serif, splattered meadow ---------- */
[data-theme="changes"] {
  --bg: #fbfaf7; --bg2: #f0eee8; --ink: #111; --muted: #5c5a55;
  --accent: #111; --accent2: #3d3d3d; --cool: #777; --line: #d9d6cf;
  --card: #fff; --chip: #efede7;
  --f-logo: 'Cormorant Garamond', Georgia, serif; --f-head: 'Cormorant Garamond', Georgia, serif; --f-body: 'Lora', Georgia, serif;
  --head-case: none; --head-track: 0; --head-weight: 500; --radius: 0;
}
[data-theme="changes"] h1 { font-size: clamp(2.6rem, 6.5vw, 4.8rem); letter-spacing: -.01em; }
[data-theme="changes"] .eyebrow { font-family: var(--f-body); letter-spacing: .18em; color: var(--muted); }
[data-theme="changes"] .nav a { font-size: 1.02rem; letter-spacing: .02em; text-transform: none; }
[data-theme="changes"] .btn { font-family: var(--f-body); letter-spacing: .08em; }
[data-theme="changes"] .btn.primary { color: #fff; }
[data-theme="changes"] .chip[aria-pressed="true"] { color: #fff; }
[data-theme="changes"] .art { top: auto; height: 62%; background: var(--meadow) bottom / 100% 100% no-repeat; transform-origin: 50% 100%; }
[data-theme="changes"] .hero { padding-bottom: 7vw; }
[data-theme="changes"] .hero h1, [data-theme="changes"] .hero .lede { text-shadow: 0 0 18px var(--bg), 0 0 6px var(--bg); }
[data-theme="changes"] .page-hero .art { opacity: .9; height: 48%; }
[data-theme="changes"] .stars button { color: #cfccc4; }
[data-theme="changes"] .stars button.on { color: #111; }
.sw.changes { background: linear-gradient(transparent 55%, #000 55%), repeating-linear-gradient(90deg, transparent 0 3px, #000 3px 4px, transparent 4px 7px) bottom / 100% 70% no-repeat, #fff; outline: 1px solid #ccc; }
.cover.changes { background: var(--meadow) bottom / 100% 60% no-repeat, #fff; color: #111; text-align: center; justify-content: flex-start; }
.cover.changes .c-artist { font-family: 'Cormorant Garamond', serif; font-size: 2rem; text-transform: none; letter-spacing: 0; order: -1; }
.cover.changes .c-title { font-family: 'Cormorant Garamond', serif; font-size: .95rem; }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="changes"] .art { animation: sway 7s ease-in-out infinite alternate; }
  @keyframes sway { from { transform: skewX(-2.5deg); } to { transform: skewX(2.5deg) scaleY(1.02); } }
  [data-theme="changes"] .reveal { transform: translateY(18px); filter: blur(2px); transition-property: opacity, transform, filter; }
  [data-theme="changes"] .reveal.in { transform: none; filter: none; }
}
[data-theme="changes"] .hero .art { height: clamp(150px, 22vw, 260px); }
[data-theme="changes"] .hero .wrap { padding-bottom: clamp(170px, 25vw, 290px); }
[data-theme="changes"] .page-hero .art { height: clamp(100px, 13vw, 160px); }
[data-theme="changes"] .page-hero .wrap { padding-bottom: clamp(120px, 15vw, 180px); }
[data-theme="changes"] .hero { padding-bottom: 0; }
@media (min-width: 900px) { [data-theme="changes"] .page-hero .wrap:has(.hero-portrait) { padding-bottom: clamp(120px, 15vw, 180px); } [data-theme="changes"] .hero-portrait { bottom: clamp(120px, 15vw, 180px); } }
/* cover thumbnails on Fan Favourites */
.thumb { flex: none; width: 52px; }
.thumb .cover { padding: 0; border-width: 1px; }
.thumb .cover span { display: none; }
.thumb .cover::before { display: none; }
.rate-list li { justify-content: flex-start; }
.rate-list li .info { flex: 1; min-width: 0; }
.top li { grid-template-columns: 30px 44px 1fr; align-items: start; }
.top .thumb { width: 44px; }
@media (max-width: 480px) { .rate-list li { flex-wrap: wrap; } .rate-list .stars { margin-left: 68px; } }