/* Base */
:root{
  --bg:#0f0a14;
  --panel:#1b141f;
  --ink:#ead8ff;
  --mute:#bca8d6;
  --glow: 255 120 255; /* purple glow */
  --gold: 255 214 120;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background: radial-gradient(1200px 800px at 50% -10%, #1a1023 0%, var(--bg) 55%) fixed;
  color:var(--ink); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
.wrap{ max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem; }

/* Header */
.header h1{ font-size: clamp(2rem, 2.6vw + 1.2rem, 3rem); margin:.25rem 0 .25rem; letter-spacing:.5px }
.lede{ color:var(--mute); margin:.25rem 0 1rem }
.back{
  display:inline-block; padding:.35rem .7rem; border-radius:999px; text-decoration:none; color:var(--ink);
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.03);
}
.back:hover{ box-shadow:0 0 0 2px rgba(255,255,255,.06) inset }

/* Cards / sections */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.05)), var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:1.1rem 1.1rem; margin: 1.1rem 0 1.1rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.35), 0 0 24px rgba(var(--glow)/.08);
}
.card h2{ margin:.2rem 0 .4rem; font-size:1.25rem }

/* Figure */
.figure{
  margin:.8rem 0; border-radius:16px; overflow:hidden;
  background:#0b0710; border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 40px rgba(130,80,255,.12);
}
.figure img{ width:100%; height:auto; display:block; }
.caption{ color:var(--mute); font-size:.9rem; text-align:center; padding:.5rem .75rem }

/* Layout helper for side-by-side image + text if we want later */
.slice{ display:grid; gap:1rem }
@media (min-width: 820px){
  .slice{ grid-template-columns: 1.15fr .85fr; align-items:start }
}

/* Foot */
.footnote{ color:var(--mute); text-align:center; padding-bottom:2rem }

/* Emphasis */
hr.cut{ border:none; height:1px; background:
  linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0)); margin:1rem 0 }
.highlight{ color: rgb(var(--glow)); text-shadow:0 0 18px rgba(var(--glow)/.35) }
.gold{ color: rgb(var(--gold)); text-shadow:0 0 16px rgba(255,214,120,.25) }

.resonance-divider {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 2rem 0;
}

.resonance-divider span {
  width: 40px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #6a0dad, #00bfff, #32cd32);
  animation: pulse 3s infinite ease-in-out;
}

.resonance-divider span:nth-child(2) {
  animation-delay: 0.5s;
}
.resonance-divider span:nth-child(3) {
  animation-delay: 1s;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scaleX(0.9); }
  50% { opacity: 1; transform: scaleX(1.1); }
}


.resonance-trilogy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;   /* space between items */
  margin: 4rem auto;
  max-width: 1200px;
  text-align: center;
}

.resonance-trilogy .breach-button {
  flex: 1 1 300px;   /* each button scales but keeps min width */
  max-width: 350px;  /* cap size so they look consistent */
}

.resonance-trilogy img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}


.trilogy-credits {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: #d8b4fe; /* soft purple */
  text-align: center;
  line-height: 1.6;
}
.trilogy-credits em {
  color: #a5f3fc; /* cyan accent for models */
}