/* DJs ON GOLD — article template v2 (Round 71, 2026-09-03).
   Articles live in the homepage's world: near-black night with a fixed photographic backdrop, drifting aurora, spores,
   grain; per-artist ZONE colour for accents (RECHARGE = jade, as on the homepage); gold reserved for accents and one
   big line; Suez One + Frank Ruhl Libre; phone-first. Content markup is the S212 editorial build, untouched. */
:root {
  --ink: #08060B; --ink2: #0F0B18; --cream: #F4E9D2; --cream-2: rgba(244,233,210,.84); --cream-3: rgba(244,233,210,.6);
  --gold: #E8B84B; --gold-2: #F6D98A; --gold-rgb: 232,184,75;
  --jade: #4ED0B2; --jade-rgb: 78,208,178; --violet: #9B80E5; --violet-rgb: 155,128,229; --coral: #E58461; --coral-rgb: 229,132,97; --moon: #A9B1DA; --moon-rgb: 169,177,218;
  --zone: var(--gold); --zone-rgb: var(--gold-rgb);
  --serif: 'Suez One', Georgia, serif; --text: 'Frank Ruhl Libre', Georgia, serif;
  --measure: 700px;
}
body[data-zone="jade"] { --zone: var(--jade); --zone-rgb: var(--jade-rgb); }
body[data-zone="violet"] { --zone: var(--violet); --zone-rgb: var(--violet-rgb); }
body[data-zone="coral"] { --zone: var(--coral); --zone-rgb: var(--coral-rgb); }
body[data-zone="moon"] { --zone: var(--moon); --zone-rgb: var(--moon-rgb); }

html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--cream); font: 300 18px/1.75 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-2); }
.serif { font-family: var(--serif); font-weight: 400; }
::selection { background: rgba(var(--gold-rgb),.3); color: var(--cream); }

@keyframes aurora { 0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); } 100% { transform: translate3d(-60px,40px,0) rotate(14deg) scale(1.14); } }
@keyframes emberPulse { 0%, 100% { opacity: .32; } 50% { opacity: .72; } }
@keyframes driftUp { 0% { transform: translate3d(0,0,0) scale(.7); opacity: 0; } 16% { opacity: .5; } 100% { transform: translate3d(26px,-640px,0) scale(1.1); opacity: 0; } }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-1%,-2%)} 100%{transform:translate(3%,1%)} }

/* ---------- reveal (page script adds .is-in) ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease var(--d, 0ms), transform .8s ease var(--d, 0ms); }
.reveal.is-in, .no-js .reveal { opacity: 1; transform: none; }

/* ---------- world layers (markup: .art-world inside .article) ---------- */
.art-world { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background: linear-gradient(180deg, #0A0712 0%, #120B1F 45%, #0D0A16 100%); } /* viewport-sized: a 15,000px fixed-attachment layer was too expensive to paint */
.art-fixedbg { position: absolute; inset: 0; background: url('img/spotlights-bg.jpg?v=r34') 50% 40% / cover no-repeat; opacity: .22; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%); }
.art-aurora { position: absolute; width: 900px; height: 720px; filter: blur(96px); opacity: .42; will-change: transform; animation: aurora 24s ease-in-out infinite alternate; }
.art-aurora.a { top: 6%; left: -14%; background: conic-gradient(from 140deg at 50% 50%, rgba(var(--zone-rgb),.45), rgba(201,58,150,.28), rgba(120,50,200,.35), rgba(var(--zone-rgb),.45)); }
.art-aurora.b { top: 48%; right: -18%; background: conic-gradient(from 300deg at 50% 50%, rgba(232,184,75,.35), rgba(var(--zone-rgb),.3), rgba(120,50,200,.3), rgba(232,184,75,.35)); animation-duration: 31s; animation-direction: alternate-reverse; }
.art-spores i { position: absolute; bottom: -4%; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, rgba(255,242,255,.9) 0%, rgba(var(--zone-rgb),.7) 36%, rgba(var(--zone-rgb),0) 74%); box-shadow: 0 0 16px rgba(var(--zone-rgb),.6); animation: driftUp 14s linear infinite; }
.art-spores i:nth-child(1) { left: 8%; animation-delay: 0s; } .art-spores i:nth-child(2) { left: 26%; width: 6px; height: 6px; animation-delay: 3s; animation-duration: 17s; } .art-spores i:nth-child(3) { left: 52%; animation-delay: 6s; } .art-spores i:nth-child(4) { left: 71%; width: 12px; height: 12px; animation-delay: 1.5s; animation-duration: 19s; } .art-spores i:nth-child(5) { left: 90%; width: 7px; height: 7px; animation-delay: 8s; }
@media (prefers-reduced-motion: reduce) { .art-aurora, .art-spores i, .brandline::before { animation: none; } }

