/* mudscryer.org — one page, no framework.
   Colors are the exocortex's own: postDawn (light) and twilight (dark) from
   the app's sky theme (skeleton frontend/src/theme/palettes.ts); the accent
   is the Terrain heat ramp's "just edited" red. Mobile-first; nothing under
   12px; every tap target at least 40px tall. */

:root {
  --bg: #aba3b2;
  --card: #b8b1c2;
  --text: #1a1815;
  --text-2: #2a2522;
  --muted: rgba(30, 25, 20, 0.6);
  --border: #888391;
  --accent: #cd3131;
  --accent-ink: #fff;
  --mono: 'Berkeley Mono', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14101e;
    --card: #1e1830;
    --text: #ddd0e8;
    --text-2: rgba(200, 185, 220, 0.75);
    --muted: rgba(170, 155, 190, 0.5);
    --border: #2e2545;
    --accent: #f14c4c;
    --accent-ink: #14101e;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
}
.skip:focus { left: 8px; }

/* --- Hello --------------------------------------------------------------- */
.hello {
  max-width: 44rem;
  margin: 0 auto;
  padding: 40px 16px 24px;
}
.mark {
  margin: 0 0 14px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 18px;
}
h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.lede {
  margin: 0 0 12px;
  font-size: clamp(19px, 3.6vw, 24px);
  line-height: 1.35;
  font-weight: 500;
}
.sub {
  margin: 0 0 8px;
  color: var(--text-2);
}
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--card) 60%, transparent);
}
.jump a:hover { border-color: var(--text); color: var(--text); }

/* --- Sections ------------------------------------------------------------ */
main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 16px 48px;
}
.section {
  padding: 32px 0;
  border-top: 1px solid var(--border);
}
h2 {
  margin: 0 0 6px;
  font-size: 13px;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tagline {
  margin: 0 0 14px;
  font-size: clamp(22px, 4.5vw, 28px);
  line-height: 1.2;
  font-weight: 600;
}
.section p { margin: 0 0 16px; color: var(--text-2); }
.section p:last-child { margin-bottom: 0; }
.section em { color: var(--text); }

/* --- Terrain: the live card, front and center --------------------------- */
.terrain { padding-top: 40px; }
.shot {
  margin: 0 0 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.shot figcaption {
  padding: 10px 12px;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
}
.video { margin: 0 0 20px; }
.video video { width: 100%; border-radius: 10px; border: 1px solid var(--border); }

/* --- Call to action ------------------------------------------------------ */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
}
.cta:hover { filter: brightness(1.08); }
.cta-note {
  font-size: 13px;
  color: var(--muted);
}

/* --- Contact ------------------------------------------------------------- */
.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  text-decoration: none;
  color: var(--text);
}
.links a:hover { border-color: var(--accent); }
@media (min-width: 640px) {
  .links { flex-direction: row; flex-wrap: wrap; }
}

/* --- Footer -------------------------------------------------------------- */
.foot {
  max-width: 44rem;
  margin: 0 auto;
  padding: 16px 16px 40px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.foot .dim { opacity: 0.8; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- The live card -------------------------------------------------------
   #live-card (see the script at the foot of index.html). The frame keeps the
   screenshot's 16:10; the iframe lies over the poster and fades in once it
   has loaded. Until the visitor taps (touch screens) the iframe takes no
   pointer events, so the page scrolls past it like anything else. */
.live-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0b0812;
  overflow: hidden;
}
.shot.live .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transition: opacity 600ms ease;
}
.shot.live.missing .poster { opacity: 0; height: 100%; }
/* Until the map arrives (or a poster exists): a dark frame with a few faint
   dots, drawn INSIDE the frame box. */
.shot.live.missing .live-frame::before {
  content: 'loading the map';
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(221, 208, 232, 0.6);
  background:
    radial-gradient(circle at 30% 40%, rgba(241, 76, 76, 0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 58%, rgba(241, 76, 76, 0.35) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 30%, rgba(221, 208, 232, 0.25) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 75% 32%, rgba(221, 208, 232, 0.25) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 22% 70%, rgba(221, 208, 232, 0.25) 0 1.5px, transparent 2.5px),
    #14101e;
}
.shot.live iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.shot.live.is-live iframe { opacity: 1; }
.shot.live.is-live .poster { opacity: 0; }
.shot.live.is-active iframe { pointer-events: auto; }
.shot.live.missing.is-live .live-frame::before { content: none; }

.live-tap,
.live-release {
  position: absolute;
  z-index: 2;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(221, 208, 232, 0.35);
  background: rgba(20, 16, 30, 0.78);
  color: #ddd0e8;
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.live-tap {
  left: 12px;
  bottom: 12px;
  padding: 0 14px;
}
.live-release {
  right: 12px;
  top: 12px;
  width: 40px;
  font-size: 16px;
}
.live-tap[hidden],
.live-release[hidden] { display: none; }

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .shot.live iframe, .shot.live .poster { transition: none; }
}