/* ============================================================
   CANDENTED — REFINEMENTS LAYER
   Loads LAST. Pure overrides on top of style.css + mythos.css.
   Designed to be removed cleanly if needed.

   Scope:
   · Contrast & color tokens (brighter --text-dim / --text-ghost)
   · Type scale floor (0.6rem labels → 0.75rem)
   · Footer un-ghosting
   · Focus-visible states
   · Reduced-motion respect
   · Skip-to-content link
   · Section rhythm tightening
   ============================================================ */

/* ── COLOR TOKEN OVERRIDES ──────────────────────────────── */
:root {
  /* Brighter text. Still mood-appropriate, but no longer disappearing. */
  --text:       #ecedf5;
  --text-dim:   #b8bad0;   /* was #8888a8 — passes 7:1 on void */
  --text-ghost: #7d80a0;   /* was #404060 — passes 4.5:1 contrast */

  /* Slightly stronger borders so outlined buttons read */
  --border:        #2a2a55;
  --border-strong: #45456e;
}

/* ── TYPOGRAPHY FLOOR ───────────────────────────────────── */

/* Eyebrow labels: 0.60–0.68rem → 0.75rem floor */
.hero-pre,
.hero-tagline,
.section-label,
.embed-label,
.writing-series,
.merch-category,
.release-year,
.entity-role,
.connect-platform,
.video-sub,
.altar-num,
.drift-piece-num,
.grid-piece-label,
.lightbox-num,
.door-numeral,
.door-url,
.tweak-label,
.tweaks-footer,
.lost-label,
.about-portrait-caption,
.page-hero-credit,
.scroll-hint,
.neocosm-hint,
.neocosm-veil .neocosm-eyebrow {
  font-size: 0.75rem;
}

/* Mono pieces inside larger labels keep their own size — but no smaller than 0.7rem */
.credit-num,
.label-num,
.lightbox-num {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
}

/* Track meta + footer links: 0.68rem → 0.78rem */
.track-meta,
.track-num,
.footer-links a,
.connect-handle,
.social-name,
.merch-title,
.tracks-grid .track-meta {
  font-size: 0.82rem;
}

.track-name {
  font-size: 1rem;
}

/* Nav links: 0.72rem → 0.78rem */
.nav-links a {
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* Buttons: 0.72rem → 0.78rem */
.btn {
  font-size: 0.78rem;
  padding: 0.85rem 1.9rem;
}

/* Body copy gets a tiny breathing room bump */
body {
  line-height: 1.78;
}
.about-body,
.entity-desc,
.release-desc,
.lore-quote,
.section-subtitle,
.hero-statement,
.page-subtitle {
  color: var(--text);    /* was --text-dim, which was disappearing at the new tint */
}
.about-body { color: var(--text-dim); }   /* prose stays slightly dimmer than headings */
.about-body em,
.entity-desc em,
.release-desc em { color: var(--text); }

/* Ideal reading measure on long-form prose */
.about-body,
.about-tease-body {
  max-width: 62ch;
}

/* ── FOOTER UN-GHOSTING ─────────────────────────────────── */
.footer-logo       { color: var(--text); }
.footer-tagline    { color: var(--text-dim); opacity: 1; font-size: 0.75rem; }
.footer-links a    { color: var(--text-dim); font-size: 0.82rem; }
.footer-links a:hover { color: var(--text); }
.footer-social a   {
  color: var(--text-dim);
  border-color: var(--border-strong);
  width: 42px; height: 42px;
  font-size: 0.95rem;
}
.footer-fine {
  color: var(--text-dim);
  opacity: 1;
  font-size: 0.78rem;
  line-height: 1.85;
  max-width: 680px;
  margin: 0 auto;
}
.footer-sigil { opacity: 0.7; }

/* ── BUTTON CONTRAST ────────────────────────────────────── */
.btn-outline {
  border-color: var(--border-strong);
}
.btn-outline:hover {
  border-color: var(--text);
}
.btn-ghost {
  color: var(--text);
  border: 1px solid transparent;
}
.btn-ghost:hover {
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.02);
}

