.rel-modal{ position:fixed; inset:0; z-index:86; display:flex; flex-direction:column; align-items:center;
  padding:clamp(48px,7vh,72px) 0 clamp(16px,3vh,30px);
  background:radial-gradient(130% 100% at 50% 36%, rgba(6,11,20,.95) 0%, rgba(1,3,7,.97) 58%, rgba(0,0,0,.985) 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .4s ease; overscroll-behavior:none; }
.rel-modal{ pointer-events:none; }
.rel-modal.open{ opacity:1; pointer-events:auto; }
.realm-stone .rel-modal{ background:radial-gradient(130% 100% at 50% 36%, rgba(26,8,7,.95) 0%, rgba(10,2,2,.97) 58%, rgba(0,0,0,.985) 100%); }
.rel-close{ position:absolute; top:clamp(10px,2vh,20px); right:clamp(12px,2.4vw,26px); z-index:5;
  width:42px; height:42px; background:none; border:0; cursor:var(--cur-hand);
  color:#cfe9f7; font-size:2rem; line-height:1; opacity:.6; transition:opacity .2s ease, transform .2s ease; }
.rel-close:hover{ opacity:1; transform:scale(1.12); }
.realm-stone .rel-close{ color:#f3c4ba; }
.rel-heading{ position:absolute; top:clamp(12px,2.4vh,26px); left:0; right:0; margin:0; text-align:center;
  font-family:var(--display); font-weight:400; font-size:clamp(1.2rem,4.4vw,1.9rem); letter-spacing:.34em;
  text-transform:uppercase; color:#ece4d8; text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 24px var(--accent-soft); pointer-events:none; }
.rel-filters{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; max-width:92vw; margin:0 0 clamp(6px,1.4vh,14px); }
.rel-chip{ font-family:var(--display); font-size:clamp(.56rem,1.55vw,.66rem); letter-spacing:.16em; text-transform:uppercase;
  color:#cfe0ec; background:rgba(6,10,18,.55); border:1px solid rgba(217,205,191,.24); border-radius:20px;
  padding:5px 13px; cursor:var(--cur-hand); display:inline-flex; align-items:center; gap:6px;
  transition:color .2s ease, border-color .2s ease, background .2s ease; }
.rel-chip:hover{ color:#e6f4ff; border-color:rgba(217,205,191,.4); }
.rel-chip[aria-pressed="true"]{ color:#06101c; background:var(--accent); border-color:var(--accent); }
.rel-chip-dot{ width:8px; height:8px; border-radius:50%; box-shadow:0 0 6px currentColor; }

.rel-stage{ position:relative; flex:1 1 auto; width:100%; min-height:0; perspective:1150px;
  touch-action:none; overflow:hidden; }
.rel-stage::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(42% 46% at 50% 47%, rgba(var(--relfac,150,180,210),.15), transparent 70%);
  transition:background .55s ease; }
.rel-track{ position:absolute; inset:0; transform-style:preserve-3d; z-index:1; }
.rel-card{ position:absolute; top:50%; left:50%; width:clamp(180px,40vmin,360px); aspect-ratio:1/1;
  transform-style:preserve-3d; cursor:var(--cur-hand); will-change:transform, opacity; }
.rel-flip{ position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.85,.25,1); }
.rel-face{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border:1px solid rgba(217,205,191,.24); border-radius:2px; overflow:hidden;
  box-shadow:0 26px 80px rgba(0,0,0,.72),
    inset 0 0 0 1px rgba(0,0,0,.5), inset 2px 2px 1px rgba(255,255,255,.06), inset -3px -4px 8px rgba(0,0,0,.55); }
.rel-front{ background:#0a0a0c; display:grid; place-items:center; }
.rel-front img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  -webkit-user-drag:none; user-select:none; }
.rel-front::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, transparent 36%, transparent 52%, rgba(0,0,0,.82) 100%); }
.rel-front::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(116deg, transparent 36%, rgba(255,255,255,.13) 47%, rgba(255,255,255,.03) 53%, transparent 64%);
  transform:translateX(-60%); }
.rel-card.is-center .rel-front::before{ animation:coverSheen 7s ease-in-out infinite; }
@keyframes coverSheen{ 0%{ transform:translateX(-60%); opacity:0; } 14%{ opacity:.95; }
  38%{ transform:translateX(60%); opacity:0; } 100%{ transform:translateX(60%); opacity:0; } }
.rel-glyph{ font-family:var(--display); font-size:clamp(2rem,8vmin,3.4rem); color:#6f8aa0; opacity:.7; }
.realm-stone .rel-glyph{ color:#9a6a60; }
.cover-empty{ background:
  radial-gradient(125% 92% at 50% 16%, rgba(var(--rfc,150,180,210),.28), transparent 56%),
  linear-gradient(162deg, #171b25 0%, #0a0c12 58%, #06080d 100%) !important; }
.cover-empty .rel-glyph{ position:relative; z-index:1; font-size:clamp(2.6rem,12vmin,4.8rem);
  color:rgba(var(--rfc,150,180,210),.95); opacity:.92; text-shadow:0 0 30px rgba(var(--rfc,150,180,210),.55); }
@media (prefers-reduced-motion: reduce){ .rel-card.is-center .rel-front::before{ animation:none; } }
.rel-cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:clamp(10px,2.4vmin,16px); text-align:center; }
.rel-type{ margin:0; font-family:var(--display); font-size:clamp(.5rem,1.5vmin,.62rem); letter-spacing:.3em;
  text-transform:uppercase; color:rgb(var(--rfc,134,205,240)); }
.rel-name{ margin:2px 0 0; font-family:var(--display); font-size:clamp(.9rem,3vmin,1.3rem); line-height:1.14; color:#ece4d8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 3px #000; }
.rel-by{ margin:1px 0 0; font-family:var(--display); font-size:clamp(.62rem,1.9vmin,.78rem); letter-spacing:.04em; color:#bcd9ec;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 3px #000; }
.realm-stone .rel-by{ color:#f0b6a6; }
.rel-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(8px,1.8vmin,12px); }
.rel-link{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  color:var(--accent); border:1px solid var(--accent-soft); background:rgba(255,255,255,.04);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.rel-link svg{ width:18px; height:18px; display:block; }
.rel-link:hover{ transform:translateY(-2px); background:rgba(255,255,255,.08); box-shadow:0 0 14px var(--accent-soft); }
.rel-badges{ display:flex; gap:9px; justify-content:center; margin-top:8px; }
.rel-badge{ display:inline-grid; place-items:center; width:20px; height:20px; color:#cfe9ff; opacity:.92;
  filter:drop-shadow(0 1px 2px #000); text-decoration:none; cursor:var(--cur-hand); pointer-events:none;
  transition:transform .18s ease, color .18s ease, opacity .18s ease; -webkit-tap-highlight-color:transparent; }
.realm-stone .rel-badge{ color:#ffd0c0; }
.rel-card.is-center .rel-badge{ pointer-events:auto; }
.rel-badge:hover, .rel-badge:focus-visible{ transform:translateY(-2px); color:#fff; opacity:1; outline:none; }
.rel-badge svg{ width:100%; height:100%; display:block; }
.rel-card.is-center .rel-face{ box-shadow:0 28px 90px rgba(0,0,0,.75), 0 0 64px rgba(var(--rfc,150,180,210),.32),
  inset 0 0 0 1px rgba(0,0,0,.45), inset 2px 2px 1px rgba(255,255,255,.07), inset -3px -4px 9px rgba(0,0,0,.55); }
.rel-card.is-center .rel-front{ border-color:rgba(var(--rfc,150,180,210),.5); }
.rel-card.is-center .rel-flip{ -webkit-box-reflect:below 2px linear-gradient(transparent 58%, rgba(0,0,0,.42)); }
.rel-vinyl{ position:absolute; top:50%; left:50%; width:92%; height:92%; border-radius:50%;
  transform:translate(-50%,-50%) translateZ(-30px); opacity:0; pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%, #141417 0 2px, #0a0a0c 2px 4px);
  box-shadow:0 16px 46px rgba(0,0,0,.7); transition:opacity .45s ease; }
.rel-vinyl::before{ content:''; position:absolute; inset:35%; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--rfc,150,180,210),.9), rgba(var(--rfc,150,180,210),.35) 68%, #0a0a0c 70%); }
.rel-vinyl::after{ content:''; position:absolute; inset:47%; border-radius:50%; background:#05060a; }
.rel-card.is-center .rel-vinyl{ opacity:.95; animation:vinylSpin 3.6s linear infinite; }
@keyframes vinylSpin{
  from{ transform:translate(-50%,-50%) translateZ(-30px) translateX(38%) rotate(0deg); }
  to{   transform:translate(-50%,-50%) translateZ(-30px) translateX(38%) rotate(360deg); } }
.rel-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; background:rgba(8,14,24,.5); border:1px solid rgba(217,205,191,.2);
  color:#dfeefc; font-size:1.7rem; line-height:1; cursor:var(--cur-hand);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .2s ease, transform .2s ease; }
.rel-nav:hover{ background:rgba(20,30,48,.7); }
.realm-stone .rel-nav{ background:rgba(30,10,10,.55); border-color:rgba(255,150,130,.22); color:#f3c4ba; }
.realm-stone .rel-nav:hover{ background:rgba(52,16,16,.75); }
.rel-prev{ left:clamp(6px,3vw,40px); } .rel-next{ right:clamp(6px,3vw,40px); }
.rel-dots{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; max-width:90vw; margin-top:clamp(8px,1.8vh,16px); }
.rel-dot{ width:9px; height:9px; padding:0; border-radius:50%; border:1px solid rgba(217,205,191,.45);
  background:transparent; cursor:var(--cur-hand); transition:background .25s ease, border-color .25s ease, transform .25s ease; }
.rel-dot:hover{ border-color:rgba(217,205,191,.8); }
.rel-dot[aria-selected="true"]{ background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 9px var(--accent-soft); transform:scale(1.25); }
.rel-empty{ position:absolute; inset:0; display:none; place-items:center; font-family:var(--display);
  letter-spacing:.06em; font-size:1.1rem; color:#8c857b; }
.rel-empty:not([hidden]){ display:grid; }

.rel-detail{ position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vmin,52px); opacity:0; visibility:hidden; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, rgba(8,15,26,.9), rgba(2,5,11,.97));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:opacity .4s ease, visibility .4s ease; }
.realm-stone .rel-detail{ background:radial-gradient(120% 90% at 50% 0%, rgba(28,9,9,.9), rgba(7,2,2,.97)); }
.rel-detail.open{ opacity:1; visibility:visible; pointer-events:auto; }
.rd-close{ z-index:6; }
.rd-body{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; perspective:1050px; }
.rd-card{ position:relative; width:min(80vmin,520px); aspect-ratio:1/1; transform-style:preserve-3d;
  transform-origin:center center; opacity:0; transition:opacity .3s ease; will-change:transform; cursor:var(--cur-hand); }
.rel-detail.open .rd-card{ opacity:1; }
.rd-face{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border-radius:4px; overflow:hidden; border:1px solid rgba(var(--rfc,150,180,210),.5);
  box-shadow:0 44px 120px rgba(0,0,0,.78), 0 0 72px rgba(var(--rfc,150,180,210),.3),
    inset 0 0 0 1px rgba(0,0,0,.45), inset 3px 3px 2px rgba(255,255,255,.07), inset -4px -6px 12px rgba(0,0,0,.55); }
.rd-front{ background:#0a0a0c; display:grid; place-items:center; }
.rd-front img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  -webkit-user-drag:none; user-select:none; }
.rd-back{ transform:rotateY(180deg); display:flex; flex-direction:column; text-align:left;
  padding:clamp(18px,4.2vmin,34px); color:#cfe0ee;
  background:linear-gradient(165deg, rgba(17,26,42,.99), rgba(5,9,16,.995)); }
.realm-stone .rd-back{ background:linear-gradient(165deg, rgba(40,16,14,.99), rgba(12,4,4,.995)); }
.rd-back::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(96% 56% at 50% 0%, rgba(var(--rfc,150,180,210),.16), transparent 62%); }
.rd-back::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain); background-size:130px 130px; opacity:.05; }
.rd-back > *{ position:relative; z-index:1; }
.rd-back-head{ flex:0 0 auto; }
.rd-type{ margin:0; font-family:var(--display); font-size:clamp(.58rem,1.7vmin,.72rem); letter-spacing:.32em;
  text-transform:uppercase; color:var(--accent); }
.rd-title{ margin:5px 0 0; font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,4.6vmin,2.2rem);
  line-height:1.05; color:#f1ece2; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.rd-by{ margin:8px 0 0; font-family:var(--display); font-size:clamp(.82rem,2.3vmin,1rem); color:#cfe0ee; letter-spacing:.02em; }
.rd-feat{ margin:4px 0 0; font-family:var(--display); font-style:italic; font-size:clamp(.72rem,2vmin,.88rem); color:#9db9cc; }
.rd-meta{ margin:7px 0 0; font-family:var(--display); font-size:clamp(.56rem,1.6vmin,.7rem); letter-spacing:.18em;
  text-transform:uppercase; color:#7ea7c2; }
.realm-stone .rd-meta{ color:#c08a80; }
.rd-rule{ flex:0 0 auto; height:1px; margin:clamp(10px,2.2vmin,16px) 0; background:linear-gradient(90deg, var(--accent-soft), transparent); }
.rd-tracks-h{ flex:0 0 auto; margin:0 0 6px; font-family:var(--display); font-size:.56rem; letter-spacing:.22em;
  text-transform:uppercase; color:#5e8aa6; }
.rd-tracks{ margin:0; padding:0 6px 0 0; list-style:none; overflow:auto; flex:1 1 auto; min-height:0;
  scrollbar-width:thin; scrollbar-color:rgba(var(--rfc,150,180,210),.5) transparent; }
.rd-tracks::-webkit-scrollbar{ width:5px; }
.rd-tracks::-webkit-scrollbar-thumb{ background:rgba(var(--rfc,150,180,210),.45); border-radius:3px; }
.rd-tracks li{ display:flex; gap:12px; padding:6px 2px; font-size:clamp(.82rem,2.2vmin,.98rem); line-height:1.4;
  color:#d2e1ee; border-bottom:1px solid rgba(255,255,255,.05); transition:color .15s ease, background .15s ease; }
.rd-tracks li:hover{ color:#fff; background:linear-gradient(90deg, rgba(var(--rfc,150,180,210),.12), transparent); }
.rd-tracks li .rd-no{ color:rgba(var(--rfc,150,180,210),.92); min-width:1.7em; text-align:right;
  font-variant-numeric:tabular-nums; font-weight:600; }
.rd-tracks{ overscroll-behavior:contain; }
.rd-tracks.more-below{ -webkit-mask-image:linear-gradient(#000 calc(100% - 38px), transparent); mask-image:linear-gradient(#000 calc(100% - 38px), transparent); }
.rd-tracks.more-above{ -webkit-mask-image:linear-gradient(transparent, #000 30px); mask-image:linear-gradient(transparent, #000 30px); }
.rd-tracks.more-above.more-below{ -webkit-mask-image:linear-gradient(transparent, #000 30px, #000 calc(100% - 38px), transparent);
  mask-image:linear-gradient(transparent, #000 30px, #000 calc(100% - 38px), transparent); }
.rd-back .rel-links{ flex:0 0 auto; margin-top:clamp(10px,2.2vmin,16px); }
.rd-buttons{ flex:0 0 auto; display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(8px,1.8vmin,12px); }
.rd-button{ display:inline-flex; align-items:center; gap:.4em; padding:7px 14px; font-family:var(--display); font-size:.78rem; letter-spacing:.08em;
  text-decoration:none; color:#06101c; background:rgb(var(--rfc,150,180,210)); border-radius:14px 17px 13px 16px / 16px 13px 17px 14px;
  box-shadow:0 0 16px rgba(var(--rfc,150,180,210),.35); }
.rd-button:hover, .rd-button:focus-visible{ outline:none; box-shadow:0 0 24px rgba(var(--rfc,150,180,210),.6); }
.rd-actions{ position:absolute; left:12px; right:12px; bottom:clamp(16px,5vh,46px); z-index:6;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; pointer-events:none; }
.rd-actions > *{ pointer-events:auto; }
.rd-play{ display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:clamp(.6rem,1.7vmin,.74rem);
  letter-spacing:.2em; text-transform:uppercase; color:#06101c; cursor:var(--cur-hand); border:0; border-radius:24px; padding:12px 22px;
  background:rgb(var(--rfc-now,96,215,255)); box-shadow:0 8px 26px rgba(0,0,0,.45), 0 0 22px rgba(var(--rfc-now,96,215,255),.35);
  transition:transform .2s ease, box-shadow .2s ease; }
.rd-play:hover, .rd-play:focus-visible{ outline:none; transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.45), 0 0 30px rgba(var(--rfc-now,96,215,255),.6); }
.rd-look{ position:relative; z-index:6;
  display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:clamp(.6rem,1.7vmin,.74rem);
  letter-spacing:.2em; text-transform:uppercase; color:#eaf6ff; cursor:var(--cur-hand);
  background:rgba(10,18,30,.6); border:1px solid var(--accent-soft); border-radius:24px; padding:11px 22px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 8px 26px rgba(0,0,0,.45);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease; }
.realm-stone .rd-look{ background:rgba(30,10,10,.6); }
.rd-look:hover{ transform:translateY(-2px); background:rgba(var(--rfc,150,180,210),.2);
  border-color:var(--accent); box-shadow:0 0 22px var(--accent-soft); }
@media (max-width:480px){ .rd-actions{ gap:8px; } .rd-actions .rd-play, .rd-actions .rd-look{ padding:10px 13px; letter-spacing:.1em; } }
.rd-share-i{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rd-look .rd-look-i{ font-size:1.05em; line-height:1; display:inline-block; transition:transform .4s ease; }
.rd-look[aria-pressed="true"] .rd-look-i{ transform:rotateY(180deg); }