:root {
  --bg: #f7f4ee; --ink: #1b2440; --ink-soft: #5b6178;
  --accent: #c93c3c; --blue: #1d2bb8; --azure: #2e7df6; --line: #d8d2c6;
  --card-bg: #ffffff; --card-shadow: 0 2px 24px rgba(27,36,64,0.08);
  --gutter: clamp(1.25rem, 4vw, 2.5rem); --max: 1080px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14192b; --ink: #eae6dd; --ink-soft: #a8aec4;
    --accent: #e05555; --blue: #2c3bd4; --azure: #5a9bff; --line: #333c57;
    --card-bg: #1c2238; --card-shadow: 0 2px 24px rgba(0,0,0,0.35);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.6 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--azure); outline-offset: 3px; border-radius: 4px; }
.inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(3rem, 7vw, 4.5rem) 0; }

/* ---------- hero ---------- */
.hero { padding-top: calc(clamp(2rem, 5vw, 3rem) + env(safe-area-inset-top, 0px)); }
.hero-logo img { height: 84px; width: auto; border-radius: 10px; display: block; }
.hero-grid { display: grid; gap: 2.5rem; margin-top: 1rem; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } }
.headline {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--azure);
  font-size: clamp(2rem, 6.5vw, 3.2rem); line-height: 1.12; letter-spacing: -0.015em;
  margin: 1.8rem 0 0; max-width: 14ch;
}
.hero-lines {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-style: normal;
  font-size: clamp(1.2rem, 4vw, 1.6rem); line-height: 1.55; margin-top: 1.8rem;
}
.hero-lines .justus { display: block; font-style: normal; margin-top: 1rem; }
.hero-img { width: 100%; border-radius: 14px; box-shadow: var(--card-shadow); display: block; }
.hero-left .hero-img { margin-top: 2.4rem; }
.caption { text-align: center; margin-top: 0.9rem; font-size: 0.95rem; color: var(--ink-soft); }
.caption strong { color: var(--ink); }

