/* ============================================================
   mOment · Design Tokens v7.0.0-draft
   Faber Courtial · 2026-08-11
   Quelle: mOment CI v7 (Entwurf).md
   ============================================================ */

:root {
  /* --- Void · Hintergrund ------------------------------------ */
  --mo-void:        #060504;
  --mo-card:        #0C0A07;
  --mo-lift:        #111009;
  --mo-soft:        #1A160E;

  /* --- Gold · Akzent ----------------------------------------- */
  --mo-gold-light:  #E8D9A8;  /* 13.40 : 1 */
  --mo-gold:        #C9A84C;  /*  8.91 : 1 · Text erlaubt */
  --mo-gold-ui:     #745D24;  /*  3.23 : 1 · nur non-text UI */
  --mo-gold-dark:   #6A5520;  /*  2.84 : 1 · nur Gradient-Bottom */
  --mo-gold-deep:   #3A2E10;

  /* --- Neutrals · Text --------------------------------------- */
  --mo-warm-white:  #F2EDE4;  /* 17.46 : 1 */
  --mo-cream:       #E6DFD0;  /* 15.35 : 1 */
  --mo-dim-light:   #8A7A60;  /*  4.88 : 1 · Standard Kleintext */
  --mo-dim-ui:      #665A48;  /*  3.03 : 1 · Rahmen, Trenner */
  --mo-dim:         #5A5040;  /*  2.58 : 1 · NIE Text im Web */

  /* --- Patina · Default = Rom -------------------------------- */
  --mo-patina:       #B87333;
  --mo-patina-light: #C48B56;
  --mo-patina-memb:  #68421E;

  /* --- Typografie -------------------------------------------- */
  --mo-font-display:   'Cormorant Garamond', Georgia, serif;
  --mo-font-interface: 'Josefin Sans', system-ui, -apple-system, sans-serif;
  --mo-font-cjk:       'Noto Sans SC', sans-serif;

  --mo-size-hero:       clamp(44px, 9vw, 120px);
  --mo-size-display:    clamp(32px, 4.4vw, 48px);
  --mo-size-episode:    clamp(24px, 2.6vw, 30px);
  --mo-size-lead:       clamp(19px, 1.8vw, 22px);
  --mo-size-body:       clamp(17px, 1.3vw, 18px);
  --mo-size-coordinate: clamp(11px, 1.1vw, 12px);
  --mo-size-label:      12px;

  --mo-track-hero:       0.13em;
  --mo-track-coordinate: 0.26em;
  --mo-track-label:      0.20em;

  --mo-leading-body:  1.7;
  --mo-leading-title: 1.3;

  /* --- Spacing · 8pt ----------------------------------------- */
  --mo-space-xs:   4px;
  --mo-space-sm:   8px;
  --mo-space-md:  16px;
  --mo-space-lg:  24px;
  --mo-space-xl:  40px;
  --mo-space-xxl: 64px;
  --mo-space-xxxl:96px;

  /* --- Layout ------------------------------------------------ */
  --mo-measure: 720px;
  --mo-gutter:   24px;
  --mo-radius:    2px;

  /* --- Linie ------------------------------------------------- */
  --mo-line-primary:   rgba(201, 168, 76, 0.60);
  --mo-line-secondary: rgba(201, 168, 76, 0.30);
  --mo-line-backdrop:  rgba(201, 168, 76, 0.14);

  /* --- Bewegung ---------------------------------------------- */
  --mo-atem:  5.2s;
  --mo-fade:  1.2s;
  --mo-drift: 8s;
  --mo-ease:  cubic-bezier(.22, .6, .36, 1);

  /* --- Portal ------------------------------------------------ */
  --mo-portal-ring-width: 4.8%;
  --mo-portal-breath:     5.2s;
}

/* ============================================================
   Patina-Themes · pro Episode
   Ring bleibt IMMER Gold — Patina wirkt nur in Membran,
   Linien, Schimmer und Beschriftung.
   ============================================================ */