/* ---------- topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 44px; background: linear-gradient(180deg, rgba(8,6,11,.94), rgba(8,6,11,.72)); border-bottom: 1px solid rgba(var(--gold-rgb),.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar a { font: 400 12px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-3); white-space: nowrap; }
.topbar a:hover { color: var(--cream); }
.topbar-end { display: flex; align-items: center; gap: 18px; }
.topbar .home { display: inline-flex; align-items: center; gap: 10px; font: 400 15px/1 var(--serif); letter-spacing: .14em; text-transform: none; color: var(--cream); }
.topbar .home img { width: 28px; height: 28px; }
.topbar .goldie { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid rgba(var(--gold-rgb),.6); border-radius: 999px; background: rgba(var(--gold-rgb),.08); font-size: 11px; letter-spacing: .2em; color: var(--gold-2); }
.topbar .goldie i { width: 6px; height: 6px; border-radius: 50%; background: #7BE0A0; box-shadow: 0 0 10px rgba(123,224,160,.9); }

/* ---------- cover ---------- */
.cover { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.cover .hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,11,.15) 0%, rgba(8,6,11,.3) 45%, rgba(8,6,11,.94) 100%), linear-gradient(90deg, rgba(8,6,11,.6) 0%, rgba(8,6,11,0) 60%); }
.cover .deco-plate { display: block; position: absolute; left: 50%; bottom: -12%; width: 1200px; height: 600px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(var(--zone-rgb),.22), rgba(var(--zone-rgb),0) 60%); pointer-events: none; }
.cover .inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; min-height: 84vh; padding: 24vh 44px 72px; display: flex; flex-direction: column; }
.cover .grow { flex: 1 1 auto; }
.brandline { display: flex; align-items: center; gap: 12px; font: 400 11px/1 var(--text); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.brandline::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb),.8); animation: emberPulse 2.6s ease-in-out infinite; }
.covermark-rules { margin: 24px 0 0; display: flex; align-items: center; }
.covermark-rules::before, .covermark-rules::after { display: none !important; content: none !important; }
.covermark { width: 230px; height: auto; filter: drop-shadow(0 8px 28px rgba(0,0,0,.6)); }
.eyebrow-he, .eyebrow { margin-top: 36px; font: 400 12px/1 var(--text); letter-spacing: .3em; text-transform: uppercase; color: var(--zone); }
.cover h1 { margin: 14px 0 0; font: 400 clamp(52px, 7.2vw, 108px)/.96 var(--serif); letter-spacing: -.01em; color: var(--cream); text-shadow: 0 10px 44px rgba(8,6,11,.75); max-width: 14ch; text-wrap: balance; }
.cover .dek { margin: 26px 0 0; max-width: 58ch; font: 300 clamp(17px, 1.4vw, 21px)/1.6 var(--text); color: var(--cream-2); text-wrap: pretty; }

