/* Homepage only. Shared nav, footer, buttons and form basics come from
   styles.css; this file adds the 3D hero, the vaporwave plaza (sunset
   wallpaper, radon atom, glass panels) and the ink layer. */

:root {
  --hud-bg: rgba(10, 4, 28, 0.72);
  --lvl-high: #ff3cac;
  --lvl-mid: #ffd166;
  --lvl-low: #00e5ff;
  --font-pixel: "VT323", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-display: "Audiowide", "Segoe UI", sans-serif;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* styles.css caps <main> at 1100px with padding; the desktop runs full width. */
main.home-main { max-width: none; padding: 0; }

/* ============================================================ HERO */

.dh { position: relative; }
.dh-stage { position: relative; }

.dh-view {
  position: relative;
  height: clamp(380px, 62vh, 600px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 60% 100%, rgba(194, 40, 127, 0.35), transparent 70%),
    linear-gradient(180deg, #05010d, #1a0634 60%, #2a0c4a);
}

.dh-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 0.9s ease;
}
.dh-live .dh-canvas { opacity: 1; }

.dh-live /* No 3D on this device: drop the empty view and let the copy stand alone. */
.dh-failed .dh-view { display: none; }
.dh-failed .dh-copy { position: static; width: auto; max-width: 680px; margin: 0 auto; background: none; }
.dh-failed .dh-canvas,
.dh-failed .dh-hud,
.dh-failed .dh-ui,
.dh-failed .dh-note { display: none; }

/* HUD readouts */
.dh-hud { position: absolute; inset: 0; pointer-events: none; display: none; }
.dh-live .dh-hud { display: block; }
.dh-panels { position: absolute; inset: 0; }

.hud-panel {
  position: absolute;
  margin: 0;
  padding: 0.55rem 0.8rem 0.6rem;
  min-width: 11.5rem;
  font-family: var(--font-pixel);
  font-size: 1.15rem;
  line-height: 1.12;
  color: #dff9ff;
  background: var(--hud-bg);
  border: 1px solid rgba(0, 229, 255, 0.75);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.25), inset 0 0 18px rgba(0, 229, 255, 0.08);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  text-transform: uppercase;
  animation: hud-flicker 6s steps(1) infinite;
}
.hud-panel p { margin: 0; }
.hud-h { color: var(--neon-cyan); letter-spacing: 0.06em; margin-bottom: 0.3rem !important; }
.hud-row { display: flex; justify-content: space-between; gap: 1rem; }
.hud-row span { color: #9fd7e6; }
.hud-hot { color: var(--lvl-high); text-shadow: 0 0 8px rgba(255, 60, 172, 0.7); }
.hud-big { font-size: 1.6rem; color: var(--lvl-high); text-shadow: 0 0 10px rgba(255, 60, 172, 0.7); }
.hud-foot { margin-top: 0.3rem !important; font-size: 0.95rem; color: #8fb6c4; }
.hud-spark { display: block; width: 100%; height: 26px; margin-top: 0.35rem; }
.hud-spark polyline {
  fill: none; stroke: var(--neon-pink); stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-dasharray: 400; stroke-dashoffset: 400; animation: spark-draw 4s ease-out infinite;
}
.hud-a { top: 0.75rem; left: 0.75rem; }
.hud-b { display: none; }

@keyframes spark-draw { 0% { stroke-dashoffset: 400; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes hud-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 0.86; } 48% { opacity: 1; } 83% { opacity: 0.9; } 84% { opacity: 1; } }

/* room tags, positioned each frame by dollhouse.js */
.dh-tags { position: absolute; inset: 0; }
.dh-tag {
  --lvl: var(--lvl-low);
  position: absolute; left: 0; top: 0;
  translate: -50% -100%;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-pixel);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform;
}
.dh-tag.lvl-high { --lvl: var(--lvl-high); }
.dh-tag.lvl-mid { --lvl: var(--lvl-mid); }
.dh-tag.is-on { opacity: 1; }
.dh-tag-body {
  display: grid; justify-items: center;
  padding: 0.2rem 0.5rem 0.25rem;
  line-height: 1.02;
  white-space: nowrap;
  color: var(--lvl);
  background: rgba(10, 4, 28, 0.8);
  border: 1px solid var(--lvl);
  box-shadow: 0 0 12px color-mix(in srgb, var(--lvl) 45%, transparent);
  transition: padding 0.25s ease;
}
.dh-tag-name { font-size: 0.95rem; color: #fff; }
.dh-tag-read { font-size: 1.2rem; }
.dh-tag-read b { font-weight: 400; }
.dh-tag-status { display: none; font-size: 0.95rem; }
.dh-tag-dot {
  width: 10px; height: 10px; margin-top: 5px; border-radius: 50%;
  background: var(--lvl); box-shadow: 0 0 10px var(--lvl);
}
.dh-tag.is-focus .dh-tag-body {
  padding: 0.4rem 0.75rem 0.45rem;
  animation: tag-pulse 1.2s ease-in-out infinite;
}
.dh-tag.is-focus .dh-tag-body::before { content: "⚠ Radon detected"; font-size: 1rem; letter-spacing: 0.05em; }
.dh-tag.is-focus.lvl-low .dh-tag-body::before { content: "✓ Below 2.0"; }
.dh-tag.is-focus .dh-tag-read { font-size: 1.75rem; }
.dh-tag.is-focus .dh-tag-status { display: block; }
@keyframes tag-pulse {
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--lvl) 40%, transparent); }
  50% { box-shadow: 0 0 28px color-mix(in srgb, var(--lvl) 85%, transparent); }
}