/* ---------- opening ---------- */
.topline { padding: calc(0.9rem + env(safe-area-inset-top, 0px)) 0 0.9rem; }
.topline img { height: 52px; width: auto; border-radius: 6px; display: block; }
.opening { position: relative; height: min(calc(88svh - 70px), 800px); min-height: 520px; overflow: hidden; background: #1b2440; }
.opening-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 49% 35%; }
.opening-over {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top, rgba(12,16,32,0.88) 0%, rgba(12,16,32,0.45) 38%, rgba(12,16,32,0) 62%);
  color: #fff;
}
.opening-top { width: 100%; padding-top: calc(1.4rem + env(safe-area-inset-top, 0px)); }
.opening-top img { height: 64px; width: auto; border-radius: 8px; display: block; box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
.opening-words { width: 100%; padding-bottom: clamp(2rem, 6vw, 3.5rem); }
.opening .headline { color: #fff; margin: 0; max-width: 15ch; font-size: clamp(2.3rem, 6vw, 3.6rem); text-wrap: balance; }
@media (min-width: 820px) { .opening-img { object-position: 22% 35%; } .opening-words { max-width: var(--max); } }
.opening .hero-lines { margin: 1rem 0 0; color: #fff; font-size: clamp(1.15rem, 3.4vw, 1.5rem); }
.opening .hero-lines .justus { display: inline; margin: 0 0 0 0.3em; font-style: normal; }
@media (max-width: 600px) { .opening .hero-lines .justus { display: block; margin: 0.4rem 0 0; } }

/* ---------- map + door ---------- */
.world { background: var(--blue); color: #fff; }
.world-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 820px) { .world-grid { grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(3rem, 7vw, 6rem); } }
.world-fig { margin: 0; }
.world-map { display: block; width: 100%; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); }
.world-fig figcaption { margin-top: 0.9rem; font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; text-align: center; opacity: 0.9; }
.world-q {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(1.8rem, 4.6vw, 3rem); line-height: 1.22; margin: 0; max-width: 16ch; text-wrap: balance;
}
.world .gate { margin-top: 2.2rem; }
.world :focus-visible { outline-color: #fff; }
@media (max-width: 819px) { .world-door { order: -1; text-align: center; } .world-q { margin: 0 auto; } .world-fig { max-width: 420px; margin: 0 auto; } }

/* ---------- signals ---------- */
.signals-head h2, .page-head h1 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(1.9rem, 5.5vw, 2.8rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0;
}
.signals-head p, .page-head p { color: var(--ink-soft); margin: 0.6rem 0 0; max-width: 46ch; }

.rail {
  display: flex; align-items: flex-start; gap: clamp(0.9rem, 2vw, 1.4rem);
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  margin-top: 2rem; padding: 0.5rem var(--gutter) 1.25rem;
  padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  scroll-padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  scrollbar-width: thin;
}
.rail > * { flex: 0 0 clamp(150px, 40vw, 212px); scroll-snap-align: start; }

.wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2.2rem clamp(0.9rem, 2vw, 1.4rem); margin-top: 2.5rem; align-items: start;
}

.sig {
  display: block; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.sig-frame {
  display: block; position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 12px; background: var(--line); box-shadow: var(--card-shadow);
}
.sig-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sig:hover .sig-frame, .sig:focus-visible .sig-frame { outline: 3px solid var(--azure); outline-offset: 3px; }
.sig:focus-visible { outline: none; }
.sig-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 0.75rem; font-family: 'Fraunces', Georgia, serif; font-style: normal;
  font-size: 1rem; line-height: 1.4;
}
.sig-more .sig-frame {
  background: var(--blue); color: #fff; box-shadow: none;
  display: flex; align-items: flex-end; padding: 1.1rem;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.5rem; line-height: 1.15;
}
.sig-more .sig-title { color: var(--ink-soft); font-style: normal; font-family: inherit; font-size: 0.9rem; }
[aria-busy] .sig-frame { box-shadow: none; }

.signals-fallback { max-width: 420px; margin: 2rem auto 0; padding: 0 var(--gutter); }
.signals-fallback iframe { width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 12px; display: block; }

.links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.5rem; font-weight: 600; }
.links a { text-decoration-color: var(--line); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.links a:hover { text-decoration-color: var(--azure); }

/* ---------- question + footer ---------- */
.question { background: var(--blue); color: #fff; text-align: center; }
.question p {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(1.6rem, 5.5vw, 2.6rem); line-height: 1.3; margin: 0 auto; max-width: 22ch;
}
.gate {
  display: inline-block; margin-top: 2.5rem; padding: 0.9rem 1.8rem; border-radius: 999px;
  background: #fff; color: var(--blue); font-weight: 600; text-decoration: none;
}
.gate:hover { background: #eef1ff; }
.question :focus-visible { outline-color: #fff; }
footer { padding: 2.5rem 0 calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
footer .links { margin: 0; justify-content: center; font-weight: 400; color: var(--ink-soft); }

/* ---------- signals page header ---------- */
.topbar { padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)); }
.topbar img { height: 56px; width: auto; border-radius: 8px; display: block; }
.page-head { padding-top: 2.5rem; padding-bottom: 0; }
.page-head .count { margin-top: 1.2rem; font-weight: 600; color: var(--ink); }

/* ---------- player ---------- */
.player {
  position: fixed; inset: 0; z-index: 50; background: rgba(10,13,26,0.97); color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: calc(3.5rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
}
.player[hidden] { display: none; }
.player-body { width: min(92vw, calc((100dvh - 12rem) * 9 / 16)); }
.player-stage { aspect-ratio: 9 / 16; background: #000; border-radius: 12px; overflow: hidden; }
.player-stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-title {
  font-family: 'Fraunces', Georgia, serif; font-style: normal; font-size: 1.05rem; line-height: 1.4;
  margin: 0.9rem 0 0; min-height: 1.4em;
}
.player-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.8rem; }
.player button, .player-yt {
  font: 600 0.9rem/1 'Inter', system-ui, sans-serif; color: #fff; background: rgba(255,255,255,0.12);
  border: 0; border-radius: 999px; padding: 0.7rem 1.1rem; cursor: pointer; text-decoration: none;
}
.player-yt { background: none; padding-inline: 0.4rem; text-decoration: underline; text-underline-offset: 3px; }
.player button:hover { background: rgba(255,255,255,0.22); }
.player-close { position: absolute; top: calc(0.9rem + env(safe-area-inset-top, 0px)); right: 1rem; }
.player :focus-visible { outline-color: #fff; }

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