/* The seal — the way back from a destination page to the shrine's path nav.
   A torii mark (Tabler Icons "torii", MIT — https://tabler.io/icons) + a
   quiet label. White / black / red like the nav: white strokes and letters,
   a red vein that lights under the gate on hover. No gold, no circle, no
   button — a marker cut into the corner. */

.seal {
  position: fixed;
  left: clamp(1.1rem, 3vw, 2.4rem);
  bottom: clamp(1.1rem, 3vw, 2.2rem);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  padding: 0.4rem 0.15rem;
  text-decoration: none;
  color: #FFFFFF;
  transition: transform 260ms ease;
  -webkit-tap-highlight-color: transparent;
}

.seal__mark {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  overflow: visible;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}
.seal__mark .torii {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.seal__mark .vein {
  stroke: var(--vein);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 260ms ease;
}

/* Same face and treatment as the path nav — Newsreader, sentence case, a
   hair of tracking that opens on hover. Just smaller and cornered. */
.seal__label {
  font: 400 1.06rem/1 var(--font);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  transition: letter-spacing 320ms ease;
}

.seal:hover,
.seal:focus-visible {
  transform: translateY(-2px);
  outline: none;
}
.seal:hover .seal__label,
.seal:focus-visible .seal__label { letter-spacing: 0.05em; }
.seal:hover .seal__mark .vein,
.seal:focus-visible .seal__mark .vein { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .seal, .seal__label, .seal__mark .vein { transition: none; }
}

/* On a phone, a page's own scrolling content can pass directly behind this
   fixed corner — on bounty especially, the parchment closing card is tall
   enough that it collides with the seal mid-scroll, both legible and
   visually tangled at once. A quiet backdrop chip fixes it everywhere the
   seal appears, not just there: it always reads as chrome floating above
   the page, never as text overlapping other text. Barely visible over the
   dark scene itself (that's the point — only shows up when it's needed). */
@media (max-width: 700px) {
  .seal {
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    background: rgba(5, 6, 12, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}