/* explore controls */
.dh-ui {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: none; flex-direction: column; align-items: flex-end; gap: 0.6rem;
  padding: 0 0.75rem 0.75rem;
  pointer-events: none;
}
.dh-ready.dh-live .dh-ui { display: flex; }
.dh-ui > * { pointer-events: auto; }

.dh-explore {
  font-family: var(--font-pixel);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  color: #0a0414;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  border: 0;
  border-radius: 4px;
  padding: 0.5rem 1.05rem;
  min-height: 44px;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.45);
}
.dh-explore:hover { filter: brightness(1.08); }
.dh-explore:focus-visible,
.dh-rooms button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.is-exploring .dh-explore { display: none; }

.dh-rooms {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem;
  max-width: 100%;
  padding: 0.5rem;
  background: rgba(10, 4, 28, 0.8);
  border: 1px solid rgba(0, 229, 255, 0.55);
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.dh-rooms[hidden] { display: none; }
.dh-rooms button {
  font-family: var(--font-pixel);
  font-size: 1.15rem;
  color: #e9fbff;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  min-height: 38px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.dh-rooms button:hover { background: rgba(0, 229, 255, 0.18); }
.dh-rooms button[aria-pressed="true"] { background: rgba(255, 60, 172, 0.25); border-color: var(--neon-pink); }
.dh-rooms .dh-scan { border-color: var(--neon-pink); color: #ffd3ec; }
.dh-rooms .dh-done { background: #e9fbff; color: #0a0414; border-color: #e9fbff; }
.dh-rooms .lvl { padding: 0 0.3rem; border-radius: 3px; color: #0a0414; font-size: 1rem; }
.lvl-high { background: var(--lvl-high); }
.lvl-mid { background: var(--lvl-mid); }
.lvl-low { background: var(--lvl-low); }
.dh-hint {
  flex-basis: 100%; margin: 0.1rem 0 0; text-align: right;
  font-family: var(--font-pixel); font-size: 1rem; color: #9fd7e6;
}

/* tour / scan captions, top-centre over the 3D view */
.dh-caption {
  position: absolute; left: 50%; top: 0.75rem;
  translate: -50% -6px;
  width: min(calc(100% - 1.5rem), 34rem);
  margin: 0;
  padding: 0.55rem 0.85rem;
  font-size: 0.95rem; line-height: 1.45; text-align: center;
  color: var(--text);
  background: rgba(10, 4, 28, 0.82);
  border: 1px solid rgba(0, 229, 255, 0.5);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, translate 0.35s ease, visibility 0.35s;
}
.dh-caption.is-on { opacity: 1; visibility: visible; translate: -50% 0; }
.dh-rooms .dh-tour { border-color: var(--neon-cyan); color: #c9f8ff; }
.dh-rooms .dh-tour[aria-pressed="true"] { background: rgba(0, 229, 255, 0.22); }

.dh-note {
  position: absolute; left: 0.75rem; bottom: 0.6rem; margin: 0;
  font-family: var(--font-pixel); font-size: 0.95rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgba(223, 249, 255, 0.6);
  pointer-events: none;
}
.is-exploring .dh-note { display: none; }

/* copy (below the canvas on phones, over its left side on wide screens) */
.dh-copy {
  max-width: 680px;
  margin: 0 auto;
  padding: 1.6rem 16px 2.4rem;
}
.dh-kicker {
  margin: 0 0 0.6rem;
  font-family: var(--font-pixel);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}
.dh-copy h1 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: 1.08;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 0 24px rgba(177, 74, 237, 0.55);
}
.dh-h1-b {
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(255, 60, 172, 0.45));
}
.dh-lede { margin: 0 0 1rem; font-size: 1.05rem; color: var(--text-dim); max-width: 34rem; }
.dh-lede strong { color: var(--text); }
.dh-launch { margin: 0 0 1.4rem; font-size: 0.95rem; color: var(--text-dim); max-width: 34rem; }
.dh-launch .coming-soon-badge { margin-right: 0.4rem; }
.dh-copy .cta-buttons { justify-content: flex-start; }

@media (min-width: 600px) {
  .hud-b { display: block; top: 0.75rem; right: 0.75rem; }
}

/* Phones: while exploring, give the house more room and keep the room menu
   to one swipeable row so it doesn't cover the view. */
@media (max-width: 699px) {
  .is-exploring .dh-view { height: min(78vh, 640px); }
  .dh-rooms {
    flex-wrap: nowrap; justify-content: flex-start;
    width: 100%; overflow-x: auto; scrollbar-width: none;
  }
  .dh-rooms::-webkit-scrollbar { display: none; }
  .dh-rooms button { flex: none; }
  .dh-hint { display: none; }
  .dh-caption { font-size: 0.85rem; padding: 0.45rem 0.6rem; }
}

/* Very narrow screens (e.g. a Galaxy Z Fold cover screen, ~344px) */
@media (max-width: 400px) {
  .dh-tag-name { font-size: 0.8rem; }
  .dh-tag-read { font-size: 1rem; }
  .dh-tag-body { padding: 0.15rem 0.35rem 0.2rem; }
  .hud-panel { min-width: 0; font-size: 1.05rem; }
}

@media (min-width: 960px) {
  .dh-view { height: clamp(560px, calc(100vh - 60px), 860px); }
  .dh-copy {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: min(44%, 620px);
    max-width: none;
    margin: 0;
    padding: 2rem 2.2rem 2rem max(2rem, calc((100vw - 1400px) / 2));
    display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(90deg, rgba(10, 4, 20, 0.9) 0%, rgba(10, 4, 20, 0.7) 68%, rgba(10, 4, 20, 0) 100%);
    transition: opacity 0.4s ease, translate 0.4s ease, visibility 0.4s;
  }
  .is-exploring .dh-copy { opacity: 0; translate: -40px 0; visibility: hidden; }
  .hud-a { left: calc(min(44%, 620px) + 0.5rem); }
  .dh-note { left: calc(min(44%, 620px) + 0.75rem); bottom: 0.9rem; }
  .dh-ui { padding: 0 1.25rem 1.25rem; }
}

/* ============================================================ PLAZA */

.desk { position: relative; padding-top: 4.5rem; }

/* wallpaper: sticks to the viewport while the section scrolls past.
   z-index 0, not -1: a negative layer would paint under <body>'s own
   background. Not isolating .desk keeps the contact window (z 46) above the
   ink overlay (z 45), which lives at the root. */
.synth { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.synth-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.synth-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.synth-sticky::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  opacity: 0.55;
}
.vhs {
  position: absolute; top: 4.6rem; right: 1rem;
  font-family: var(--font-pixel); font-size: 1.35rem; line-height: 1.05; text-align: right;
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.55), 2px 0 rgba(255, 60, 172, 0.6), -2px 0 rgba(0, 229, 255, 0.6);
}

.desk-grid {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 4rem;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "altar" "welcome" "why" "waitlist" "also" "myths" "contact";
  align-items: start;
}

#p-welcome { grid-area: welcome; }
#p-why { grid-area: why; }
#p-also { grid-area: also; }
#p-myths { grid-area: myths; }
#p-waitlist { grid-area: waitlist; }
#contact { grid-area: contact; }

/* the exhibit */
.altar { grid-area: altar; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.atom-wrap { position: relative; width: min(100%, 360px); aspect-ratio: 1; }
/* a dusky halo so the neon atom reads against the bright sun */
.atom-wrap::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 6, 48, 0.7) 0 34%, rgba(24, 6, 48, 0.35) 52%, transparent 70%);
}
.atom-canvas, .atom-still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.atom-still { filter: drop-shadow(0 0 10px rgba(255, 60, 172, 0.6)); transition: opacity 0.6s; }
.atom-ready .atom-still { opacity: 0; }

.pedestal { display: flex; flex-direction: column; align-items: center; margin-top: -18px; }
.ped-cap, .ped-base {
  width: 230px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, #ffffff, #d4cbe9);
  box-shadow: 0 2px 0 #8f86ad;
}
.ped-body {
  width: 186px; height: 104px;
  display: grid; place-items: center;
  background:
    linear-gradient(115deg, transparent 40%, rgba(160, 140, 200, 0.35) 42%, transparent 46%),
    linear-gradient(70deg, transparent 62%, rgba(160, 140, 200, 0.3) 64%, transparent 67%),
    linear-gradient(90deg, #c9bfe0, #ffffff 30%, #efe9fa 62%, #bfb3da);
}
.plaque {
  font-family: var(--font-pixel); font-size: 1.35rem; letter-spacing: 0.18em;
  color: #3a2a55; padding: 0.15rem 0.6rem;
  background: linear-gradient(180deg, #e3d9f5, #c8bce2);
  border: 1px solid #9a8fbb;
}
.ped-base { width: 250px; height: 20px; }

.element {
  width: min(100%, 420px);
  margin-top: 1.4rem;
  padding: 1.1rem 1.2rem 1.15rem;
  color: var(--text);
  background: rgba(12, 5, 30, 0.88);
  border: 1px solid rgba(0, 229, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 60, 172, 0.2), 0 22px 44px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}
.el-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.el-tile {
  width: 88px; aspect-ratio: 1;
  display: grid; grid-template-rows: auto 1fr auto; padding: 0.35rem 0.45rem;
  border: 2px solid var(--neon-cyan); border-radius: 8px;
  background: radial-gradient(circle at 50% 60%, rgba(255, 60, 172, 0.25), transparent 70%), #12062a;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.35);
  font-variant-numeric: tabular-nums;
}
.el-z { font-size: 0.85rem; color: var(--text-dim); }
.el-sym { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; text-align: center; align-self: center; color: #fff; }
.el-m { font-size: 0.8rem; color: var(--text-dim); text-align: right; }
.element h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; color: #fff; }
.el-cat { margin: 0.2rem 0 0; color: var(--neon-cyan); font-size: 0.9rem; }
.el-data {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1rem;
  margin: 1rem 0 0.9rem;
}
.el-data div { min-width: 0; border-top: 1px solid rgba(177, 74, 237, 0.35); padding-top: 0.35rem; }
.el-data dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.el-data dd { margin: 0.1rem 0 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.el-why { margin: 0 0 0.5rem; font-size: 0.92rem; color: var(--text-dim); }
.el-why strong { color: var(--text); }
.el-model { margin: 0; font-family: var(--font-pixel); font-size: 1.05rem; color: var(--neon-pink); }

/* ---------------------------------------------------- panels */

/* Dark glass cards in the site's own card language. Deliberately no fake
   title bars, window buttons or ".exe" names: OS-style pop-ups read as
   scareware, and this is a safety business. */
.panel {
  position: relative;
  min-width: 0;
  padding: 1.4rem 1.4rem 1.5rem;
  color: var(--text);
  background: linear-gradient(180deg, rgba(26, 9, 54, 0.9), rgba(12, 5, 30, 0.9));
  border: 1px solid rgba(177, 74, 237, 0.55);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.08), 0 22px 44px rgba(5, 0, 15, 0.5);
  backdrop-filter: blur(8px);
  z-index: 1;
}
.panel::before {
  content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: -1px; height: 2px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  border-radius: 2px;
}
.panel-tag {
  margin: 0 0 0.5rem;
  font-family: var(--font-pixel); font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--neon-cyan);
}
.panel h2 {
  margin: 0 0 0.7rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.45rem; line-height: 1.2; color: #fff; text-wrap: balance;
}
.panel h3 { margin: 0 0 0.25rem; font-size: 1.02rem; color: #fff; }
.panel p { margin: 0 0 0.8rem; line-height: 1.6; color: var(--text-dim); }
.panel p:last-child { margin-bottom: 0; }
.panel a:not(.btn) { color: var(--neon-cyan); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.panel-actions .btn { padding: 0.75rem 1.2rem; }

/* Welcome */
.w-kicker { margin: 0 0 0.15rem !important; font-family: var(--font-pixel); font-size: 1.15rem; letter-spacing: 0.1em; color: var(--neon-purple) !important; }
.panel h2.chrome {
  margin: 0 0 0.25rem;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.05;
  font-style: italic;
  background: linear-gradient(180deg, #7fd6ff 0%, #e8fbff 46%, #ffffff 50%, #ff9ad6 56%, #b14aed 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(177, 74, 237, 0.45));
}
.w-sub { margin: 0 0 0.9rem !important; font-family: var(--font-pixel); font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text) !important; }
.w-notice {
  margin: 1rem 0;
  padding: 0.8rem 0.95rem;
  background: rgba(255, 209, 102, 0.08);
  border: 1px solid rgba(255, 209, 102, 0.5);
  border-radius: 10px;
}
.w-notice p { margin: 0 0 0.4rem; }
.w-notice-h { font-family: var(--font-pixel); font-size: 1.2rem; text-transform: uppercase; color: var(--neon-yellow) !important; }
.w-hours { font-family: var(--font-pixel); font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* Why radon */
.why-list { display: grid; gap: 1.05rem; }
.why-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.why-ico {
  display: grid; place-items: center; width: 52px; height: 52px;
  background: rgba(0, 229, 255, 0.06); border: 1px solid rgba(0, 229, 255, 0.35); border-radius: 12px;
}
.why-ico img { width: 34px; height: 34px; }
.why-item p { margin: 0; font-size: 0.95rem; }

/* We also do */
.dir-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.dir-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center;
  padding: 0.7rem 0.85rem;
  color: var(--text) !important; text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(177, 74, 237, 0.35);
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.dir-list a:hover, .dir-list a:focus-visible { border-color: var(--neon-cyan); background: rgba(0, 229, 255, 0.07); }
.dir-main { display: grid; min-width: 0; }
.dir-main b { font-size: 1rem; }
.dir-main span { font-size: 0.88rem; color: var(--text-dim); }
.dir-tag {
  font-family: var(--font-pixel); font-size: 1rem; text-transform: uppercase;
  padding: 0 0.4rem; border-radius: 4px; color: #1a1100; background: var(--neon-yellow);
}
.dir-tag.is-open { color: #00222a; background: #7ff0ff; }

/* Myths */
.myth-list { display: grid; gap: 0.45rem; }
.myth-list details { border: 1px solid rgba(177, 74, 237, 0.35); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.myth-list summary {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  font-weight: 500; color: var(--text);
  cursor: pointer; list-style: none;
}
.myth-list summary::-webkit-details-marker { display: none; }
.myth-list summary::before {
  content: "MYTH"; flex: none;
  font-family: var(--font-pixel); font-size: 0.95rem; letter-spacing: 0.06em;
  padding: 0 0.35rem; border-radius: 3px; color: #2a0016; background: var(--neon-pink);
}
.myth-list details[open] summary { color: var(--text-dim); }
.myth-list details[open] summary::before { content: "FACT"; color: #00222a; background: var(--neon-cyan); }
.myth-list summary:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; border-radius: 10px; }
.myth-list details p { margin: 0; padding: 0 0.85rem 0.8rem; font-size: 0.95rem; }

/* call to action */
.panel-cta {
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 60, 172, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(26, 9, 54, 0.92), rgba(12, 5, 30, 0.92));
  border-color: rgba(255, 60, 172, 0.6);
}
.panel-cta p { max-width: 46rem; margin-left: auto; margin-right: auto; }
.panel-cta .panel-actions { justify-content: center; }

/* contact: stays above the ink layer (z 45) */
.panel-contact { z-index: 46; display: grid; gap: 1.4rem; padding-block: 1.8rem; }
.panel-contact .contact-form { max-width: none; margin: 0; }
.panel-contact .direct-contact { margin: 0; text-align: left; }

/* ---------------------------------------------------- ink overlay */

.ink-layer {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 45;
  mix-blend-mode: screen;
}

/* ---------------------------------------------------- layout steps */

@media (max-width: 699px) {
  .vhs { font-size: 1.1rem; top: 4.4rem; }
}

@media (min-width: 700px) {
  .desk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "altar altar"
      "welcome why"
      "also myths"
      "waitlist waitlist"
      "contact contact";
  }
  .panel-cta, .panel-contact { justify-self: center; width: min(100%, 860px); }
  .panel-contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}

@media (min-width: 1100px) {
  .desk-grid {
    column-gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px) minmax(0, 1fr);
    grid-template-areas:
      "welcome altar why"
      "also altar myths"
      "waitlist waitlist waitlist"
      "contact contact contact";
  }
}

.panel { scroll-margin-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
  .hud-panel, .hud-spark polyline, .dh-tag.is-focus .dh-tag-body { animation: none; }
  .hud-spark polyline { stroke-dashoffset: 0; }
}