[data-patina="rome"]        { --mo-patina:#B87333; --mo-patina-light:#C48B56; --mo-patina-memb:#68421E; }
[data-patina="thebes"]      { --mo-patina:#2D6A8C; --mo-patina-light:#54849E; --mo-patina-memb:#1B3D4F; }
[data-patina="blackforest"] { --mo-patina:#7A6A4A; --mo-patina-light:#928469; --mo-patina-memb:#463D2A; }
[data-patina="edo"]         { --mo-patina:#8B3A3A; --mo-patina-light:#AA706D; --mo-patina-memb:#4F2222; }
[data-patina="ruhr"]        { --mo-patina:#4A4A3A; --mo-patina-light:#7C7B6D; --mo-patina-memb:#2B2B22; }

/* ============================================================
   Basis
   ============================================================ */

.mo-root {
  background: var(--mo-void);
  color: var(--mo-warm-white);
  font-family: var(--mo-font-display);
  font-size: var(--mo-size-body);
  font-weight: 400;
  line-height: var(--mo-leading-body);
  -webkit-font-smoothing: antialiased;
}

/* Textbreite waechst nicht mit dem Viewport — die Leere waechst. */
.mo-measure {
  max-width: var(--mo-measure);
  margin-inline: auto;
  padding-inline: var(--mo-gutter);
}

/* ============================================================
   Typografie-Rollen
   ============================================================ */

.mo-hero {
  font-family: var(--mo-font-interface);
  font-weight: 100;
  font-size: var(--mo-size-hero);
  letter-spacing: var(--mo-track-hero);
  line-height: 1;
}

.mo-display {
  font-family: var(--mo-font-display);
  font-weight: 300;
  font-size: var(--mo-size-display);
  letter-spacing: 0.02em;
  line-height: var(--mo-leading-title);
}

.mo-episode-title {
  font-family: var(--mo-font-display);
  font-weight: 300;
  font-size: var(--mo-size-episode);
  letter-spacing: 0.02em;
  line-height: var(--mo-leading-title);
  color: var(--mo-cream);
}

.mo-lead {
  font-family: var(--mo-font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--mo-size-lead);
  line-height: 1.6;
  color: var(--mo-cream);
}

.mo-body { font-size: var(--mo-size-body); font-weight: 400; }

.mo-coordinate {
  font-family: var(--mo-font-interface);
  font-weight: 300;
  font-size: var(--mo-size-coordinate);
  letter-spacing: var(--mo-track-coordinate);
  text-transform: uppercase;
  color: var(--mo-gold);
}

.mo-coordinate--patina { color: var(--mo-patina-light); }

.mo-label {
  font-family: var(--mo-font-interface);
  font-weight: 300;
  font-size: var(--mo-size-label);
  letter-spacing: var(--mo-track-label);
  text-transform: uppercase;
  color: var(--mo-dim-light);
}

/* ============================================================
   Portal · Wortmarke
   ============================================================ */

.mo-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--mo-font-interface);
  font-weight: 100;
  letter-spacing: var(--mo-track-hero);
  line-height: 1;
  color: var(--mo-warm-white);
}

.mo-portal {
  position: relative;
  flex: 0 0 auto;
  width: 1.02em;
  height: 1.02em;
  margin: 0 0.06em;
  border-radius: 50%;
  border: 0.049em solid var(--mo-gold);   /* Ring IMMER Gold */
  background: transparent;
  animation: mo-breath var(--mo-portal-breath) ease-in-out infinite;
}

/* Lichtsaum statt simulierter Membran.
   WICHTIG: Die Membran wird im Web NICHT mit CSS nachgebaut —
   konzentrische Gradienten erzeugen Moire und wirken billig.
   Echte Membran nur als gerendertes Asset im Hero (.mo-portal--hero). */
.mo-portal::before {
  content: "";
  position: absolute;
  inset: 0.06em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%,
    color-mix(in srgb, var(--mo-patina) 22%, transparent) 0%,
    transparent 68%);
}

/* Rim-Arc — einseitiger Lichtsaum, wie Licht auf einer Seifenblase */
.mo-portal::after {
  content: "";
  position: absolute;
  inset: -0.012em;
  border-radius: 50%;
  border: 0.012em solid transparent;
  border-top-color: var(--mo-gold-light);
  border-right-color: color-mix(in srgb, var(--mo-gold-light) 40%, transparent);
  opacity: .55;
  transform: rotate(-24deg);
}

/* Reduktionsstufe: reiner Ring — unter 16 px und in Favicon, Footer, Karten */
.mo-portal--bare::before,
.mo-portal--bare::after { display: none; }

/* Hero: Platz fuer das gerenderte Membran-Asset (Loop-Video oder WebGL).
   Genau eine Instanz pro Seite. */
.mo-portal--hero { overflow: hidden; }
.mo-portal--hero video,
.mo-portal--hero canvas,
.mo-portal--hero img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@keyframes mo-breath {
  0%, 100% { transform: scale(1);     }
  50%      { transform: scale(1.018); }
}

/* ============================================================
   Navigation
   ============================================================ */

.mo-nav { display: flex; gap: var(--mo-space-xl); align-items: center; }

.mo-nav a {
  font-family: var(--mo-font-interface);
  font-weight: 300;
  font-size: var(--mo-size-label);
  letter-spacing: var(--mo-track-label);
  text-transform: uppercase;
  color: var(--mo-dim-light);
  text-decoration: none;
  padding-bottom: var(--mo-space-sm);
  border-bottom: 1px solid transparent;
  transition: color var(--mo-fade) var(--mo-ease),
              border-color var(--mo-fade) var(--mo-ease);
}

.mo-nav a:hover,
.mo-nav a[aria-current="page"] {
  color: var(--mo-gold);
  border-bottom-color: var(--mo-line-primary);
}

/* ============================================================
   Buttons · ausschliesslich Outline, nie gefuellt
   ============================================================ */

.mo-btn {
  display: inline-block;
  font-family: var(--mo-font-interface);
  font-weight: 300;
  font-size: var(--mo-size-label);
  letter-spacing: var(--mo-track-label);
  text-transform: uppercase;
  color: var(--mo-gold);
  background: transparent;
  border: 1px solid var(--mo-gold-ui);
  border-radius: var(--mo-radius);
  padding: var(--mo-space-md) var(--mo-space-xl);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--mo-fade) var(--mo-ease),
              color var(--mo-fade) var(--mo-ease);
}

.mo-btn:hover { border-color: var(--mo-gold); color: var(--mo-gold-light); }

.mo-btn:focus-visible {
  outline: 2px solid var(--mo-gold);
  outline-offset: 2px;
}

.mo-btn[disabled] {
  color: var(--mo-dim-light);
  border-color: var(--mo-dim-ui);
  cursor: not-allowed;
}

/* ============================================================
   Episoden-Karte
   ============================================================ */

.mo-card {
  background: var(--mo-card);
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: var(--mo-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--mo-fade) var(--mo-ease);
}

.mo-card:hover { border-color: var(--mo-line-secondary); }

.mo-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--mo-patina-memb);
}