/* ── SECTION-LABEL DOT IS TOO DIM ───────────────────────── */
.section-label {
  color: var(--cyan);     /* was sometimes too dim against deep backgrounds */
}
body[data-accent="violet"] .section-label { color: var(--violet-light); }
body[data-accent="gold"]   .section-label { color: #e89548; }
body[data-accent="aurora"] .section-label { color: #6ad9c6; }

/* ── ENTITY ROLE + WRITING SERIES + RELEASE YEAR ────────── */
/* These are accent-colored mono eyebrows; make sure they stay accent-colored
   when the body data-accent changes. Already handled in mythos.css. */

/* ── FOCUS-VISIBLE STATES (was missing entirely) ────────── */
:focus { outline: none; }   /* kill default; we provide :focus-visible */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

body[data-accent="violet"] a:focus-visible,
body[data-accent="violet"] button:focus-visible { outline-color: var(--violet-light); }
body[data-accent="gold"]   a:focus-visible,
body[data-accent="gold"]   button:focus-visible { outline-color: #e89548; }
body[data-accent="aurora"] a:focus-visible,
body[data-accent="aurora"] button:focus-visible { outline-color: #6ad9c6; }

/* Skip-to-content link */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 99999;
  background: var(--void);
  color: var(--cyan);
  padding: 0.65rem 1rem;
  border: 1px solid var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: translateY(-150%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ── HIDDEN-OVERLAY ACCESSIBILITY ────────────────────────
   When a panel is closed, we set inert + aria-hidden via JS.
   Add a backstop here: display:none on aria-hidden parts.
   ─────────────────────────────────────────────────────── */
.tweaks-panel[aria-hidden="true"],
.lightbox[aria-hidden="true"]:not(.open),
.neocosm-portal[aria-hidden="true"]:not(.open) {
  pointer-events: none;
}

/* ── NAV (legibility) ───────────────────────────────────── */
.site-nav.scrolled { background: rgba(2,2,10,0.96); }
.nav-links a.active { color: var(--cyan); }

/* ── ART CARD HINT ──────────────────────────────────────── */
/* Visible "click to expand" cursor + subtle outline indication on focus */
[data-piece] { cursor: zoom-in; }
[data-piece]:focus-visible { outline-offset: 6px; }

/* ── ALTAR CAPTION + GRID LABEL — keep visible on touch ── */
@media (hover: none) {
  .grid-piece-label,
  .drift-piece-label,
  .altar-caption {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── DRIFT — soften the unbroken motion for taste ───────── */
.drift-track { animation-timing-function: linear; }

/* ── REDUCED MOTION RESPECT ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1s !important;
  }
  .drift-track            { animation: none !important; transform: none !important; }
  .hero-art img           { animation: none !important; }
  .lore-mythos .lore-backdrop img,
  .era-mythos .era-backdrop img,
  .section-bloom-art img  { animation: none !important; }
  body::after             { animation: none !important; opacity: 0.018; }
  .neocosm-portal::before { animation: none !important; }
  .hero-sigil,
  .door-sigil             { animation: none !important; }
  [data-reveal]           { opacity: 1 !important; transform: none !important; }
}

/* ── SECTION RHYTHM — tightening empty stretches ────────── */
.about-body p + p { margin-top: 1.25rem; }
.hero-mythos { padding-bottom: 4rem; }
.drift       { padding: 3rem 0; }

/* Lore-mythos quote: remove the giant decorative left margin on small screens */
@media (max-width: 768px) {
  .lore-mythos .lore-quote::before {
    font-size: 4rem;
    top: -1rem;
    left: 0;
  }
}

/* ── HOMEPAGE "CHOOSE YOUR ENTRY" PATH ROW ────────────────
   New treatment for index.html hero CTAs.
   Activated by adding class "hero-paths" to .hero-ctas.
   ─────────────────────────────────────────────────────── */
.hero-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 1px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--border-strong);
  border: 1px solid var(--border-strong);
  flex-wrap: initial;
}
.hero-paths .hero-path {
  background: rgba(2,2,10,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1.4rem 1.2rem 1.2rem;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: background 0.4s var(--ease), color 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}
.hero-paths .hero-path:hover {
  background: rgba(2,2,10,0.85);
  color: var(--cyan);
}
.hero-paths .hero-path::after {
  content: '';
  position: absolute;
  inset: auto 1.2rem 0.6rem;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease-out);
}
.hero-paths .hero-path:hover::after,
.hero-paths .hero-path:focus-visible::after { transform: scaleX(1); }

.hero-paths .path-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-ghost);
}
.hero-paths .path-label {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
}
.hero-paths .path-detail {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.hero-wander {
  text-align: center;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.hero-wander a {
  color: var(--text-dim);
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
  padding-bottom: 1px;
}
.hero-wander a:hover {
  color: var(--text);
  border-bottom-color: var(--cyan);
}

@media (max-width: 640px) {
  .hero-paths { grid-template-columns: 1fr; max-width: 320px; }
  .hero-paths .hero-path { padding: 1rem 1.2rem; }
}

/* ── BEGIN HERE BANNER (footer-adjacent helper for newcomers) ── */
.begin-here-banner {
  text-align: center;
  padding: 2.5rem var(--page-pad);
  border-top: 1px solid var(--border);
  background: rgba(6,6,15,0.55);
}
.begin-here-banner .bh-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.6rem;
}
.begin-here-banner .bh-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 0.8rem;
}
.begin-here-banner .bh-prose {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-dim);
  max-width: 520px;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
}