/* Components shared by the DLNE page's header and footer. Ported from the Wonderland site's
 * components.css with the buttons, badges, forms, modals, hero, realm UI, brand and progression
 * blocks removed: only the header row, the footer and the outbound-link styles are kept.
 * dlne.css dresses them (.dlne-nav-bar, .site-footer--dlne) and wins where the two meet. */

/* ---------------------------------------------------------------------------
 * Links in copy
 *
 * Anchors are reset to no underline site-wide, so an outbound link in running
 * text (the studio link in the footer) is dotted here.
 * ------------------------------------------------------------------------- */
.studio-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; transition: color 0.15s ease; }
.studio-link:hover { color: var(--gold-300); }
.site-footer-brand-link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; transition: color 0.15s ease, filter 0.15s ease; }
.site-footer-brand-link:hover { color: var(--gold-300); filter: brightness(1.15); }

/* The header row is brand | nav | actions with space-between. When the row
 * is full, space-between leaves NO gap between neighbours — so a minimum
 * gap is set on the row itself. */
.top-nav-bar > .container {
  gap: 1.5rem;
  /* The bar spans the viewport, not the centred content column. */
  max-width: none;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.top-nav-bar > .container > nav { flex: none; }

/* ---------------------------------------------------------------------------
 * Footer. dlne.css repaints it (.site-footer--dlne) with a cyan-to-pink glow line.
 * ------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: 2rem;
  padding: 3.25rem 0 2.25rem;
  color: var(--text-secondary);
  background:
    var(--grain),
    linear-gradient(180deg, #170f09, #0b0805 70%);
  border-top: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(207, 165, 69, 0.45);
}
.site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 18px;
  opacity: 0.8;
}
.site-footer-row { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
@media (min-width: 900px) { .site-footer-row { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } }
.site-footer-brand { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.site-footer-emblem { width: 2.9rem; height: 2.9rem; object-fit: contain; filter: drop-shadow(0 0 10px rgba(207, 165, 69, 0.3)); flex: none; }
.site-footer-title { font-weight: 800; color: var(--gold-300); font-size: 0.9rem; letter-spacing: 0.12em; white-space: nowrap; }
.site-footer-sub { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem; white-space: nowrap; }
.site-footer-note { font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-secondary); max-width: 28rem; line-height: 1.5; }
.site-footer-meta { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; flex: none; }