/* THE RELIC-WEB (Wave 51) — the locator plate on each dossier.
 * Shared stylesheet so a Relic added to the sky stays one touchpoint, not nine. */

.relic-web {
  max-width: 760px;
  margin: 5.5rem auto 0;
  padding: 0 3rem;
}

.rw-eyebrow {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c97d0a;
  margin-bottom: 1.5rem;
}

.rw-plate {
  border: 1px solid #221b12;
  background: linear-gradient(180deg, #0a0806 0%, #070605 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
  padding: 0.6rem 0.4rem 0.2rem;
}

.rw-svg { display: block; width: 100%; height: auto; }

/* the horizon between the two crossings */
.rw-horizon { stroke: #2a2116; stroke-width: 0.8; stroke-dasharray: 3 5; }
.rw-axis {
  fill: #4a4132;
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* everything relates through the Loom — the only true edges */
.rw-edge { stroke: #6b4a12; stroke-width: 0.6; opacity: 0.22; }
.rw-edge-here { stroke: #c97d0a; opacity: 0.5; stroke-width: 0.9; }

.rw-mark { fill: #b8791a; opacity: 0.62; transition: opacity 0.3s ease, fill 0.3s ease; }
.rw-instr .rw-mark { fill: none; stroke: #8a6a2a; stroke-width: 1.4; opacity: 0.6; }

.rw-name {
  fill: #5f5442;
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-anchor: middle;
  transition: fill 0.3s ease;
}

/* you are here */
.rw-here .rw-mark { fill: #f0a820; opacity: 1; }
.rw-here.rw-instr .rw-mark { fill: none; stroke: #f0a820; opacity: 1; }
.rw-ring { fill: none; stroke: #c97d0a; stroke-width: 0.9; opacity: 0.55; }
.rw-here .rw-name { fill: #d9c9a8; }
.rw-note {
  fill: #c97d0a;
  font-family: 'Courier Prime', monospace;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-anchor: middle;
  opacity: 0.85;
}

/* the doors */
.rw-door { cursor: pointer; }
.rw-door:hover .rw-mark { fill: #f0a820; opacity: 1; }
.rw-door:hover .rw-instr .rw-mark, .rw-door:hover .rw-node.rw-instr .rw-mark { stroke: #f0a820; }
.rw-door:hover .rw-name { fill: #e0d8c8; }
.rw-door:focus-visible .rw-name { fill: #e0d8c8; }
.rw-door:focus-visible .rw-mark { fill: #f0a820; opacity: 1; }

.rw-caption {
  max-width: 620px;
  margin: 1.4rem auto 0;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #6a6050;
  font-style: italic;
}

@media (max-width: 720px) {
  .relic-web { padding: 0 1.5rem; margin-top: 4rem; }
  .rw-axis { font-size: 13px; }
  .rw-name { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rw-mark, .rw-name { transition: none; }
}