/* ---------- article body ---------- */
.article { position: relative; overflow-x: clip; padding: 70px 0 0; background: transparent; }
.article > * { position: relative; z-index: 1; }
.article > .art-world { position: fixed; z-index: 0; }
.cover, .more-stories, .colophon, .backrow { position: relative; z-index: 1; }
.sec, .measure { max-width: var(--measure); margin: 0 auto; padding: 0 22px; }
.sec { padding-bottom: 52px; }
.kicker { display: flex; align-items: center; gap: 12px; font: 400 11px/1 var(--text); letter-spacing: .34em; text-transform: uppercase; color: var(--zone); }
.kicker::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: var(--zone); }
.article h2 { margin: 12px 0 22px; font: 400 clamp(30px, 3.1vw, 40px)/1.1 var(--serif); color: var(--cream); text-wrap: balance; }
.article p { margin: 0 0 20px; color: var(--cream-2); text-wrap: pretty; }
.article p.lead { font-size: 20px; line-height: 1.7; color: var(--cream); }
.article p.lead.drop::first-letter { float: left; margin: 8px 12px 0 0; font: 400 68px/.85 var(--serif); color: var(--gold); text-shadow: 0 0 24px rgba(var(--gold-rgb),.35); }
.article blockquote { position: relative; margin: 28px 0 30px; padding: 20px 24px 20px 28px; border-left: 2px solid var(--zone); background: linear-gradient(90deg, rgba(var(--zone-rgb),.09), rgba(var(--zone-rgb),0) 85%); border-radius: 0 2px 2px 0; }
.article blockquote::before { content: "\201C"; position: absolute; left: 12px; top: -18px; font: 400 64px/1 var(--serif); color: rgba(var(--zone-rgb),.55); }
.article blockquote p, .article blockquote { font: 400 20px/1.5 var(--serif); color: var(--cream); }
.article blockquote p { margin: 0; }
.article blockquote p + p { margin-top: 12px; }
.article blockquote .who, .cap .who, .who { margin-top: 12px; font: 400 10px/1.4 var(--text); letter-spacing: .28em; text-transform: uppercase; color: var(--cream-3); }
.pull { position: relative; max-width: 1180px; margin: 40px auto 70px; padding: 74px 44px; text-align: center; overflow: hidden; border-top: 1px solid rgba(var(--gold-rgb),.25); border-bottom: 1px solid rgba(var(--gold-rgb),.25); background: radial-gradient(ellipse at 50% 50%, rgba(var(--zone-rgb),.14), rgba(var(--zone-rgb),0) 60%); }
.pull::before, .pull::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; transform: translateY(-50%) rotate(45deg); background: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb),.7); } .pull::before { left: 44px; } .pull::after { right: 44px; }
.pull p { margin: 0 auto; max-width: 22ch; font: 400 clamp(28px, 3.2vw, 44px)/1.22 var(--serif); color: var(--gold); text-wrap: balance; text-shadow: 0 0 40px rgba(var(--gold-rgb),.25); }
.plate { position: relative; max-width: 820px; margin: 30px auto 70px; padding: 0 22px; }
.plate .sunground { position: absolute; inset: -14% 0; background: radial-gradient(ellipse at 50% 50%, rgba(var(--zone-rgb),.22), rgba(var(--zone-rgb),0) 62%); pointer-events: none; }
.plate img { position: relative; width: 100%; height: auto; border: 1px solid rgba(var(--gold-rgb),.35); border-radius: 2px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.plate .cap { position: relative; margin-top: 14px; text-align: right; }
.ribbon { display: none; }
.nb { white-space: nowrap; }
.rule { margin: 28px 0; height: 1px; background: rgba(var(--gold-rgb),.25); } .rule i { display: none; }

/* ---------- more stories ---------- */
.more-stories { position: relative; max-width: 1180px; margin: 20px auto 0; padding: 64px 44px 24px; border-top: 1px solid rgba(var(--gold-rgb),.18); }
.more-stories .kicker { margin-bottom: 24px; color: var(--gold); } .more-stories .kicker::before { background: var(--gold); }
.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.more-card { position: relative; display: block; border: 1px solid rgba(var(--gold-rgb),.24); border-radius: 2px; overflow: hidden; background: #0B0714; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.more-card:hover { transform: translateY(-4px); border-color: rgba(var(--gold-rgb),.7); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.more-card .img { aspect-ratio: 16 / 10; background: #0B0714 center/cover no-repeat; filter: saturate(.85); transition: filter .4s; }
.more-card:hover .img { filter: saturate(1.05); }
.more-card .name { padding: 14px 16px 16px; font: 400 18px/1.1 var(--serif); color: var(--cream); }
.more-card .name small { display: block; margin-top: 7px; font: 400 10px/1.3 var(--text); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }

/* ---------- colophon ---------- */
.colophon { position: relative; margin-top: 40px; padding: 80px 0 48px; overflow: hidden; background: linear-gradient(180deg, var(--ink) 0%, #1C1414 45%, #2A1B0E 100%); border-top: 1px solid rgba(var(--gold-rgb),.18); }
.colophon::before { content: ""; position: absolute; inset: 0; background: url('../art/fx/goldie-circle.jpg?v=r27') 50% 30% / cover no-repeat; background-attachment: fixed; opacity: .3; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%); pointer-events: none; }
.colophon > * { position: relative; }
.colophon .mark { font: 400 11px/1 var(--text); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); text-align: center; }
.closer { margin-top: 30px; text-align: center; }
.closer .label { font: 400 10px/1 var(--text); letter-spacing: .3em; text-transform: uppercase; color: var(--cream-3); }
.closer .band { margin-top: 18px; }
.closer .q { margin: 0 auto; max-width: 20ch; font: 400 clamp(30px, 3.4vw, 46px)/1.2 var(--serif); color: var(--gold-2); text-wrap: balance; text-shadow: 0 0 40px rgba(var(--gold-rgb),.25); }
.closer .sig { margin-top: 16px; font: 400 12px/1.5 var(--text); letter-spacing: .12em; color: var(--cream-3); }
.event-band { display: block; margin: 40px auto 0; max-width: 34ch; font: 400 20px/1.4 var(--serif); color: var(--cream); text-align: center; }
.lineup { margin-top: 12px; font: 400 12px/1.8 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--cream-3); text-align: center; }
.colophon-cta { margin-top: 32px; display: flex; justify-content: center; }
.btn-deco { display: inline-flex; align-items: center; gap: 12px; padding: 17px 32px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #0B0714; font: 400 13px/1 var(--text); letter-spacing: .24em; text-transform: uppercase; box-shadow: 0 12px 40px rgba(var(--gold-rgb),.25); transition: transform .3s ease, filter .3s ease; }
.btn-deco:hover { transform: translateY(-1px); filter: brightness(1.06); color: #0B0714; }
.btn-glyph { font-size: 16px; }
.foot, .credit { margin: 26px auto 0; max-width: 62ch; padding: 0 22px; font: 300 13px/1.7 var(--text); color: var(--cream-3); text-align: center; }
.foot b { color: var(--cream-2); font-weight: 400; }
.backrow { max-width: 1180px; margin: 0 auto; padding: 26px 44px 64px; text-align: center; }
.ulink { font: 400 12px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(var(--gold-rgb),.5); padding-bottom: 4px; }

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .topbar { padding: 10px 16px; gap: 10px; }
  .topbar .home { font-size: 14px; letter-spacing: .1em; } .topbar .home img { width: 24px; height: 24px; }
  .topbar .goldie { display: none; }
  .cover .hero { position: static; height: auto; aspect-ratio: 4 / 3; }
  .cover .veil { display: none; }
  .cover .deco-plate { bottom: 0; width: 800px; height: 360px; opacity: .8; }
  .cover .inner { min-height: 0; padding: 22px 20px 34px; }
  .brandline { letter-spacing: .22em; }
  .covermark-rules { margin-top: 14px; } .covermark { width: 160px; }
  .eyebrow-he, .eyebrow { margin-top: 22px; letter-spacing: .18em; }
  .cover h1 { font-size: clamp(40px, 12vw, 54px); max-width: none; text-shadow: none; }
  .cover .dek { font-size: 17px; margin-top: 16px; }
  .article { padding-top: 36px; }
  .art-fixedbg { opacity: .16; }
  .art-aurora { width: 520px; height: 420px; filter: blur(70px); }
  .sec, .measure { padding-left: 20px; padding-right: 20px; }
  .sec { padding-bottom: 36px; }
  body { font-size: 17px; line-height: 1.7; }
  .article h2 { font-size: 28px; }
  .article p.lead { font-size: 18.5px; }
  .article p.lead.drop::first-letter { font-size: 56px; margin-right: 10px; }
  .article blockquote { margin: 24px -2px 26px 0; padding: 16px 16px 16px 20px; }
  .article blockquote::before { font-size: 52px; top: -14px; left: 8px; }
  .article blockquote p, .article blockquote { font-size: 19px; line-height: 1.45; }
  .pull { margin: 20px auto 48px; padding: 44px 30px; } .pull p { font-size: 25px; } .pull::before { left: 14px; } .pull::after { right: 14px; }
  .plate { margin: 20px auto 48px; padding: 0 20px; }
  .more-stories { padding: 48px 20px 10px; }
  .more-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .more-card .name { padding: 12px 12px 14px; font-size: 16px; }
  .colophon { padding: 52px 0 34px; } .colophon::before { background-attachment: scroll; }
  .closer .q { font-size: 27px; }
  .event-band { font-size: 18px; padding: 0 20px; }
  .backrow { padding: 20px 20px 54px; }
}

/* ---------- desktop (>=1000px): a desktop measure, a pull line wider than the column ---------- */
@media (min-width: 1000px) {
  :root { --measure: 860px; }
  body { font-size: 19.5px; line-height: 1.8; }
  .article p.lead { font-size: 22.5px; line-height: 1.65; }
  .article p.lead.drop::first-letter { font-size: 78px; margin: 10px 14px 0 0; }
  .article h2 { font-size: clamp(36px, 3.2vw, 46px); }
  .article blockquote { padding: 24px 30px 24px 34px; margin: 32px 0 34px; }
  .article blockquote p, .article blockquote { font-size: 23px; line-height: 1.5; }
  .article blockquote::before { font-size: 74px; top: -22px; left: 14px; }
  .pull { padding: 84px 44px; }
  .pull p { max-width: 34ch; font-size: clamp(34px, 3.4vw, 50px); }
  .plate { max-width: 900px; }
  .cover .dek { max-width: 62ch; }
}
@media (min-width: 1500px) {
  :root { --measure: 920px; }
  body { font-size: 20px; }
  .pull p { max-width: 36ch; }
}