.mo-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 5, 4, 0.35) 0%,
    rgba(6, 5, 4, 0.80) 100%);
}

.mo-card__body { padding: var(--mo-space-lg); }

/* ============================================================
   Register B · Akquise
   Naeher und konkreter als der Kern — nicht lauter.
   ============================================================ */

/* Die Frage — Stimme, nie Beschriftung. Niemals Versalien. */
.mo-question {
  font-family: var(--mo-font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--mo-size-lead);
  line-height: 1.5;
  color: var(--mo-warm-white);
}

/* Zeitgenosse — Name und Rolle */
.mo-witness {
  font-family: var(--mo-font-interface);
  font-weight: 300;
  font-size: var(--mo-size-label);
  letter-spacing: var(--mo-track-label);
  text-transform: uppercase;
  color: var(--mo-patina-light);
}

.mo-witness__role {
  font-family: var(--mo-font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mo-dim-light);
}

/* Rekonstruktions-Kennzeichnung — Pflicht bei erfundenen Zeitgenossen */
.mo-reconstructed {
  display: inline-block;
  font-family: var(--mo-font-interface);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mo-dim-light);
  border: 1px solid var(--mo-dim-ui);
  border-radius: var(--mo-radius);
  padding: 3px 8px;
}

/* Vertikale Kachel · 9:16 — das primaere Erstkontakt-Format */
.mo-vertical {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--mo-void);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--mo-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--mo-space-lg);
}

/* Patina in Register B deutlich kraeftiger: bis 20 % */
.mo-vertical__ground {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,5,4,.15) 0%, rgba(6,5,4,.92) 78%),
    radial-gradient(ellipse at 50% 42%,
      color-mix(in srgb, var(--mo-patina) 60%, transparent) 0%,
      var(--mo-patina-memb) 55%, var(--mo-void) 100%);
}

.mo-vertical__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mo-space-md);
  height: 100%;
  text-align: center;
}

.mo-vertical__spacer { flex: 1; }

/* ============================================================
   Zitat
   ============================================================ */

.mo-quote {
  border-left: 1px solid var(--mo-line-primary);
  padding-left: var(--mo-space-lg);
  font-style: italic;
  font-weight: 300;
  color: var(--mo-cream);
}

/* ============================================================
   Trenner
   ============================================================ */

.mo-rule        { height: 1px; background: var(--mo-line-secondary); border: 0; }
.mo-rule--patina{ height: 1px; background: var(--mo-patina); border: 0; opacity: .8; }

/* ============================================================
   Barrierefreiheit
   ============================================================ */

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

@media (prefers-reduced-motion: reduce) {
  /* Atem bleibt — Stroemung entfaellt */
  .mo-portal { animation-duration: 8s; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
  .mo-portal { animation-duration: 8s !important; }
}