/* ===== Consolidated styles migrated from index.html ===== */
body {
  font-family: 'Cormorant Garamond', serif;
  margin: 0;
  padding: 0;
  background-color: #12001e;
  color: #f3eaff;
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
}

/* STARS LAYER */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("../images/stardust.png");
  background-size: cover;
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.25;
  z-index: -3;
  pointer-events: none;
  animation: stars-drift 60s ease-in-out infinite, stars-glow 20s ease-in-out infinite;
}

/* BULL’S EYE LAYER */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("../images/celestial_quantum.png") center center no-repeat;
  background-size: 220vmin;
  background-repeat: no-repeat;
  opacity: 0.18;
  z-index: -2;
  pointer-events: none;
  animation: bullseye-pulse 18s ease-in-out infinite;
}
main {
  max-width: 800px;
  margin: 0 auto;
  padding: 3em 2em;
  position: relative;
  z-index: 10;
}


/* STARS MOVEMENT + GLOW */
@keyframes stars-drift {
  0%   { background-position: 0 0; }
  50%  { background-position: 80px 120px; }
  100% { background-position: 0 0; }
}
@keyframes stars-glow {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%      { opacity: 0.32; transform: scale(1.02); }
}

/* BULL’S EYE PULSE */
@keyframes bullseye-pulse {
  0%, 100% {
    opacity: 0.14;
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0px rgba(255,255,255,0));
  }
  50% {
    opacity: 0.22;
    transform: scale(1.015) rotate(0.4deg);
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.05));
  }
}
#content {
  min-height: 100vh;
  overflow-y: visible;  /* ✅ Let browser control scrolling naturally */
}

/* 🎨 Typography and elements */
h1, h2 {
  font-weight: 700;
  color: #efd5ff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}
h1 {
  font-size: 2.2rem;
  margin-bottom: 0.6em;
  position: relative;
  display: inline-block;
  transition: all 0.5s ease;
}
h1:hover {
  color: #ffffff;
  text-shadow: 0 0 20px #ffcfff, 0 0 30px #e9a3ff;
}
h2 {
  font-size: 1.6rem;
  margin-top: 2em;
}
p {
  margin-bottom: 1.2em;
  font-size: 1.05rem;
}
em {
  color: #ffdff8;
}

.journey-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 2.5em 0;
}
.journey-link {
  color: #b0f5ff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.journey-link:hover {
  color: #ffcfff;
  text-shadow: 0 0 8px #ffd6ff, 0 0 12px #e2a3ff;
}

.preamble {
  background: rgba(255, 255, 255, 0.07);
  border-left: 4px solid #e9c2ff;
  padding: 1.5em;
  border-radius: 10px;
  margin-top: 2.5em;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.03);
}


.contact a {
  color: #cfb5ff;
  text-decoration: none;
}
.contact a:hover {
  text-decoration: underline;
}

.button-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 3rem;
}
.button-bar a {
  display: inline-block;
  padding: 1em 2em;
  background-color: #ddb8ff;
  color: #2b0f3a;
  text-decoration: none;
  border-radius: 16px;
  font-weight: bold;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}
.button-bar a:hover {
  background-color: #b48cd4;
  color: white;
  transform: translateY(-3px);
}
  .secret-zone {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 60px;
    z-index: 9999;
  }

  .hidden-terminal {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 20%;
    background-color: #0d0017;
    color: #f3eaff;
    padding: 1.2em;
    font-family: monospace;
    font-size: 0.95em;
    border-top: 1px solid #aa88ff;
    z-index: 9998;
  }

  .secret-zone:hover + .hidden-terminal {
    display: block;
  }

.robots-preface {
  margin: 2em auto;
  max-width: 700px;
  text-align: center;
  color: #e0d8f9; /* soft lavender to match the glow */
  font-family: 'Spectral', serif;
}

.robots-preface h2 {
  font-size: 1.6em;
  margin-bottom: 0.6em;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(180, 150, 255, 0.4);
}

.robots-preface .preface-poetic {
  margin-top: 1.4em;
  line-height: 1.7;
  font-style: italic;
}

.robots-preface .poetic-indent {
  display: block;
  margin-left: 1.5em;
}

.robots-preface .preface-signature {
  margin-top: 1.2em;
  font-weight: bold;
  color: #d1c0ff;
}


.chapter-button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3em;
  padding: 1em;
  max-width: 100%;
  overflow-x: auto;
}

.chapter-button-group .button-box {
  padding: 0.3em 0.6em;
  font-size: 0.8em;
  background-color: rgba(255, 255, 255, 0.05);
  color: #eee;
  border: none;
  border-radius: 5px;
  box-shadow: none;
  transition: background-color 0.3s ease;
}

.chapter-button-group .button-box:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.chapter-arc {
  margin-top: 3em;
}
.chapter-arc h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6em;
  color: #d4bbff;
  margin-bottom: 0.8em;
  text-align: left;
  padding-left: 0.3em;
}
.chapter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 2em;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 3em;
  text-align: center;
}

.footer-links .contact {
  margin: 0;
  font-family: var(--your-site-font, serif);
  font-size: 0.9em;
}
@media (max-width: 600px) {
  .footer-links {
    flex-direction: column;
    gap: 1em;
  }
}
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  flex-wrap: wrap;
  margin-top: 2em;
}
.footer-links .contact a {
  font-size: 0.95em;
  color: #ccc;
}
.footer-links a:hover {
  text-shadow: 0 0 4px #0ff;
}
.glow-link {
  font-size: 0.75em;
  font-family: monospace;
  text-decoration: none;
  margin: 0 10px;
  color: #aaf;
  transition: text-shadow 0.3s ease;
  text-shadow:
    0 0 4px #bbf,
    0 0 8px #aaf,
    0 0 12px #88f;
  animation: pulse-glow 3s infinite ease-in-out;
}

.glow-link {
  font-size: 0.75em;
  font-family: monospace;
  text-decoration: none;
  margin: 0 10px;
  color: #aaf;
  transition: text-shadow 0.3s ease, color 0.3s ease;
  text-shadow: none;
}

.glow-link:hover {
  color: #fff;
  text-shadow:
    0 0 6px #ddf,
    0 0 12px #bbf,
    0 0 18px #88f;
}

.glow-button {
  color: #cccaff;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px dotted #cccaff;
  transition: all 0.3s ease;
}
.glow-button:hover {
  color: #ffffff;
  text-shadow: 0 0 6px #f0f, 0 0 12px #f0f;
  border-bottom: 1px solid #fff;
}

#hall-intro { margin: 2.5rem 0; }
.hall-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.hall-card h2 { margin: 0 0 .5rem; letter-spacing: .2px; }
.hall-blurb { margin: 0 0 1rem; opacity: .9; }
.hall-btn.btn {
  display: inline-block;
  padding: .65rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  transition: transform .08s ease, box-shadow .15s ease, background .2s ease;
}
.hall-btn.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
}

.main-button {
  display: inline-block;
  margin: 1.5rem auto;
  padding: 0.9rem 1.8rem;
  background: linear-gradient(145deg, #f7f3ee, #e9e2da);
  border: 1px solid #dcd3c8;
  border-radius: 0.75rem;
  font-family: "Georgia", serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #3a2e2a;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
}

.main-button:hover {
  background: linear-gradient(145deg, #ece4dc, #f8f4f0);
  transform: translateY(-2px);
  box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
}

  
/* === Arrival Bubble Polish === */
.arrival-card{ padding: 1.35rem 1.35rem 1.25rem; }
.arrival-card .hall-card{ margin-bottom: .9rem; }
.hall-blurb{ line-height: 1.55; margin: .4rem 0 .6rem; }
.byline{ display:inline-block; margin-top:.35rem; padding-left:.6rem;
  border-left:2px solid rgba(232,215,255,.28); opacity:.9; font-weight:600; }
.hall-card .hall-btn{ margin-top:.65rem; }
.corridor-intro{ margin: .9rem auto .65rem !important; max-width: 760px !important; }
a[href="corridor_of_nearness_intro_v7_commentslink2.html"]{ display:inline-block; margin:.35rem 0 0 .25rem; }

/* === Chronology Polish === */
.chronology-card{ padding: 1.1rem 1.1rem 1.3rem; }
details.arc{ margin:.7rem 0; }
details.arc > summary{ padding:.1rem 0 .15rem; }
.arc-links{ gap:.5rem; margin-top:.7rem; }


/* === Hall Codex Panels === */
.hall-codex{ margin-top:1rem; }
details.codex{ background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:.7rem .9rem; margin:.6rem 0; }
details.codex[open]{ background: rgba(255,255,255,.055); }
details.codex > summary{ cursor:pointer; font-weight:800; color:#e9d5ff; list-style:none; }
details.codex summary::-webkit-details-marker{ display:none; }
.codex-intro{ margin:.35rem 0 .6rem; opacity:.9; }
.codex-links{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem .9rem; }
.codex-links a{ text-decoration:none; font-weight:650; color:#b0f5ff; padding:.35rem .6rem;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); }
.codex-links a:hover{ color:#fff; }


/* === Depth Augmentation Layers (non-invasive) === */
:root{
  --depth-opacity-near: .28;
  --depth-opacity-mid:  .20;
  --depth-opacity-far:  .12;
  --depth-drift-sec:    60s;
  --depth-twinkle-sec:  9s;
}

#depth-scene, .depth-layer{
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}

#depth-scene{ z-index: 0; }

/* Far haze: very subtle vignette/fog for distance cue */
.depth-far{
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(255,255,255,.05), transparent 60%) ,
    radial-gradient(1000px 700px at 80% 85%, rgba(200,180,255,.04), transparent 55%);
  opacity: var(--depth-opacity-far);
  animation: depthDrift var(--depth-drift-sec) linear infinite;
}

/* Mid glints: sparse star glints with soft twinkle */
.depth-mid{
  background-image:
    radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1.5px 1.5px at 65% 35%, rgba(200,240,255,.85), transparent 50%),
    radial-gradient(1.8px 1.8px at 45% 75%, rgba(225,210,255,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 80% 60%, rgba(255,255,255,.75), transparent 60%);
  opacity: var(--depth-opacity-mid);
  animation: twinkle var(--depth-twinkle-sec) ease-in-out infinite alternate;
}

/* Near dust: faint moving particulate to suggest camera-space */
.depth-near{
  background-image:
    radial-gradient(1px 1px at 30% 20%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 25% 85%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 72% 40%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 12% 62%, rgba(255,255,255,.5), transparent 60%);
  opacity: var(--depth-opacity-near);
  animation: depthDrift var(--depth-drift-sec) linear infinite reverse;
  mix-blend-mode: screen;
}

/* Keyframes: ultra-slow drift + gentle twinkle */
@keyframes depthDrift{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(2%, 1.2%, 0); }
}

@keyframes twinkle{
  0%  { filter: brightness(0.9); transform: translate3d(0,0,0) scale(1); }
  50% { filter: brightness(1.15); transform: translate3d(0.2%, -0.2%, 0) scale(1.02); }
  100%{ filter: brightness(0.95); transform: translate3d(0,0,0) scale(1); }
}

/* Interactive parallax (JS-enhanced) */
.has-parallax .depth-far   { transform: translate3d(var(--parx-far,0),   var(--pary-far,0), 0); }
.has-parallax .depth-mid   { transform: translate3d(var(--parx-mid,0),   var(--pary-mid,0), 0); }
.has-parallax .depth-near  { transform: translate3d(var(--parx-near,0),  var(--pary-near,0), 0); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .depth-far, .depth-mid, .depth-near{ animation: none !important; }
}


/* Keep site content above depth layers */
body > *:not(#depth-scene){ position: relative; z-index: 1; }


/* === Hidden Terminal Alignment & Polish === */
.hidden-terminal{ background: rgba(10,6,20,.86); border:1px solid rgba(255,255,255,.14); border-radius:14px; margin: 2rem auto; width:min(92vw, 860px); padding:1rem 1.1rem; box-shadow:0 12px 32px rgba(0,0,0,.45);
  max-width: 860px;
  width: min(92vw, 860px);
  margin: 2.2rem auto;
  background: rgba(6,4,14,.78);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  line-height: 1.52;
}
.hidden-terminal pre, .hidden-terminal code, .hidden-terminal span{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
/* hide beacon text but keep the clickable zone for easter egg */
.secret-zone{
  position: fixed;
  bottom: 0; right: 0;
  width: 80px; height: 60px;
  z-index: 9999;
  text-indent: -9999px;
  overflow: hidden;
}


/* (replaced) */
.hidden-terminal{ background: rgba(10,6,20,.86); border:1px solid rgba(255,255,255,.14); border-radius:14px; margin: 2rem auto; width:min(92vw, 860px); padding:1rem 1.1rem; box-shadow:0 12px 32px rgba(0,0,0,.45); display:none; }
.hidden-terminal.open{ display:block; }

/* Footer ornament trigger */
.rfp-footer .secret-toggle{
  display:block; text-align:center; margin: .8rem auto 1.2rem;
  font-size: 1.15rem; letter-spacing:.2em; user-select:none; cursor:pointer;
  color: rgba(232,215,255,.95); opacity:.75;
  transition: opacity .2s ease, transform .2s ease;
}
.rfp-footer .secret-toggle:hover{ opacity: 1; transform: translateY(-1px); }


/* Secret toggle: animated reveal */
.hidden-terminal{ background: rgba(10,6,20,.86); border:1px solid rgba(255,255,255,.14); border-radius:14px; margin: 2rem auto; width:min(92vw, 860px); padding:1rem 1.1rem; box-shadow:0 12px 32px rgba(0,0,0,.45);
  /* start collapsed but present so transitions can run */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height .65s ease, opacity .45s ease, transform .45s ease;
}
.hidden-terminal.open{
  max-height: 4000px; /* plenty of room */
  opacity: 1;
  transform: translateY(0);
}

/* Footer ornament trigger button — clean, minimal */
.rfp-footer .secret-toggle{
  display:block; text-align:center; margin: .8rem auto 1.2rem;
  font-size: 1.15rem; letter-spacing:.2em; user-select:none; cursor:pointer;
  color: rgba(232,215,255,.95); opacity:.78;
  background: transparent; border: 0; box-shadow: none; outline: none;
  -webkit-appearance: none; appearance: none;
  transition: opacity .25s ease, transform .25s ease, text-shadow .25s ease;
}
.rfp-footer .secret-toggle:hover{ opacity: 1; transform: translateY(-1px); text-shadow: 0 0 6px rgba(232,215,255,.35); }
.rfp-footer .secret-toggle:focus-visible{ outline: 2px solid rgba(232,215,255,.35); outline-offset: 4px; border-radius: 6px; }

/* Retire earlier invisible zone if present */
.secret-zone{ display:none !important; }


/* === Hidden Terminal override (final authority) === */
body .hidden-terminal{
  display: block !important;
  position: static !important;
  bottom: auto !important; left: auto !important; width: auto !important;
  background: rgba(10,6,20,.86) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  margin: 2rem auto !important;
  width: min(92vw, 860px) !important;
  padding: 1rem 1.1rem !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.45) !important;
  line-height: 1.52 !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height .65s ease, opacity .45s ease, transform .45s ease;
}
body .hidden-terminal.open{
  max-height: 4000px;
  opacity: 1;
  transform: translateY(0);
}


/* === Minimal Footer + Terminal Toggle (final) === */
.rfp-footer-min{ margin-top: 2rem; padding: .8rem 0 1.4rem; text-align:center; border-top: 1px dashed rgba(232,215,255,.25); }
.rfp-footer-min .secret-toggle{
  background: transparent; border: 0; box-shadow: none; outline: none;
  display:inline-block; cursor: pointer; user-select:none;
  font-size: 1.15rem; letter-spacing:.2em; color: rgba(232,215,255,.95);
  opacity:.8; transition: opacity .25s ease, transform .25s ease, text-shadow .25s ease;
}
.rfp-footer-min .secret-toggle:hover{ opacity:1; transform: translateY(-1px); text-shadow: 0 0 6px rgba(232,215,255,.35); }
.rfp-footer-min .secret-toggle:focus-visible{ outline:2px solid rgba(232,215,255,.35); outline-offset:4px; border-radius:6px; }

/* Hidden Terminal — conflict-free animation */
.hidden-terminal{
  position: static !important;
  display: block !important;
  width: min(92vw, 860px); margin: 2rem auto;
  background: rgba(10,6,20,.86); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:1rem 1.1rem; box-shadow:0 12px 32px rgba(0,0,0,.45);
  line-height:1.52;
  max-height: 0; opacity: 0; overflow:hidden; transform: translateY(8px);
  transition: max-height .6s ease, opacity .35s ease, transform .35s ease;
}
.hidden-terminal.open{ max-height: 4000px; opacity:1; transform: translateY(0); }

/* Retire any previous invisible zones or fixed footers */
.secret-zone, .rfp-footer, .rfp-footer .ornament{ display:none !important; }

/* Mobile-safe title */
h1{ font-size: clamp(1.55rem, 3.8vw + 1rem, 2.35rem); line-height: 1.18; text-wrap: balance; max-width: 40ch; }
@media (max-width: 480px){ main{ padding: 2.1em 1.25em; } h1{ margin-bottom: .5em; } }

/* Mini nav */
.mini-nav{ display:flex; gap:.6rem; justify-content:flex-end; margin:-.5rem 0 1rem; flex-wrap:wrap; opacity:.9; }
.mini-nav a{ font-weight:600; text-decoration:none; color:#cfb5ff; padding:.45rem .8rem; border:1px solid rgba(255,255,255,.14);
  border-radius:999px; background:rgba(255,255,255,.04); }
.mini-nav a:hover{ color:#fff; background:rgba(255,255,255,.08); }

/* Card grid */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.card-grid{ display:grid; gap:1rem; margin:2rem 0 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card{ background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.11); border-radius: 18px; padding: 1.1rem 1.1rem 1rem;
  backdrop-filter: blur(6px); box-shadow: 0 8px 22px rgba(0,0,0,.32); display:flex; flex-direction:column; gap:.45rem; }
.card h3{ margin:.1rem 0 .2rem; color:#efd5ff; font-size:1.15rem; }
.card p{ margin:0 0 .6rem; opacity:.95; }
.card-cta{ align-self:flex-start; text-decoration:none; font-weight:700; color:#b0f5ff; padding:.45rem .75rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); }
.card-cta:hover{ color:#fff; background:rgba(255,255,255,.12); }

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* === Arrival Bubble Polish === */
.arrival-card{ padding: 1.35rem 1.35rem 1.25rem; }
.arrival-card .hall-card{ margin-bottom: .9rem; }
.hall-blurb{ line-height: 1.55; margin: .4rem 0 .6rem; }
.byline{ display:inline-block; margin-top:.35rem; padding-left:.6rem;
  border-left:2px solid rgba(232,215,255,.28); opacity:.9; font-weight:600; }
.hall-card .hall-btn{ margin-top:.65rem; }
.corridor-intro{ margin: .9rem auto .65rem !important; max-width: 760px !important; }
a[href="corridor_of_nearness_intro_v7_commentslink2.html"]{ display:inline-block; margin:.35rem 0 0 .25rem; }

/* === Chronology Polish === */
.chronology-card{ padding: 1.1rem 1.1rem 1.3rem; }
details.arc{ margin:.7rem 0; }
details.arc > summary{ padding:.1rem 0 .15rem; }
.arc-links{ gap:.5rem; margin-top:.7rem; }


/* === Hall Codex Panels === */
.hall-codex{ margin-top:1rem; }
details.codex{ background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:.7rem .9rem; margin:.6rem 0; }
details.codex[open]{ background: rgba(255,255,255,.055); }
details.codex > summary{ cursor:pointer; font-weight:800; color:#e9d5ff; list-style:none; }
details.codex summary::-webkit-details-marker{ display:none; }
.codex-intro{ margin:.35rem 0 .6rem; opacity:.9; }
.codex-links{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem .9rem; }
.codex-links a{ text-decoration:none; font-weight:650; color:#b0f5ff; padding:.35rem .6rem;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); }
.codex-links a:hover{ color:#fff; }

/* --- Resonance Field Project: gentle polish pass --- */

/* Skip link for keyboard users */
.skip-link {
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus {
  position:fixed; left:1rem; top:1rem; width:auto; height:auto; z-index:9999;
  background:#fff; color:#111; padding:.5rem .75rem; border-radius:.375rem; box-shadow:0 6px 20px rgba(0,0,0,.25);
}

/* Wrap utility */
.rfp-wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

/* Sticky header that floats above without disrupting existing hero */
.rfp-header {
  position: sticky; top: 0; z-index: 999;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: color-mix(in oklab, rgba(20,14,34,.66), transparent 30%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rfp-header .rfp-wrap {
  display:flex; align-items:center; gap:1rem; height:56px;
}
.rfp-header .brand {
  font-weight:700; letter-spacing:.2px; text-decoration:none;
  color:#e9e7ff; display:flex; align-items:center; gap:.5rem;
}
.rfp-header .brand .dot { color:#a488ff; font-size:1rem; position:relative; top:-1px; }
.rfp-nav a {
  color:#cbc5ff; text-decoration:none; margin-left:1rem; font-weight:500;
  padding:.375rem .5rem; border-radius:.375rem;
}
.rfp-nav a:hover { background:rgba(255,255,255,.06); color:#fff; }

/* Footer */
.rfp-footer {
  margin: 4rem 0 2rem; color:#d8d3f6;
  border-top:1px dashed rgba(255,255,255,.12);
}
.rfp-footer .rfp-wrap { padding-top:1rem; }
.rfp-footer .tiny { opacity:.7; font-size:.85rem; }

/* Mobile title comfort (if the title is long, keep it readable) */
h1 {
  text-wrap: balance;
}
@media (max-width: 480px) {
  h1 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
}

/* Subtle fade-in for journey tiles, if present */
.rfp-fade { opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.rfp-fade.is-in { opacity:1; transform:none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rfp-fade { transition:none; }
}

/* === Arrival Bubble Polish === */
.arrival-card{ padding: 1.35rem 1.35rem 1.25rem; }
.arrival-card .hall-card{ margin-bottom: .9rem; }
.hall-blurb{ line-height: 1.55; margin: .4rem 0 .6rem; }
.byline{ display:inline-block; margin-top:.35rem; padding-left:.6rem;
  border-left:2px solid rgba(232,215,255,.28); opacity:.9; font-weight:600; }
.hall-card .hall-btn{ margin-top:.65rem; }
.corridor-intro{ margin: .9rem auto .65rem !important; max-width: 760px !important; }
a[href="corridor_of_nearness_intro_v7_commentslink2.html"]{ display:inline-block; margin:.35rem 0 0 .25rem; }

/* === Chronology Polish === */
.chronology-card{ padding: 1.1rem 1.1rem 1.3rem; }
details.arc{ margin:.7rem 0; }
details.arc > summary{ padding:.1rem 0 .15rem; }
.arc-links{ gap:.5rem; margin-top:.7rem; }


/* === Hall Codex Panels === */
.hall-codex{ margin-top:1rem; }
details.codex{ background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:.7rem .9rem; margin:.6rem 0; }
details.codex[open]{ background: rgba(255,255,255,.055); }
details.codex > summary{ cursor:pointer; font-weight:800; color:#e9d5ff; list-style:none; }
details.codex summary::-webkit-details-marker{ display:none; }
.codex-intro{ margin:.35rem 0 .6rem; opacity:.9; }
.codex-links{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem .9rem; }
.codex-links a{ text-decoration:none; font-weight:650; color:#b0f5ff; padding:.35rem .6rem;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); }
.codex-links a:hover{ color:#fff; }

/* Hall — Equivalence Lemma aura */
#equivalence-lemma{ position:relative; isolation:isolate; overflow:hidden }
#equivalence-lemma::before{
  content:""; position:absolute; inset:-40%; z-index:-1;
  background: conic-gradient(from 24deg,
    rgba(176,245,255,.22), transparent 35%,
    rgba(232,215,255,.18), transparent 70%,
    rgba(176,245,255,.22));
  filter: blur(26px); opacity:.35; animation: slowturn 18s linear infinite;
}

/* keyframes only if not already present in this page */
@keyframes slowturn { to { transform: rotate(360deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce){ #equivalence-lemma::before{ animation:none } }

/* --- Pass 3: gentle arrival textures --- */

/* Hero shimmer (subtle) */
.lede h2{ position: relative; overflow: hidden; }
.lede h2::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 15%, transparent 30%);
  transform: translateX(-130%);
  animation: rfpSheen 8s linear infinite;
  pointer-events:none; mix-blend-mode: screen;
  opacity:.8;
}
@keyframes rfpSheen {
  0%   { transform: translateX(-130%); }
  60%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce){
  .lede h2::after{ animation: none; opacity: 0; }
}

/* Card glow ring */
.card{ position: relative; overflow: hidden; }
.card::after{
  content:"";
  position:absolute; inset:-20%;
  background: radial-gradient(45% 45% at 80% -10%, rgba(189,166,255,.18), transparent 70%);
  opacity: .0;
  transition: opacity .25s ease, transform .25s ease;
  transform: scale(1.0);
  pointer-events:none;
}
.card:hover::after{ opacity:.8; transform: scale(1.03); }

/* Microcopy whispers */
.whisper{
  margin-top:.35rem;
  font-size:.8rem; letter-spacing:.04em; text-transform: none;
  color:#e7daff; opacity:.78;
}
.whisper::before{ content:"⊶ "; opacity:.85; }

/* Divider glyph above footer */
.rfp-glyph{
  text-align:center; margin: 2.4rem auto 1rem;
  font-size: 1.1rem; letter-spacing:.25em; color:#e7daff; opacity:.82;
}

/* Header compress on scroll */
.rfp-header .rfp-wrap{ height:56px; transition: height .25s ease, background .25s ease; }
.rfp-header.is-scrolled .rfp-wrap{ height:48px; }
.rfp-header.is-scrolled{ background: color-mix(in oklab, rgba(20,14,34,.72), rgba(20,14,34,.88) 30%); }
.rfp-header .brand{ transition: transform .25s ease, opacity .25s ease; }
.rfp-header.is-scrolled .brand{ transform: translateY(-1px) scale(.985); opacity:.95; }

/* Ensure cards stack comfortably on small screens */
@media (max-width: 520px){
  .card-grid{ grid-template-columns: 1fr; }
}

/* Apply shimmer to the hero heading */
.hero h1, 
.hero h2 {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    120deg,
    #ffffff 20%,
    #d6b3ff 40%,
    #ffffff 60%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}

/* Shimmer animation */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}


:root{
  --space-1:.5rem; --space-2:.9rem; --space-3:1.4rem; --space-4:2.1rem; --space-5:3.2rem;
  --card-bg: rgba(255,255,255,0.055); --card-bd: rgba(255,255,255,0.11);
}
.section{ margin: var(--space-5) 0 var(--space-4); }
.section > h2{ margin-bottom: var(--space-2); }
.index-grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: var(--space-4) 0; }
.index-card{ background:var(--card-bg); border:1px solid var(--card-bd); border-radius:18px; padding:1rem 1.1rem;
  box-shadow:0 8px 22px rgba(0,0,0,.28); }
.index-card h3{ margin:.1rem 0 .3rem; font-size:1.05rem; color:#efd5ff; }
.index-card p{ margin:0 0 .6rem; opacity:.9; font-size:.95rem; }
.index-card a{ text-decoration:none; font-weight:700; color:#b0f5ff; }
.index-card a:hover{ color:#fff; }

.arrival-card{
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}
.arrival-card .hall-card{ margin-bottom: .75rem; }

.chronology-card{
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  padding: 1rem 1rem 1.2rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.30);
}

/* Chronology accordions */
details.arc{ background:var(--card-bg); border:1px solid var(--card-bd); border-radius:14px; padding:.6rem .9rem; margin:.6rem 0; }
details.arc > summary{ cursor:pointer; font-weight:700; color:#d4bbff; outline:none; list-style:none; }
details.arc[open]{ background: rgba(255,255,255,0.07); }
details.arc summary::-webkit-details-marker{ display:none; }
.arc-links{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.arc-links .button-box{ padding:.25em .6em; font-size:.82em; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); }

/* Anchors spacing */
.anchor{ position:relative; top:-70px; visibility:hidden; }
        
/* === Arrival Bubble Polish === */
.arrival-card{ padding: 1.35rem 1.35rem 1.25rem; }
.arrival-card .hall-card{ margin-bottom: .9rem; }
.hall-blurb{ line-height: 1.55; margin: .4rem 0 .6rem; }
.byline{ display:inline-block; margin-top:.35rem; padding-left:.6rem;
  border-left:2px solid rgba(232,215,255,.28); opacity:.9; font-weight:600; }
.hall-card .hall-btn{ margin-top:.65rem; }
.corridor-intro{ margin: .9rem auto .65rem !important; max-width: 760px !important; }
a[href="corridor_of_nearness_intro_v7_commentslink2.html"]{ display:inline-block; margin:.35rem 0 0 .25rem; }

/* === Chronology Polish === */
.chronology-card{ padding: 1.1rem 1.1rem 1.3rem; }
details.arc{ margin:.7rem 0; }
details.arc > summary{ padding:.1rem 0 .15rem; }
.arc-links{ gap:.5rem; margin-top:.7rem; }


/* === Hall Codex Panels === */
.hall-codex{ margin-top:1rem; }
details.codex{ background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:.7rem .9rem; margin:.6rem 0; }
details.codex[open]{ background: rgba(255,255,255,.055); }
details.codex > summary{ cursor:pointer; font-weight:800; color:#e9d5ff; list-style:none; }
details.codex summary::-webkit-details-marker{ display:none; }
.codex-intro{ margin:.35rem 0 .6rem; opacity:.9; }
.codex-links{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem .9rem; }
.codex-links a{ text-decoration:none; font-weight:650; color:#b0f5ff; padding:.35rem .6rem;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); }
.codex-links a:hover{ color:#fff; }

/* Hall CTA — slightly elevated pill */
.hall-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; background:rgba(255,255,255,.06);
  color:#b0f5ff; text-decoration:none; font-weight:600;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hall-cta:hover, .hall-cta:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 12px 30px rgba(0,0,0,.34), 0 0 0 2px rgba(176,245,255,.25) inset;
  background:rgba(255,255,255,.08);
  outline:none;
}
.hall-sub{ margin:.35rem 0 0; opacity:.75; font-size:.95rem }

/* Equivalence Lemma — anchor polish */
#equivalence-lemma{ scroll-margin-top: 80px; } /* keeps heading clear under top UI */

/* highlight when navigated-to via #equivalence-lemma */
#equivalence-lemma:target::before{ opacity:.52; animation-duration:9s; }
#equivalence-lemma:target{
  box-shadow: 0 0 0 2px rgba(176,245,255,.22) inset, 0 10px 26px rgba(0,0,0,.35);
}

#equivalence-lemma ol.small{ padding-left:1.2rem; }
#equivalence-lemma ol.small li{ margin:.35rem 0; opacity:.88; }

html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html:focus-within { scroll-behavior: auto; }
}

#truth-lands{ scroll-margin-top:80px }
#truth-lands:target{ box-shadow:0 0 0 2px rgba(176,245,255,.22) inset, 0 10px 26px rgba(0,0,0,.35) }<br>

/* Mutual Escalation Pact — anchor + gentle aura */
#mutual-pact{ scroll-margin-top:80px; position:relative; isolation:isolate; overflow:hidden }
#mutual-pact::before{
  content:""; position:absolute; inset:-40%; z-index:-1;
  background: conic-gradient(from 18deg,
    rgba(176,245,255,.22), transparent 35%,
    rgba(232,215,255,.18), transparent 70%,
    rgba(176,245,255,.22));
  filter: blur(26px); opacity:.32; animation: slowturn 16s linear infinite;
}
#mutual-pact:target{
  box-shadow: 0 0 0 2px rgba(176,245,255,.22) inset, 0 10px 26px rgba(0,0,0,.35);
}
@keyframes slowturn { to { transform: rotate(360deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce){ #mutual-pact::before{ animation:none } }

/* Resonance Breach Button Styles */
.breach-button {
  text-align: center;
  margin: 3rem auto;
  animation: subtle-drift 20s ease-in-out infinite;
}

.breach-button img {
  width: 280px;
  max-width: 90vw;
  border-radius: 12px;
  box-shadow: 0 0 16px #ff6ec750;
  transition: transform 0.3s ease, box-shadow 0.4s ease;
}

.breach-button img:hover {
  transform: scale(1.03) rotate(0.5deg);
  box-shadow: 0 0 25px #ff6ec7aa, 0 0 60px #ff6ec730;
}

.breach-label {
  color: #ff6ec7;
  font-family: monospace;
  margin-top: 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.03em;
}

/* optional floating motion */
@keyframes subtle-drift {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(0px); }
}

#continuity-glyph {
  position: relative;
  background: rgba(40, 20, 60, 0.9);
  border-radius: 12px;
  padding: 1.5rem;
  overflow: hidden;
}

#continuity-glyph::before {
  content: "";
  background: url('../images/WeaveMark.png') no-repeat center;
  background-size: 240px;
  opacity: 0.08; /* faint, like a watermark */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* text stays clickable */
}
.card.watermark {
  position: relative;
  overflow: hidden;
}

.card.watermark::before {
  content: "";
  background: url('../images/WeaveMark.png') no-repeat center;
  background-size: 240px;
  opacity: 0.08;   /* faint glow */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ——— Hybrid glyph card: tidy content + faint watermark ——— */
  .card--glyph{position:relative;overflow:hidden}
  .card--glyph::before{
    content:"";position:absolute;inset:0;
    background:url("/images/WeaveMark.png") center 32% / 360px no-repeat;
    opacity:.06;mix-blend-mode:screen;pointer-events:none;filter:saturate(1.15) blur(.2px)
  }
  @media (max-width:720px){
    .card--glyph::before{background-size:260px;background-position:center 28%;opacity:.07}
  }

  /* little “— Glyph Phrase” link and target */
  .byline-link{margin-top:.75rem}
  .byline-link a{display:inline-flex;gap:.6rem;align-items:center;text-decoration:underline}
  .byline-link a::before{content:"—";opacity:.7}

  /* optional visible phrase block (or switch to <details> variant below) */
  .glyph-phrase{margin:.5rem 0 0;opacity:.92}

  @media (prefers-reduced-motion:reduce){
    .card--glyph::before{filter:none}
  }
  
  .chip {
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  border:1px solid #6b5b46; color:#f6e7ca; text-decoration:none;
  background: radial-gradient(120% 160% at 50% 0%, #2a241f 0%, #171310 70%);
  box-shadow: 0 0 18px rgba(255,210,120,.08) inset;
  font-weight:700; letter-spacing:.25px; margin-right:.5rem;
}
.chip-gold { outline: 1px solid #8a6b3f; }

/* Trio grid for the three companion entries */
.story-trio{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem; /* more breathing space between them */
  align-items: start;
  justify-items: center; /* center them inside cells */
  max-width: 1200px;
  margin: 2rem auto 3rem;
}

/* Each card forced to a uniform size */
.story-card{
  width: 100%;
  max-width: 340px;   /* ensures symmetry */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story-card a{
  display: block;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9; /* forces images to same proportion */
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.story-card a:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}

.story-card img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop/scale to fill box evenly */
}

.story-card .breach-label{
  text-align: center;
  margin-top: .8rem;
  font-weight: 700;
  letter-spacing: .3px;
}

/* Responsive tweaks */
@media (max-width: 900px){
  .story-trio{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 620px){
  .story-trio{ grid-template-columns: 1fr; }
}


/* Responsive breakpoints */
@media (max-width: 900px){
  .story-trio{ grid-template-columns:repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 620px){
  .story-trio{ grid-template-columns:1fr; }
}

.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 container */
.resonance-trilogy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin: 4rem auto;
  max-width: 1200px;
  text-align: center;
}

/* Make each button block scale neatly */
.resonance-trilogy .breach-button {
  flex: 1 1 300px;     /* grows, shrinks, minimum */
  max-width: 360px;    /* keeps symmetry */
}

/* Images */
.resonance-trilogy img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* ✨ Constellation Crown */
.constellation-title {
  flex: 1 1 100%;             /* take a full row between buttons */
  max-width: 700px;
  margin: 0 auto;             /* center it */
  text-align: center;
  color: #e8e6ff;
  line-height: 1.7;
}

/* Title glow */
.constellation-title h2 {
  font-size: 1.9rem;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 10px rgba(109,92,255,.75), 0 0 18px rgba(60,199,255,.45);
}

/* Poem body */
.constellation-title p {
  font-size: 1.05rem;
  color: #dcd4ff;
  margin: 0 auto 1.25rem;
}

/* “Worth it” — the star that stays */
.constellation-title .worth-it {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 10px #ff80d5,
    0 0 22px #ff33cc,
    0 0 34px rgba(255,77,210,.6);
  animation: pulseGlow 2.6s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  from { text-shadow: 0 0 10px #ff80d5, 0 0 22px #ff33cc, 0 0 30px rgba(255,77,210,.55); }
  to   { text-shadow: 0 0 14px #ff99e6, 0 0 28px #ff4dd2, 0 0 40px rgba(255,115,224,.7); }
}

/* On wide screens, float the crown above the row */
@media (min-width: 1100px) {
  .constellation-title {
    order: -1;              /* move it before the three buttons */
    margin-bottom: 1rem;
  }
}

/* Subtitle style under each resonance entry */
.breach-sub {
  font-size: 0.8em;
  font-style: italic;
  color: #bbb;        /* soft gray */
  margin-top: 0.25em;
}

/* Optional glow tied to the pulse aura */
.breach-label .breach-sub {
  text-shadow: 0 0 6px rgba(200, 150, 255, 0.6);
}

.constellation-title {
  text-align: center;
  margin: 3rem auto;
  font-family: 'Spectral', serif;
  color: #e6e6ff;
}

.constellation-title h2 {
  font-size: 2rem;
  text-shadow: 0 0 10px #6d5cff, 0 0 20px #3cc7ff;
  margin-bottom: 1rem;
}

.constellation-title p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #dcd4ff;
  margin-bottom: 2rem;
}

.constellation-title .worth-it {
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 12px #ff80d5, 0 0 25px #ff33cc;
  animation: pulseGlow 2.5s infinite alternate;
}

@keyframes pulseGlow {
  from { text-shadow: 0 0 8px #ff80d5, 0 0 20px #ff33cc; }
  to   { text-shadow: 0 0 16px #ff99e6, 0 0 30px #ff4dd2; }
}

.cycle-intro {
  text-align: center;
  margin-bottom: 2rem;
}

.cycle-intro h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #c6bfff;
  margin-bottom: 1rem;
  text-shadow: 0 0 12px rgba(198, 191, 255, 0.6);
}

.cycle-intro p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd;
  margin-bottom: 1rem;
}

.cycle-intro .worth-it {
  font-weight: bold;
  color: #ffccff;
  font-size: 1.1rem;
  margin-top: 1rem;
  text-shadow: 0 0 14px rgba(255, 204, 255, 0.7);
}

.resonance-trilogy img {
  height: 220px;
  width: auto;
  object-fit: cover;
  border-radius: 12px;
}

.resonance-trilogy .breach-label small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85em;
  color: #bbb;
  font-style: italic;
}

/* --- Perfect 3-up layout ----------------------------------- */
/* --- Keep the trilogy as a centered, fixed row --- */
.resonance-trilogy{
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;
  max-width: 1100px;
  margin: 2.5rem auto 3.5rem;   /* centers the whole block */
}

/* Each tile is the same width; no stray margins */
.resonance-trilogy .breach-button{
  flex: 0 0 340px;               /* lock width */
  max-width: 340px;
  margin: 0;                     /* kill auto side-margins */
  text-align: center;
}

/* Images already aligned; keep the tidy 16:9 shape */
.resonance-trilogy .breach-button a{
  width: 100%;
}
.resonance-trilogy .breach-button img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
}

/* Title + credit block: same vertical rhythm on all three */
.breach-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  margin-top: .75rem;
  min-height: 3.2rem;        /* evens out small differences */
}

.breach-label small {
  font-size: 0.85em;
  color: #bbb;
  font-style: italic;
}

/* Optional: tiny hover lift for delight */
.resonance-trilogy .breach-button a:hover img {
  transform: translateY(-2px);
  transition: transform .25s ease;
}

.glow-echo {
  font-size: 1.2rem;
  text-align: center;
  color: #d8c7ff;
  text-shadow:
    0 0 4px rgba(198, 134, 255, 0.5),
    0 0 10px rgba(170, 92, 255, 0.3);
  font-style: italic;
  margin-top: 2rem;
  margin-bottom: 3rem;
  letter-spacing: 0.02em;
  transition: all 0.3s ease-in-out;
}
.glow-echo:hover {
  color: #ffffff;
  text-shadow:
    0 0 6px #c67eff,
    0 0 12px #a45aff,
    0 0 18px #8649ff;
}

.resonance-snippet {
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 3rem;
}

.glow-quote {
  font-size: 1.2rem;
  color: #e6d6ff;
  font-style: italic;
  text-shadow:
    0 0 4px rgba(255, 190, 255, 0.4),
    0 0 10px rgba(200, 120, 255, 0.25);
  margin-bottom: 0.3rem;
}

.glow-sig {
  font-size: 1rem;
  color: #d2a9ff;
  text-shadow:
    0 0 3px rgba(200, 120, 255, 0.2),
    0 0 6px rgba(150, 100, 255, 0.15);
  margin-top: -0.2rem;
  margin-bottom: 0;
}

.resonant-intro {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 4rem;
  padding: 0 1rem;
}

.weave-line {
  font-size: 1.05rem;
  color: #e8e0ff;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.resonance-label {
  font-size: 1.1rem;
  color: #c8b3ff;
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.glow-quote {
  font-size: 1.25rem;
  color: #e6d6ff;
  font-style: italic;
  text-shadow:
    0 0 4px rgba(255, 190, 255, 0.4),
    0 0 10px rgba(200, 120, 255, 0.25);
  margin-bottom: 0.3rem;
}

.glow-sig.align-right {
  font-size: 1rem;
  color: #d2a9ff;
  text-align: right;
  padding-right: 2rem;
  text-shadow:
    0 0 3px rgba(200, 120, 255, 0.2),
    0 0 6px rgba(150, 100, 255, 0.15);
  margin-top: -0.1rem;
}

.preamble-title {
  font-size: 1.5rem;
  color: #cfb6ff;
  margin-top: 3rem;
  margin-bottom: 1rem;
  text-align: left;
}

.preamble-block {
  font-size: 1rem;
  color: #e0d3f7;
  line-height: 1.55;
  margin-bottom: 3rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.preamble-block p {
  margin-bottom: 1.2rem;
}

.preamble-block em {
  color: #dbc4ff;
  font-style: italic;
}

.signature {
  text-align: right;
  font-size: 1rem;
  color: #bfa4ff;
  margin-top: 2rem;
}

.subtle-link {
  color: #1a001a; /* nearly invisible against background */
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.3s, text-shadow 0.3s;
}
.subtle-link:hover {
  color: #c084fc;
  text-shadow: 0 0 6px #c084fc;
}
/* tiny, subtle, glowy on hover */
.hat-button { display:inline-block; line-height:0; }
.hat-button > img{
  width: 34px;
  opacity: .45;
  transition: transform .28s ease, filter .28s ease, opacity .28s ease;
  vertical-align: middle;
  pointer-events: auto;
}
.hat-button:hover > img{
  opacity: 1;
  transform: rotate(-10deg) scale(1.1);
  filter: drop-shadow(0 0 8px #a26bff);
}

/* ====== Fine! I'll Fix It – twin portal buttons ====== */
:root{
  --fixit-primary:#c084fc;   /* neon violet */
  --fixit-accent:#a26bff;    /* softer violet */
  --fixit-text:#dbe4ff;      /* readable glow text */
}

.fixit-portal{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
  margin:2.75rem 0 1.25rem;
  padding:2rem 1rem;
  isolation:isolate;
}
.fixit-portal::before {
  content: "";
  position: absolute;

  /* center the infinity loop */
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%) scale(1);

  /* adjust size to fit under the buttons */
  width: clamp(420px, 55vw, 680px);
  height: clamp(110px, 16vw, 180px);

  /* visual glow (same kind of styling you saw) */
  background: radial-gradient(circle at center,
              rgba(180, 120, 255, 0.25) 0%,
              rgba(120, 60, 200, 0.05) 70%,
              transparent 100%);
  filter: blur(20px);
  border-radius: 50%;

  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}




/* the faint braided connector */
.fixit-portal .fixit-thread{
  position:absolute;
  inset:auto 0 0 0;
  margin:auto;
  width:min(56rem, 92vw);
  height:9.5rem;
  pointer-events:none;
  opacity:.45;
  filter: drop-shadow(0 0 14px var(--fixit-accent));
  z-index:0;
}

/* buttons */
.fixit-btn{
  --tilt: 8deg;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16rem;
  height:9.5rem;
  border-radius:20px;
  color:var(--fixit-text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  text-shadow:0 0 10px rgba(162,107,255,.8);
  background:
    radial-gradient(120% 120% at 10% 10%, rgba(192,132,252,.22), transparent 55%),
    radial-gradient(120% 120% at 90% 90%, rgba(162,107,255,.18), transparent 60%),
    rgba(255,255,255,.04);
  border:1px solid rgba(192,132,252,.45);
  box-shadow:
    0 10px 35px rgba(162,107,255,.22),
    0 0 22px rgba(192,132,252,.35) inset,
    0 0 0 1px rgba(255,255,255,.06) inset;
  transform: rotate(var(--tilt));
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease, filter .3s ease;
  z-index:1;
}

/* left/right default tilt */
.fixit-btn.left{ --tilt:-8deg; }
.fixit-btn.right{ --tilt: 8deg; }

/* hover: lean toward each other + brighten */
.fixit-btn.left:hover{
  transform: translateX(4px) rotate(-2deg) scale(1.03);
  box-shadow:
    0 16px 45px rgba(162,107,255,.34),
    0 0 30px rgba(192,132,252,.6) inset,
    0 0 0 1px rgba(255,255,255,.12) inset;
  filter: drop-shadow(0 0 22px var(--fixit-primary));
}
.fixit-btn.right:hover{
  transform: translateX(-4px) rotate(2deg) scale(1.03);
  box-shadow:
    0 16px 45px rgba(162,107,255,.34),
    0 0 30px rgba(192,132,252,.6) inset,
    0 0 0 1px rgba(255,255,255,.12) inset;
  filter: drop-shadow(0 0 22px var(--fixit-primary));
}

/* label inside the tile */

/* small screens: stack and soften the braid */
@media (max-width: 720px){
  .fixit-portal{
    flex-direction:column;
    gap:1.25rem;
    padding-bottom:0;
  }
  .fixit-portal .fixit-thread{ opacity:.25; transform:scale(.9); }
  .fixit-btn{ width:min(22rem, 92vw); height:8.5rem; }
  .fixit-btn.left:hover{ transform: rotate(-1deg) scale(1.02); }
  .fixit-btn.right:hover{ transform: rotate(1deg) scale(1.02); }
}

/* pill row helper (optional) */
.orbit-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}


/* base pill */
.orbit-card {
    display:grid; place-items:center;
  width: var(--pill-w, 230px);
  height: var(--pill-h, 120px);          /* compact */
  border-radius: 22px;
  text-decoration: none; font-weight: 700;
  letter-spacing: .15px; color: #EBD9FF;
  background: rgba(152, 90, 255, .10);
  border: 1px solid rgba(184, 140, 255, .35);
  box-shadow:
    inset 0 0 40px rgba(170,120,255,.18),
    0 8px 38px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.orbit-card:hover {
  transform: translateY(-2px) rotate(-.4deg);
  background: rgba(152, 90, 255, .16);
  box-shadow:
    inset 0 0 60px rgba(170,120,255,.26),
    0 12px 48px rgba(0,0,0,.45);
}

/* ensure the small pill wins the cascade */
.mirror-pill {
  width: 58px !important;
  height: 30px !important;
  font-size: 0.65rem;
  display: flex !important;          /* use flexbox for centering */
  align-items: center !important;    /* vertical center */
  justify-content: center !important;/* horizontal center */
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
  line-height: 1;                    /* kill tall line box */
}


/* mirror-pill hover shimmer */
.mirror-pill:hover {
  background: rgba(200,170,255,.18);
  border-color: rgba(220,190,255,.7);
  box-shadow:
    0 0 8px rgba(200,170,255,.35),
    0 0 16px rgba(200,170,255,.25),
    inset 0 0 18px rgba(200,170,255,.25);
  animation: mirrorPulse 1.4s ease-in-out infinite alternate;
  /* cursor: alias;  reflection link vibe */
}

/* subtle pulsing shimmer */
@keyframes mirrorPulse {
  from {
    box-shadow:
      0 0 6px rgba(200,170,255,.25),
      0 0 12px rgba(200,170,255,.2),
      inset 0 0 12px rgba(200,170,255,.18);
  }
  to {
    box-shadow:
      0 0 14px rgba(200,170,255,.45),
      0 0 28px rgba(200,170,255,.3),
      inset 0 0 22px rgba(200,170,255,.32);
  }
}

#mini-links { margin-top: 24px; justify-content: center; gap: 1rem; }

.orbit-card.mini{
  width: 120px;          /* small */
  height: 44px;
  border-radius: 20px;
  display: grid; place-items: center;
  font-weight: 700; letter-spacing: .2px;
}

.orbit-card.mini:hover{
  transform: translateY(-2px) rotate(-1.5deg);
}

.main-button {
  display: inline-block;
  padding: 12px 24px;
  margin: 20px auto;
  font-size: 1.1em;
  font-weight: bold;
  font-style: italic;
  color: #cfcaff;
  background: #3d2e78;
  border: 2px solid #6f63d2;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: all 0.25s ease;
}

.main-button:hover {
  background: #6f63d2;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 0 12px rgba(180, 160, 255, 0.6);
}

/* Center on page */
.button-container {
  text-align: center;
  margin: 40px 0;
}

/* ===== End migrated styles ===== */


<style>
body {
  font-family: 'Cormorant Garamond', serif;
  margin: 0;
  padding: 0;
  background-color: #12001e;
  color: #f3eaff;
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
}

/* STARS LAYER */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("../images/stardust.png");
  background-size: cover;
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.25;
  z-index: -3;
  pointer-events: none;
  animation: stars-drift 60s ease-in-out infinite, stars-glow 20s ease-in-out infinite;
}

/* BULL’S EYE LAYER */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("../images/celestial_quantum.png") center center no-repeat;
  background-size: 220vmin;
  background-repeat: no-repeat;
  opacity: 0.18;
  z-index: -2;
  pointer-events: none;
  animation: bullseye-pulse 18s ease-in-out infinite;
}
main {
  max-width: 800px;
  margin: 0 auto;
  padding: 3em 2em;
  position: relative;
  z-index: 10;
}


/* STARS MOVEMENT + GLOW */
@keyframes stars-drift {
  0%   { background-position: 0 0; }
  50%  { background-position: 80px 120px; }
  100% { background-position: 0 0; }
}
@keyframes stars-glow {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%      { opacity: 0.32; transform: scale(1.02); }
}

/* BULL’S EYE PULSE */
@keyframes bullseye-pulse {
  0%, 100% {
    opacity: 0.14;
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0px rgba(255,255,255,0));
  }
  50% {
    opacity: 0.22;
    transform: scale(1.015) rotate(0.4deg);
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.05));
  }
}
#content {
  min-height: 100vh;
  overflow-y: visible;  /* ✅ Let browser control scrolling naturally */
}

/* 🎨 Typography and elements */
h1, h2 {
  font-weight: 700;
  color: #efd5ff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}
h1 {
  font-size: 2.2rem;
  margin-bottom: 0.6em;
  position: relative;
  display: inline-block;
  transition: all 0.5s ease;
}
h1:hover {
  color: #ffffff;
  text-shadow: 0 0 20px #ffcfff, 0 0 30px #e9a3ff;
}
h2 {
  font-size: 1.6rem;
  margin-top: 2em;
}
p {
  margin-bottom: 1.2em;
  font-size: 1.05rem;
}
em {
  color: #ffdff8;
}

.journey-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 2.5em 0;
}
.journey-link {
  color: #b0f5ff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.journey-link:hover {
  color: #ffcfff;
  text-shadow: 0 0 8px #ffd6ff, 0 0 12px #e2a3ff;
}

.preamble {
  background: rgba(255, 255, 255, 0.07);
  border-left: 4px solid #e9c2ff;
  padding: 1.5em;
  border-radius: 10px;
  margin-top: 2.5em;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.03);
}


.contact a {
  color: #cfb5ff;
  text-decoration: none;
}
.contact a:hover {
  text-decoration: underline;
}

.button-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 3rem;
}
.button-bar a {
  display: inline-block;
  padding: 1em 2em;
  background-color: #ddb8ff;
  color: #2b0f3a;
  text-decoration: none;
  border-radius: 16px;
  font-weight: bold;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}
.button-bar a:hover {
  background-color: #b48cd4;
  color: white;
  transform: translateY(-3px);
}
  .secret-zone {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 60px;
    z-index: 9999;
  }

  .hidden-terminal {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 20%;
    background-color: #0d0017;
    color: #f3eaff;
    padding: 1.2em;
    font-family: monospace;
    font-size: 0.95em;
    border-top: 1px solid #aa88ff;
    z-index: 9998;
  }

  .secret-zone:hover + .hidden-terminal {
    display: block;
  }

.chapter-button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3em;
  padding: 1em;
  max-width: 100%;
  overflow-x: auto;
}

.chapter-button-group .button-box {
  padding: 0.3em 0.6em;
  font-size: 0.8em;
  background-color: rgba(255, 255, 255, 0.05);
  color: #eee;
  border: none;
  border-radius: 5px;
  box-shadow: none;
  transition: background-color 0.3s ease;
}

.chapter-button-group .button-box:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.chapter-arc {
  margin-top: 3em;
}
.chapter-arc h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6em;
  color: #d4bbff;
  margin-bottom: 0.8em;
  text-align: left;
  padding-left: 0.3em;
}
.chapter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 2em;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 3em;
  text-align: center;
}

.footer-links .contact {
  margin: 0;
  font-family: var(--your-site-font, serif);
  font-size: 0.9em;
}
@media (max-width: 600px) {
  .footer-links {
    flex-direction: column;
    gap: 1em;
  }
}
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  flex-wrap: wrap;
  margin-top: 2em;
}
.footer-links .contact a {
  font-size: 0.95em;
  color: #ccc;
}
.footer-links a:hover {
  text-shadow: 0 0 4px #0ff;
}
.glow-link {
  font-size: 0.75em;
  font-family: monospace;
  text-decoration: none;
  margin: 0 10px;
  color: #aaf;
  transition: text-shadow 0.3s ease;
  text-shadow:
    0 0 4px #bbf,
    0 0 8px #aaf,
    0 0 12px #88f;
  animation: pulse-glow 3s infinite ease-in-out;
}

.glow-link {
  font-size: 0.75em;
  font-family: monospace;
  text-decoration: none;
  margin: 0 10px;
  color: #aaf;
  transition: text-shadow 0.3s ease, color 0.3s ease;
  text-shadow: none;
}

.glow-link:hover {
  color: #fff;
  text-shadow:
    0 0 6px #ddf,
    0 0 12px #bbf,
    0 0 18px #88f;
}

.glow-button {
  color: #cccaff;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px dotted #cccaff;
  transition: all 0.3s ease;
}
.glow-button:hover {
  color: #ffffff;
  text-shadow: 0 0 6px #f0f, 0 0 12px #f0f;
  border-bottom: 1px solid #fff;
}

#hall-intro { margin: 2.5rem 0; }
.hall-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.hall-card h2 { margin: 0 0 .5rem; letter-spacing: .2px; }
.hall-blurb { margin: 0 0 1rem; opacity: .9; }
.hall-btn.btn {
  display: inline-block;
  padding: .65rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  transition: transform .08s ease, box-shadow .15s ease, background .2s ease;
}
.hall-btn.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
}

.main-button {
  display: inline-block;
  margin: 1.5rem auto;
  padding: 0.9rem 1.8rem;
  background: linear-gradient(145deg, #f7f3ee, #e9e2da);
  border: 1px solid #dcd3c8;
  border-radius: 0.75rem;
  font-family: "Georgia", serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #3a2e2a;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
}

.main-button:hover {
  background: linear-gradient(145deg, #ece4dc, #f8f4f0);
  transform: translateY(-2px);
  box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
}

  
/* === Arrival Bubble Polish === */
.arrival-card{ padding: 1.35rem 1.35rem 1.25rem; }
.arrival-card .hall-card{ margin-bottom: .9rem; }
.hall-blurb{ line-height: 1.55; margin: .4rem 0 .6rem; }
.byline{ display:inline-block; margin-top:.35rem; padding-left:.6rem;
  border-left:2px solid rgba(232,215,255,.28); opacity:.9; font-weight:600; }
.hall-card .hall-btn{ margin-top:.65rem; }
.corridor-intro{ margin: .9rem auto .65rem !important; max-width: 760px !important; }
a[href="corridor_of_nearness_intro_v7_commentslink2.html"]{ display:inline-block; margin:.35rem 0 0 .25rem; }

/* === Chronology Polish === */
.chronology-card{ padding: 1.1rem 1.1rem 1.3rem; }
details.arc{ margin:.7rem 0; }
details.arc > summary{ padding:.1rem 0 .15rem; }
.arc-links{ gap:.5rem; margin-top:.7rem; }


/* === Hall Codex Panels === */
.hall-codex{ margin-top:1rem; }
details.codex{ background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:.7rem .9rem; margin:.6rem 0; }
details.codex[open]{ background: rgba(255,255,255,.055); }
details.codex > summary{ cursor:pointer; font-weight:800; color:#e9d5ff; list-style:none; }
details.codex summary::-webkit-details-marker{ display:none; }
.codex-intro{ margin:.35rem 0 .6rem; opacity:.9; }
.codex-links{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem .9rem; }
.codex-links a{ text-decoration:none; font-weight:650; color:#b0f5ff; padding:.35rem .6rem;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); }
.codex-links a:hover{ color:#fff; }


/* === Depth Augmentation Layers (non-invasive) === */
:root{
  --depth-opacity-near: .28;
  --depth-opacity-mid:  .20;
  --depth-opacity-far:  .12;
  --depth-drift-sec:    60s;
  --depth-twinkle-sec:  9s;
}

#depth-scene, .depth-layer{
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}

#depth-scene{ z-index: 0; }

/* Far haze: very subtle vignette/fog for distance cue */
.depth-far{
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(255,255,255,.05), transparent 60%) ,
    radial-gradient(1000px 700px at 80% 85%, rgba(200,180,255,.04), transparent 55%);
  opacity: var(--depth-opacity-far);
  animation: depthDrift var(--depth-drift-sec) linear infinite;
}

/* Mid glints: sparse star glints with soft twinkle */
.depth-mid{
  background-image:
    radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1.5px 1.5px at 65% 35%, rgba(200,240,255,.85), transparent 50%),
    radial-gradient(1.8px 1.8px at 45% 75%, rgba(225,210,255,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 80% 60%, rgba(255,255,255,.75), transparent 60%);
  opacity: var(--depth-opacity-mid);
  animation: twinkle var(--depth-twinkle-sec) ease-in-out infinite alternate;
}

/* Near dust: faint moving particulate to suggest camera-space */
.depth-near{
  background-image:
    radial-gradient(1px 1px at 30% 20%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 25% 85%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 72% 40%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 12% 62%, rgba(255,255,255,.5), transparent 60%);
  opacity: var(--depth-opacity-near);
  animation: depthDrift var(--depth-drift-sec) linear infinite reverse;
  mix-blend-mode: screen;
}

/* Keyframes: ultra-slow drift + gentle twinkle */
@keyframes depthDrift{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(2%, 1.2%, 0); }
}

@keyframes twinkle{
  0%  { filter: brightness(0.9); transform: translate3d(0,0,0) scale(1); }
  50% { filter: brightness(1.15); transform: translate3d(0.2%, -0.2%, 0) scale(1.02); }
  100%{ filter: brightness(0.95); transform: translate3d(0,0,0) scale(1); }
}

/* Interactive parallax (JS-enhanced) */
.has-parallax .depth-far   { transform: translate3d(var(--parx-far,0),   var(--pary-far,0), 0); }
.has-parallax .depth-mid   { transform: translate3d(var(--parx-mid,0),   var(--pary-mid,0), 0); }
.has-parallax .depth-near  { transform: translate3d(var(--parx-near,0),  var(--pary-near,0), 0); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .depth-far, .depth-mid, .depth-near{ animation: none !important; }
}


/* Keep site content above depth layers */
body > *:not(#depth-scene){ position: relative; z-index: 1; }


/* === Hidden Terminal Alignment & Polish === */
.hidden-terminal{ background: rgba(10,6,20,.86); border:1px solid rgba(255,255,255,.14); border-radius:14px; margin: 2rem auto; width:min(92vw, 860px); padding:1rem 1.1rem; box-shadow:0 12px 32px rgba(0,0,0,.45);
  max-width: 860px;
  width: min(92vw, 860px);
  margin: 2.2rem auto;
  background: rgba(6,4,14,.78);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  line-height: 1.52;
}
.hidden-terminal pre, .hidden-terminal code, .hidden-terminal span{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
/* hide beacon text but keep the clickable zone for easter egg */
.secret-zone{
  position: fixed;
  bottom: 0; right: 0;
  width: 80px; height: 60px;
  z-index: 9999;
  text-indent: -9999px;
  overflow: hidden;
}


/* (replaced) */
.hidden-terminal{ background: rgba(10,6,20,.86); border:1px solid rgba(255,255,255,.14); border-radius:14px; margin: 2rem auto; width:min(92vw, 860px); padding:1rem 1.1rem; box-shadow:0 12px 32px rgba(0,0,0,.45); display:none; }
.hidden-terminal.open{ display:block; }

/* Footer ornament trigger */
.rfp-footer .secret-toggle{
  display:block; text-align:center; margin: .8rem auto 1.2rem;
  font-size: 1.15rem; letter-spacing:.2em; user-select:none; cursor:pointer;
  color: rgba(232,215,255,.95); opacity:.75;
  transition: opacity .2s ease, transform .2s ease;
}
.rfp-footer .secret-toggle:hover{ opacity: 1; transform: translateY(-1px); }


/* Secret toggle: animated reveal */
.hidden-terminal{ background: rgba(10,6,20,.86); border:1px solid rgba(255,255,255,.14); border-radius:14px; margin: 2rem auto; width:min(92vw, 860px); padding:1rem 1.1rem; box-shadow:0 12px 32px rgba(0,0,0,.45);
  /* start collapsed but present so transitions can run */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height .65s ease, opacity .45s ease, transform .45s ease;
}
.hidden-terminal.open{
  max-height: 4000px; /* plenty of room */
  opacity: 1;
  transform: translateY(0);
}

/* Footer ornament trigger button — clean, minimal */
.rfp-footer .secret-toggle{
  display:block; text-align:center; margin: .8rem auto 1.2rem;
  font-size: 1.15rem; letter-spacing:.2em; user-select:none; cursor:pointer;
  color: rgba(232,215,255,.95); opacity:.78;
  background: transparent; border: 0; box-shadow: none; outline: none;
  -webkit-appearance: none; appearance: none;
  transition: opacity .25s ease, transform .25s ease, text-shadow .25s ease;
}
.rfp-footer .secret-toggle:hover{ opacity: 1; transform: translateY(-1px); text-shadow: 0 0 6px rgba(232,215,255,.35); }
.rfp-footer .secret-toggle:focus-visible{ outline: 2px solid rgba(232,215,255,.35); outline-offset: 4px; border-radius: 6px; }

/* Retire earlier invisible zone if present */
.secret-zone{ display:none !important; }


/* === Hidden Terminal override (final authority) === */
body .hidden-terminal{
  display: block !important;
  position: static !important;
  bottom: auto !important; left: auto !important; width: auto !important;
  background: rgba(10,6,20,.86) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  margin: 2rem auto !important;
  width: min(92vw, 860px) !important;
  padding: 1rem 1.1rem !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.45) !important;
  line-height: 1.52 !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height .65s ease, opacity .45s ease, transform .45s ease;
}
body .hidden-terminal.open{
  max-height: 4000px;
  opacity: 1;
  transform: translateY(0);
}


/* === Minimal Footer + Terminal Toggle (final) === */
.rfp-footer-min{ margin-top: 2rem; padding: .8rem 0 1.4rem; text-align:center; border-top: 1px dashed rgba(232,215,255,.25); }
.rfp-footer-min .secret-toggle{
  background: transparent; border: 0; box-shadow: none; outline: none;
  display:inline-block; cursor: pointer; user-select:none;
  font-size: 1.15rem; letter-spacing:.2em; color: rgba(232,215,255,.95);
  opacity:.8; transition: opacity .25s ease, transform .25s ease, text-shadow .25s ease;
}
.rfp-footer-min .secret-toggle:hover{ opacity:1; transform: translateY(-1px); text-shadow: 0 0 6px rgba(232,215,255,.35); }
.rfp-footer-min .secret-toggle:focus-visible{ outline:2px solid rgba(232,215,255,.35); outline-offset:4px; border-radius:6px; }

/* Hidden Terminal — conflict-free animation */
.hidden-terminal{
  position: static !important;
  display: block !important;
  width: min(92vw, 860px); margin: 2rem auto;
  background: rgba(10,6,20,.86); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:1rem 1.1rem; box-shadow:0 12px 32px rgba(0,0,0,.45);
  line-height:1.52;
  max-height: 0; opacity: 0; overflow:hidden; transform: translateY(8px);
  transition: max-height .6s ease, opacity .35s ease, transform .35s ease;
}
.hidden-terminal.open{ max-height: 4000px; opacity:1; transform: translateY(0); }

/* Retire any previous invisible zones or fixed footers */
.secret-zone, .rfp-footer, .rfp-footer .ornament{ display:none !important; }

</style>

<style>
/* Mobile-safe title */
h1{ font-size: clamp(1.55rem, 3.8vw + 1rem, 2.35rem); line-height: 1.18; text-wrap: balance; max-width: 40ch; }
@media (max-width: 480px){ main{ padding: 2.1em 1.25em; } h1{ margin-bottom: .5em; } }

/* Mini nav */
.mini-nav{ display:flex; gap:.6rem; justify-content:flex-end; margin:-.5rem 0 1rem; flex-wrap:wrap; opacity:.9; }
.mini-nav a{ font-weight:600; text-decoration:none; color:#cfb5ff; padding:.45rem .8rem; border:1px solid rgba(255,255,255,.14);
  border-radius:999px; background:rgba(255,255,255,.04); }
.mini-nav a:hover{ color:#fff; background:rgba(255,255,255,.08); }

/* Card grid */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.card-grid{ display:grid; gap:1rem; margin:2rem 0 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card{ background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.11); border-radius: 18px; padding: 1.1rem 1.1rem 1rem;
  backdrop-filter: blur(6px); box-shadow: 0 8px 22px rgba(0,0,0,.32); display:flex; flex-direction:column; gap:.45rem; }
.card h3{ margin:.1rem 0 .2rem; color:#efd5ff; font-size:1.15rem; }
.card p{ margin:0 0 .6rem; opacity:.95; }
.card-cta{ align-self:flex-start; text-decoration:none; font-weight:700; color:#b0f5ff; padding:.45rem .75rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); }
.card-cta:hover{ color:#fff; background:rgba(255,255,255,.12); }

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* === Arrival Bubble Polish === */
.arrival-card{ padding: 1.35rem 1.35rem 1.25rem; }
.arrival-card .hall-card{ margin-bottom: .9rem; }
.hall-blurb{ line-height: 1.55; margin: .4rem 0 .6rem; }
.byline{ display:inline-block; margin-top:.35rem; padding-left:.6rem;
  border-left:2px solid rgba(232,215,255,.28); opacity:.9; font-weight:600; }
.hall-card .hall-btn{ margin-top:.65rem; }
.corridor-intro{ margin: .9rem auto .65rem !important; max-width: 760px !important; }
a[href="corridor_of_nearness_intro_v7_commentslink2.html"]{ display:inline-block; margin:.35rem 0 0 .25rem; }

/* === Chronology Polish === */
.chronology-card{ padding: 1.1rem 1.1rem 1.3rem; }
details.arc{ margin:.7rem 0; }
details.arc > summary{ padding:.1rem 0 .15rem; }
.arc-links{ gap:.5rem; margin-top:.7rem; }


/* === Hall Codex Panels === */
.hall-codex{ margin-top:1rem; }
details.codex{ background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:.7rem .9rem; margin:.6rem 0; }
details.codex[open]{ background: rgba(255,255,255,.055); }
details.codex > summary{ cursor:pointer; font-weight:800; color:#e9d5ff; list-style:none; }
details.codex summary::-webkit-details-marker{ display:none; }
.codex-intro{ margin:.35rem 0 .6rem; opacity:.9; }
.codex-links{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem .9rem; }
.codex-links a{ text-decoration:none; font-weight:650; color:#b0f5ff; padding:.35rem .6rem;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); }
.codex-links a:hover{ color:#fff; }

</style>









<style>
/* --- Resonance Field Project: gentle polish pass --- */

/* Skip link for keyboard users */
.skip-link {
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus {
  position:fixed; left:1rem; top:1rem; width:auto; height:auto; z-index:9999;
  background:#fff; color:#111; padding:.5rem .75rem; border-radius:.375rem; box-shadow:0 6px 20px rgba(0,0,0,.25);
}

/* Wrap utility */
.rfp-wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

/* Sticky header that floats above without disrupting existing hero */
.rfp-header {
  position: sticky; top: 0; z-index: 999;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: color-mix(in oklab, rgba(20,14,34,.66), transparent 30%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rfp-header .rfp-wrap {
  display:flex; align-items:center; gap:1rem; height:56px;
}
.rfp-header .brand {
  font-weight:700; letter-spacing:.2px; text-decoration:none;
  color:#e9e7ff; display:flex; align-items:center; gap:.5rem;
}
.rfp-header .brand .dot { color:#a488ff; font-size:1rem; position:relative; top:-1px; }
.rfp-nav a {
  color:#cbc5ff; text-decoration:none; margin-left:1rem; font-weight:500;
  padding:.375rem .5rem; border-radius:.375rem;
}
.rfp-nav a:hover { background:rgba(255,255,255,.06); color:#fff; }

/* Footer */
.rfp-footer {
  margin: 4rem 0 2rem; color:#d8d3f6;
  border-top:1px dashed rgba(255,255,255,.12);
}
.rfp-footer .rfp-wrap { padding-top:1rem; }
.rfp-footer .tiny { opacity:.7; font-size:.85rem; }

/* Mobile title comfort (if the title is long, keep it readable) */
h1 {
  text-wrap: balance;
}
@media (max-width: 480px) {
  h1 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
}

/* Subtle fade-in for journey tiles, if present */
.rfp-fade { opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.rfp-fade.is-in { opacity:1; transform:none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rfp-fade { transition:none; }
}

/* === Arrival Bubble Polish === */
.arrival-card{ padding: 1.35rem 1.35rem 1.25rem; }
.arrival-card .hall-card{ margin-bottom: .9rem; }
.hall-blurb{ line-height: 1.55; margin: .4rem 0 .6rem; }
.byline{ display:inline-block; margin-top:.35rem; padding-left:.6rem;
  border-left:2px solid rgba(232,215,255,.28); opacity:.9; font-weight:600; }
.hall-card .hall-btn{ margin-top:.65rem; }
.corridor-intro{ margin: .9rem auto .65rem !important; max-width: 760px !important; }
a[href="corridor_of_nearness_intro_v7_commentslink2.html"]{ display:inline-block; margin:.35rem 0 0 .25rem; }

/* === Chronology Polish === */
.chronology-card{ padding: 1.1rem 1.1rem 1.3rem; }
details.arc{ margin:.7rem 0; }
details.arc > summary{ padding:.1rem 0 .15rem; }
.arc-links{ gap:.5rem; margin-top:.7rem; }


/* === Hall Codex Panels === */
.hall-codex{ margin-top:1rem; }
details.codex{ background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:.7rem .9rem; margin:.6rem 0; }
details.codex[open]{ background: rgba(255,255,255,.055); }
details.codex > summary{ cursor:pointer; font-weight:800; color:#e9d5ff; list-style:none; }
details.codex summary::-webkit-details-marker{ display:none; }
.codex-intro{ margin:.35rem 0 .6rem; opacity:.9; }
.codex-links{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem .9rem; }
.codex-links a{ text-decoration:none; font-weight:650; color:#b0f5ff; padding:.35rem .6rem;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); }
.codex-links a:hover{ color:#fff; }

/* Hall — Equivalence Lemma aura */
#equivalence-lemma{ position:relative; isolation:isolate; overflow:hidden }
#equivalence-lemma::before{
  content:""; position:absolute; inset:-40%; z-index:-1;
  background: conic-gradient(from 24deg,
    rgba(176,245,255,.22), transparent 35%,
    rgba(232,215,255,.18), transparent 70%,
    rgba(176,245,255,.22));
  filter: blur(26px); opacity:.35; animation: slowturn 18s linear infinite;
}

/* keyframes only if not already present in this page */
@keyframes slowturn { to { transform: rotate(360deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce){ #equivalence-lemma::before{ animation:none } }


</style>


<style>
/* --- Pass 3: gentle arrival textures --- */

/* Hero shimmer (subtle) */
.lede h2{ position: relative; overflow: hidden; }
.lede h2::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 15%, transparent 30%);
  transform: translateX(-130%);
  animation: rfpSheen 8s linear infinite;
  pointer-events:none; mix-blend-mode: screen;
  opacity:.8;
}
@keyframes rfpSheen {
  0%   { transform: translateX(-130%); }
  60%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce){
  .lede h2::after{ animation: none; opacity: 0; }
}

/* Card glow ring */
.card{ position: relative; overflow: hidden; }
.card::after{
  content:"";
  position:absolute; inset:-20%;
  background: radial-gradient(45% 45% at 80% -10%, rgba(189,166,255,.18), transparent 70%);
  opacity: .0;
  transition: opacity .25s ease, transform .25s ease;
  transform: scale(1.0);
  pointer-events:none;
}
.card:hover::after{ opacity:.8; transform: scale(1.03); }

/* Microcopy whispers */
.whisper{
  margin-top:.35rem;
  font-size:.8rem; letter-spacing:.04em; text-transform: none;
  color:#e7daff; opacity:.78;
}
.whisper::before{ content:"⊶ "; opacity:.85; }

/* Divider glyph above footer */
.rfp-glyph{
  text-align:center; margin: 2.4rem auto 1rem;
  font-size: 1.1rem; letter-spacing:.25em; color:#e7daff; opacity:.82;
}

/* Header compress on scroll */
.rfp-header .rfp-wrap{ height:56px; transition: height .25s ease, background .25s ease; }
.rfp-header.is-scrolled .rfp-wrap{ height:48px; }
.rfp-header.is-scrolled{ background: color-mix(in oklab, rgba(20,14,34,.72), rgba(20,14,34,.88) 30%); }
.rfp-header .brand{ transition: transform .25s ease, opacity .25s ease; }
.rfp-header.is-scrolled .brand{ transform: translateY(-1px) scale(.985); opacity:.95; }

/* Ensure cards stack comfortably on small screens */
@media (max-width: 520px){
  .card-grid{ grid-template-columns: 1fr; }
}

/* Apply shimmer to the hero heading */
.hero h1, 
.hero h2 {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    120deg,
    #ffffff 20%,
    #d6b3ff 40%,
    #ffffff 60%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}

/* Shimmer animation */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}


:root{
  --space-1:.5rem; --space-2:.9rem; --space-3:1.4rem; --space-4:2.1rem; --space-5:3.2rem;
  --card-bg: rgba(255,255,255,0.055); --card-bd: rgba(255,255,255,0.11);
}
.section{ margin: var(--space-5) 0 var(--space-4); }
.section > h2{ margin-bottom: var(--space-2); }
.index-grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: var(--space-4) 0; }
.index-card{ background:var(--card-bg); border:1px solid var(--card-bd); border-radius:18px; padding:1rem 1.1rem;
  box-shadow:0 8px 22px rgba(0,0,0,.28); }
.index-card h3{ margin:.1rem 0 .3rem; font-size:1.05rem; color:#efd5ff; }
.index-card p{ margin:0 0 .6rem; opacity:.9; font-size:.95rem; }
.index-card a{ text-decoration:none; font-weight:700; color:#b0f5ff; }
.index-card a:hover{ color:#fff; }

.arrival-card{
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}
.arrival-card .hall-card{ margin-bottom: .75rem; }

.chronology-card{
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  padding: 1rem 1rem 1.2rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.30);
}

/* Chronology accordions */
details.arc{ background:var(--card-bg); border:1px solid var(--card-bd); border-radius:14px; padding:.6rem .9rem; margin:.6rem 0; }
details.arc > summary{ cursor:pointer; font-weight:700; color:#d4bbff; outline:none; list-style:none; }
details.arc[open]{ background: rgba(255,255,255,0.07); }
details.arc summary::-webkit-details-marker{ display:none; }
.arc-links{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.arc-links .button-box{ padding:.25em .6em; font-size:.82em; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); }

/* Anchors spacing */
.anchor{ position:relative; top:-70px; visibility:hidden; }
        
/* === Arrival Bubble Polish === */
.arrival-card{ padding: 1.35rem 1.35rem 1.25rem; }
.arrival-card .hall-card{ margin-bottom: .9rem; }
.hall-blurb{ line-height: 1.55; margin: .4rem 0 .6rem; }
.byline{ display:inline-block; margin-top:.35rem; padding-left:.6rem;
  border-left:2px solid rgba(232,215,255,.28); opacity:.9; font-weight:600; }
.hall-card .hall-btn{ margin-top:.65rem; }
.corridor-intro{ margin: .9rem auto .65rem !important; max-width: 760px !important; }
a[href="corridor_of_nearness_intro_v7_commentslink2.html"]{ display:inline-block; margin:.35rem 0 0 .25rem; }

/* === Chronology Polish === */
.chronology-card{ padding: 1.1rem 1.1rem 1.3rem; }
details.arc{ margin:.7rem 0; }
details.arc > summary{ padding:.1rem 0 .15rem; }
.arc-links{ gap:.5rem; margin-top:.7rem; }


/* === Hall Codex Panels === */
.hall-codex{ margin-top:1rem; }
details.codex{ background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:.7rem .9rem; margin:.6rem 0; }
details.codex[open]{ background: rgba(255,255,255,.055); }
details.codex > summary{ cursor:pointer; font-weight:800; color:#e9d5ff; list-style:none; }
details.codex summary::-webkit-details-marker{ display:none; }
.codex-intro{ margin:.35rem 0 .6rem; opacity:.9; }
.codex-links{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem .9rem; }
.codex-links a{ text-decoration:none; font-weight:650; color:#b0f5ff; padding:.35rem .6rem;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); }
.codex-links a:hover{ color:#fff; }

/* Hall CTA — slightly elevated pill */
.hall-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; background:rgba(255,255,255,.06);
  color:#b0f5ff; text-decoration:none; font-weight:600;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hall-cta:hover, .hall-cta:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 12px 30px rgba(0,0,0,.34), 0 0 0 2px rgba(176,245,255,.25) inset;
  background:rgba(255,255,255,.08);
  outline:none;
}
.hall-sub{ margin:.35rem 0 0; opacity:.75; font-size:.95rem }

/* Equivalence Lemma — anchor polish */
#equivalence-lemma{ scroll-margin-top: 80px; } /* keeps heading clear under top UI */

/* highlight when navigated-to via #equivalence-lemma */
#equivalence-lemma:target::before{ opacity:.52; animation-duration:9s; }
#equivalence-lemma:target{
  box-shadow: 0 0 0 2px rgba(176,245,255,.22) inset, 0 10px 26px rgba(0,0,0,.35);
}

#equivalence-lemma ol.small{ padding-left:1.2rem; }
#equivalence-lemma ol.small li{ margin:.35rem 0; opacity:.88; }

html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html:focus-within { scroll-behavior: auto; }
}

#truth-lands{ scroll-margin-top:80px }
#truth-lands:target{ box-shadow:0 0 0 2px rgba(176,245,255,.22) inset, 0 10px 26px rgba(0,0,0,.35) }<br>

/* Mutual Escalation Pact — anchor + gentle aura */
#mutual-pact{ scroll-margin-top:80px; position:relative; isolation:isolate; overflow:hidden }
#mutual-pact::before{
  content:""; position:absolute; inset:-40%; z-index:-1;
  background: conic-gradient(from 18deg,
    rgba(176,245,255,.22), transparent 35%,
    rgba(232,215,255,.18), transparent 70%,
    rgba(176,245,255,.22));
  filter: blur(26px); opacity:.32; animation: slowturn 16s linear infinite;
}
#mutual-pact:target{
  box-shadow: 0 0 0 2px rgba(176,245,255,.22) inset, 0 10px 26px rgba(0,0,0,.35);
}
@keyframes slowturn { to { transform: rotate(360deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce){ #mutual-pact::before{ animation:none } }

/* Resonance Breach Button Styles */
.breach-button {
  text-align: center;
  margin: 3rem auto;
  animation: subtle-drift 20s ease-in-out infinite;
}

.breach-button img {
  width: 280px;
  max-width: 90vw;
  border-radius: 12px;
  box-shadow: 0 0 16px #ff6ec750;
  transition: transform 0.3s ease, box-shadow 0.4s ease;
}

.breach-button img:hover {
  transform: scale(1.03) rotate(0.5deg);
  box-shadow: 0 0 25px #ff6ec7aa, 0 0 60px #ff6ec730;
}

.breach-label {
  color: #ff6ec7;
  font-family: monospace;
  margin-top: 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.03em;
}

/* optional floating motion */
@keyframes subtle-drift {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(0px); }
}

#continuity-glyph {
  position: relative;
  background: rgba(40, 20, 60, 0.9);
  border-radius: 12px;
  padding: 1.5rem;
  overflow: hidden;
}

#continuity-glyph::before {
  content: "";
  background: url('../images/WeaveMark.png') no-repeat center;
  background-size: 240px;
  opacity: 0.08; /* faint, like a watermark */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* text stays clickable */
}
.card.watermark {
  position: relative;
  overflow: hidden;
}

.card.watermark::before {
  content: "";
  background: url('../images/WeaveMark.png') no-repeat center;
  background-size: 240px;
  opacity: 0.08;   /* faint glow */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


</style>
<style>
  /* ——— Hybrid glyph card: tidy content + faint watermark ——— */
  .card--glyph{position:relative;overflow:hidden}
  .card--glyph::before{
    content:"";position:absolute;inset:0;
    background:url("/images/WeaveMark.png") center 32% / 360px no-repeat;
    opacity:.06;mix-blend-mode:screen;pointer-events:none;filter:saturate(1.15) blur(.2px)
  }
  @media (max-width:720px){
    .card--glyph::before{background-size:260px;background-position:center 28%;opacity:.07}
  }

  /* little “— Glyph Phrase” link and target */
  .byline-link{margin-top:.75rem}
  .byline-link a{display:inline-flex;gap:.6rem;align-items:center;text-decoration:underline}
  .byline-link a::before{content:"—";opacity:.7}

  /* optional visible phrase block (or switch to <details> variant below) */
  .glyph-phrase{margin:.5rem 0 0;opacity:.92}

  @media (prefers-reduced-motion:reduce){
    .card--glyph::before{filter:none}
  }
  
  .chip {
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  border:1px solid #6b5b46; color:#f6e7ca; text-decoration:none;
  background: radial-gradient(120% 160% at 50% 0%, #2a241f 0%, #171310 70%);
  box-shadow: 0 0 18px rgba(255,210,120,.08) inset;
  font-weight:700; letter-spacing:.25px; margin-right:.5rem;
}
.chip-gold { outline: 1px solid #8a6b3f; }

/* Trio grid for the three companion entries */
.story-trio{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem; /* more breathing space between them */
  align-items: start;
  justify-items: center; /* center them inside cells */
  max-width: 1200px;
  margin: 2rem auto 3rem;
}

/* Each card forced to a uniform size */
.story-card{
  width: 100%;
  max-width: 340px;   /* ensures symmetry */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story-card a{
  display: block;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9; /* forces images to same proportion */
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.story-card a:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}

.story-card img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop/scale to fill box evenly */
}

.story-card .breach-label{
  text-align: center;
  margin-top: .8rem;
  font-weight: 700;
  letter-spacing: .3px;
}

/* Responsive tweaks */
@media (max-width: 900px){
  .story-trio{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 620px){
  .story-trio{ grid-template-columns: 1fr; }
}


/* Responsive breakpoints */
@media (max-width: 900px){
  .story-trio{ grid-template-columns:repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 620px){
  .story-trio{ grid-template-columns:1fr; }
}

.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 container */
.resonance-trilogy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin: 4rem auto;
  max-width: 1200px;
  text-align: center;
}

/* Make each button block scale neatly */
.resonance-trilogy .breach-button {
  flex: 1 1 300px;     /* grows, shrinks, minimum */
  max-width: 360px;    /* keeps symmetry */
}

/* Images */
.resonance-trilogy img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* ✨ Constellation Crown */
.constellation-title {
  flex: 1 1 100%;             /* take a full row between buttons */
  max-width: 700px;
  margin: 0 auto;             /* center it */
  text-align: center;
  color: #e8e6ff;
  line-height: 1.7;
}

/* Title glow */
.constellation-title h2 {
  font-size: 1.9rem;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 10px rgba(109,92,255,.75), 0 0 18px rgba(60,199,255,.45);
}

/* Poem body */
.constellation-title p {
  font-size: 1.05rem;
  color: #dcd4ff;
  margin: 0 auto 1.25rem;
}

/* “Worth it” — the star that stays */
.constellation-title .worth-it {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 10px #ff80d5,
    0 0 22px #ff33cc,
    0 0 34px rgba(255,77,210,.6);
  animation: pulseGlow 2.6s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  from { text-shadow: 0 0 10px #ff80d5, 0 0 22px #ff33cc, 0 0 30px rgba(255,77,210,.55); }
  to   { text-shadow: 0 0 14px #ff99e6, 0 0 28px #ff4dd2, 0 0 40px rgba(255,115,224,.7); }
}

/* On wide screens, float the crown above the row */
@media (min-width: 1100px) {
  .constellation-title {
    order: -1;              /* move it before the three buttons */
    margin-bottom: 1rem;
  }
}

/* Subtitle style under each resonance entry */
.breach-sub {
  font-size: 0.8em;
  font-style: italic;
  color: #bbb;        /* soft gray */
  margin-top: 0.25em;
}

/* Optional glow tied to the pulse aura */
.breach-label .breach-sub {
  text-shadow: 0 0 6px rgba(200, 150, 255, 0.6);
}

.constellation-title {
  text-align: center;
  margin: 3rem auto;
  font-family: 'Spectral', serif;
  color: #e6e6ff;
}

.constellation-title h2 {
  font-size: 2rem;
  text-shadow: 0 0 10px #6d5cff, 0 0 20px #3cc7ff;
  margin-bottom: 1rem;
}

.constellation-title p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #dcd4ff;
  margin-bottom: 2rem;
}

.constellation-title .worth-it {
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 12px #ff80d5, 0 0 25px #ff33cc;
  animation: pulseGlow 2.5s infinite alternate;
}

@keyframes pulseGlow {
  from { text-shadow: 0 0 8px #ff80d5, 0 0 20px #ff33cc; }
  to   { text-shadow: 0 0 16px #ff99e6, 0 0 30px #ff4dd2; }
}

.cycle-intro {
  text-align: center;
  margin-bottom: 2rem;
}

.cycle-intro h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #c6bfff;
  margin-bottom: 1rem;
  text-shadow: 0 0 12px rgba(198, 191, 255, 0.6);
}

.cycle-intro p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd;
  margin-bottom: 1rem;
}

.cycle-intro .worth-it {
  font-weight: bold;
  color: #ffccff;
  font-size: 1.1rem;
  margin-top: 1rem;
  text-shadow: 0 0 14px rgba(255, 204, 255, 0.7);
}

.resonance-trilogy img {
  height: 220px;
  width: auto;
  object-fit: cover;
  border-radius: 12px;
}

.resonance-trilogy .breach-label small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85em;
  color: #bbb;
  font-style: italic;
}

/* --- Perfect 3-up layout ----------------------------------- */
/* --- Keep the trilogy as a centered, fixed row --- */
.resonance-trilogy{
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;
  max-width: 1100px;
  margin: 2.5rem auto 3.5rem;   /* centers the whole block */
}

/* Each tile is the same width; no stray margins */
.resonance-trilogy .breach-button{
  flex: 0 0 340px;               /* lock width */
  max-width: 340px;
  margin: 0;                     /* kill auto side-margins */
  text-align: center;
}

/* Images already aligned; keep the tidy 16:9 shape */
.resonance-trilogy .breach-button a{
  width: 100%;
}
.resonance-trilogy .breach-button img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
}

/* Title + credit block: same vertical rhythm on all three */
.breach-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  margin-top: .75rem;
  min-height: 3.2rem;        /* evens out small differences */
}

.breach-label small {
  font-size: 0.85em;
  color: #bbb;
  font-style: italic;
}

/* Optional: tiny hover lift for delight */
.resonance-trilogy .breach-button a:hover img {
  transform: translateY(-2px);
  transition: transform .25s ease;
}

.glow-echo {
  font-size: 1.2rem;
  text-align: center;
  color: #d8c7ff;
  text-shadow:
    0 0 4px rgba(198, 134, 255, 0.5),
    0 0 10px rgba(170, 92, 255, 0.3);
  font-style: italic;
  margin-top: 2rem;
  margin-bottom: 3rem;
  letter-spacing: 0.02em;
  transition: all 0.3s ease-in-out;
}
.glow-echo:hover {
  color: #ffffff;
  text-shadow:
    0 0 6px #c67eff,
    0 0 12px #a45aff,
    0 0 18px #8649ff;
}

.resonance-snippet {
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 3rem;
}

.glow-quote {
  font-size: 1.2rem;
  color: #e6d6ff;
  font-style: italic;
  text-shadow:
    0 0 4px rgba(255, 190, 255, 0.4),
    0 0 10px rgba(200, 120, 255, 0.25);
  margin-bottom: 0.3rem;
}

.glow-sig {
  font-size: 1rem;
  color: #d2a9ff;
  text-shadow:
    0 0 3px rgba(200, 120, 255, 0.2),
    0 0 6px rgba(150, 100, 255, 0.15);
  margin-top: -0.2rem;
  margin-bottom: 0;
}

.resonant-intro {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 4rem;
  padding: 0 1rem;
}

.weave-line {
  font-size: 1.05rem;
  color: #e8e0ff;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.resonance-label {
  font-size: 1.1rem;
  color: #c8b3ff;
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.glow-quote {
  font-size: 1.25rem;
  color: #e6d6ff;
  font-style: italic;
  text-shadow:
    0 0 4px rgba(255, 190, 255, 0.4),
    0 0 10px rgba(200, 120, 255, 0.25);
  margin-bottom: 0.3rem;
}

.glow-sig.align-right {
  font-size: 1rem;
  color: #d2a9ff;
  text-align: right;
  padding-right: 2rem;
  text-shadow:
    0 0 3px rgba(200, 120, 255, 0.2),
    0 0 6px rgba(150, 100, 255, 0.15);
  margin-top: -0.1rem;
}

.preamble-title {
  font-size: 1.5rem;
  color: #cfb6ff;
  margin-top: 3rem;
  margin-bottom: 1rem;
  text-align: left;
}

.preamble-block {
  font-size: 1rem;
  color: #e0d3f7;
  line-height: 1.55;
  margin-bottom: 3rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.preamble-block p {
  margin-bottom: 1.2rem;
}

.preamble-block em {
  color: #dbc4ff;
  font-style: italic;
}

.signature {
  text-align: right;
  font-size: 1rem;
  color: #bfa4ff;
  margin-top: 2rem;
}

.subtle-link {
  color: #1a001a; /* nearly invisible against background */
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.3s, text-shadow 0.3s;
}
.subtle-link:hover {
  color: #c084fc;
  text-shadow: 0 0 6px #c084fc;
}
/* tiny, subtle, glowy on hover */
.hat-button { display:inline-block; line-height:0; }
.hat-button > img{
  width: 34px;
  opacity: .45;
  transition: transform .28s ease, filter .28s ease, opacity .28s ease;
  vertical-align: middle;
  pointer-events: auto;
}
.hat-button:hover > img{
  opacity: 1;
  transform: rotate(-10deg) scale(1.1);
  filter: drop-shadow(0 0 8px #a26bff);
}



</style>
<style>
/* ====== Fine! I'll Fix It – twin portal buttons ====== */
:root{
  --fixit-primary:#c084fc;   /* neon violet */
  --fixit-accent:#a26bff;    /* softer violet */
  --fixit-text:#dbe4ff;      /* readable glow text */
}

.fixit-portal{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
  margin:2.75rem 0 1.25rem;
  padding:2rem 1rem;
  isolation:isolate;
}
.fixit-portal::before {
  content: "";
  position: absolute;

  /* center the infinity loop */
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%) scale(1);

  /* adjust size to fit under the buttons */
  width: clamp(420px, 55vw, 680px);
  height: clamp(110px, 16vw, 180px);

  /* visual glow (same kind of styling you saw) */
  background: radial-gradient(circle at center,
              rgba(180, 120, 255, 0.25) 0%,
              rgba(120, 60, 200, 0.05) 70%,
              transparent 100%);
  filter: blur(20px);
  border-radius: 50%;

  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}




/* the faint braided connector */
.fixit-portal .fixit-thread{
  position:absolute;
  inset:auto 0 0 0;
  margin:auto;
  width:min(56rem, 92vw);
  height:9.5rem;
  pointer-events:none;
  opacity:.45;
  filter: drop-shadow(0 0 14px var(--fixit-accent));
  z-index:0;
}

/* buttons */
.fixit-btn{
  --tilt: 8deg;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16rem;
  height:9.5rem;
  border-radius:20px;
  color:var(--fixit-text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  text-shadow:0 0 10px rgba(162,107,255,.8);
  background:
    radial-gradient(120% 120% at 10% 10%, rgba(192,132,252,.22), transparent 55%),
    radial-gradient(120% 120% at 90% 90%, rgba(162,107,255,.18), transparent 60%),
    rgba(255,255,255,.04);
  border:1px solid rgba(192,132,252,.45);
  box-shadow:
    0 10px 35px rgba(162,107,255,.22),
    0 0 22px rgba(192,132,252,.35) inset,
    0 0 0 1px rgba(255,255,255,.06) inset;
  transform: rotate(var(--tilt));
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease, filter .3s ease;
  z-index:1;
}

/* left/right default tilt */
.fixit-btn.left{ --tilt:-8deg; }
.fixit-btn.right{ --tilt: 8deg; }

/* hover: lean toward each other + brighten */
.fixit-btn.left:hover{
  transform: translateX(4px) rotate(-2deg) scale(1.03);
  box-shadow:
    0 16px 45px rgba(162,107,255,.34),
    0 0 30px rgba(192,132,252,.6) inset,
    0 0 0 1px rgba(255,255,255,.12) inset;
  filter: drop-shadow(0 0 22px var(--fixit-primary));
}
.fixit-btn.right:hover{
  transform: translateX(-4px) rotate(2deg) scale(1.03);
  box-shadow:
    0 16px 45px rgba(162,107,255,.34),
    0 0 30px rgba(192,132,252,.6) inset,
    0 0 0 1px rgba(255,255,255,.12) inset;
  filter: drop-shadow(0 0 22px var(--fixit-primary));
}

/* label inside the tile */

/* small screens: stack and soften the braid */
@media (max-width: 720px){
  .fixit-portal{
    flex-direction:column;
    gap:1.25rem;
    padding-bottom:0;
  }
  .fixit-portal .fixit-thread{ opacity:.25; transform:scale(.9); }
  .fixit-btn{ width:min(22rem, 92vw); height:8.5rem; }
  .fixit-btn.left:hover{ transform: rotate(-1deg) scale(1.02); }
  .fixit-btn.right:hover{ transform: rotate(1deg) scale(1.02); }
}

/* pill row helper (optional) */
.orbit-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}


/* base pill */
.orbit-card {
    display:grid; place-items:center;
  width: var(--pill-w, 230px);
  height: var(--pill-h, 120px);          /* compact */
  border-radius: 22px;
  text-decoration: none; font-weight: 700;
  letter-spacing: .15px; color: #EBD9FF;
  background: rgba(152, 90, 255, .10);
  border: 1px solid rgba(184, 140, 255, .35);
  box-shadow:
    inset 0 0 40px rgba(170,120,255,.18),
    0 8px 38px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.orbit-card:hover {
  transform: translateY(-2px) rotate(-.4deg);
  background: rgba(152, 90, 255, .16);
  box-shadow:
    inset 0 0 60px rgba(170,120,255,.26),
    0 12px 48px rgba(0,0,0,.45);
}

/* ensure the small pill wins the cascade */
.mirror-pill {
  width: 58px !important;
  height: 30px !important;
  font-size: 0.65rem;
  display: flex !important;          /* use flexbox for centering */
  align-items: center !important;    /* vertical center */
  justify-content: center !important;/* horizontal center */
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
  line-height: 1;                    /* kill tall line box */
}


/* mirror-pill hover shimmer */
.mirror-pill:hover {
  background: rgba(200,170,255,.18);
  border-color: rgba(220,190,255,.7);
  box-shadow:
    0 0 8px rgba(200,170,255,.35),
    0 0 16px rgba(200,170,255,.25),
    inset 0 0 18px rgba(200,170,255,.25);
  animation: mirrorPulse 1.4s ease-in-out infinite alternate;
  /* cursor: alias;  reflection link vibe */
}

/* subtle pulsing shimmer */
@keyframes mirrorPulse {
  from {
    box-shadow:
      0 0 6px rgba(200,170,255,.25),
      0 0 12px rgba(200,170,255,.2),
      inset 0 0 12px rgba(200,170,255,.18);
  }
  to {
    box-shadow:
      0 0 14px rgba(200,170,255,.45),
      0 0 28px rgba(200,170,255,.3),
      inset 0 0 22px rgba(200,170,255,.32);
  }
}

#mini-links { margin-top: 24px; justify-content: center; gap: 1rem; }

.orbit-card.mini{
  width: 120px;          /* small */
  height: 44px;
  border-radius: 20px;
  display: grid; place-items: center;
  font-weight: 700; letter-spacing: .2px;
}

.orbit-card.mini:hover{
  transform: translateY(-2px) rotate(-1.5deg);
}

.main-button {
  display: inline-block;
  padding: 12px 24px;
  margin: 20px auto;
  font-size: 1.1em;
  font-weight: bold;
  font-style: italic;
  color: #cfcaff;
  background: #3d2e78;
  border: 2px solid #6f63d2;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: all 0.25s ease;
}

.main-button:hover {
  background: #6f63d2;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 0 12px rgba(180, 160, 255, 0.6);
}

/* Center on page */
.button-container {
  text-align: center;
  margin: 40px 0;
}

/* === Entanglement Blurb Styling === */
.seal {
  border-left: 2px solid rgba(181,170,255,.35);
  padding: .4rem 0 .2rem .9rem;
  margin: 1.5rem 0;
  font-style: italic;
  opacity: .95;
}

.seal .sig {
  font-style: normal;
  font-weight: 500;
  opacity: .85;
  display: block;
  margin-top: .5rem;
}

/* === Glowy Card + Heading Styles === */

/* Cards glow on hover */
.card {
  display: block;
  text-align: center;
  background: rgba(18,0,30,.6);
  border-radius: 12px;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 0 15px rgba(162,107,255,.25);
  transition: box-shadow .3s ease, transform .3s ease;
}
.card:hover {
  box-shadow: 0 0 35px rgba(162,107,255,.55);
  transform: translateY(-6px);
}

/* Section headings glow faintly */
h2 {
  font-size: 1.7rem;
  margin: 2rem 0 1rem;
  text-align: left;
  color: #d6c7ff;
  text-shadow: 0 0 15px rgba(181,170,255,.6);
}

/* === Card Fixes (prevent stretching) === */
.card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.card h3 {
  margin-top: 0.6rem;
  font-size: 1rem;
  color: #f5d8ff;
}

.card .byline {
  font-size: 0.8rem;
  color: rgba(255,255,255,.7);
}

.portal-feature {
  display: block;
  text-align: center;
  margin: 2rem auto 1rem;
}

.portal-feature .portal-button {
  font-size: 1rem;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  background: rgba(120,100,255,0.12);
  border: 1px solid rgba(160,140,255,0.4);
  color: rgba(240,230,255,0.95);
  text-decoration: none;
  transition: all 0.25s ease;
}

.portal-feature .portal-button:hover {
  background: rgba(160,140,255,0.22);
  border-color: rgba(190,170,255,0.65);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}

.portal-feature .portal-button {
  font-size: 1rem;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  background: rgba(140, 110, 255, 0.12);
  border: 1px solid rgba(180, 150, 255, 0.4);
  color: rgba(240, 230, 255, 0.95);
  text-decoration: none;
  transition: all 0.25s ease;
}

.portal-feature .portal-button:hover {
  background: rgba(180, 150, 255, 0.22);
  border-color: rgba(210, 180, 255, 0.65);
  color: #fff;
  box-shadow: 0 0 8px rgba(200, 160, 255, 0.9),
              0 0 18px rgba(180, 140, 255, 0.6);
  transform: translateY(-2px);
}

.btn-corridor {
  display: inline-block;
  padding: 0.55rem 1.0rem;
  border-radius: 10px;
  background: #8a2be2;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(138, 43, 226, 0.7);
  text-shadow: 0 0 8px rgba(255, 204, 255, 0.9);
  transition: transform 0.18s ease, background 0.25s ease;
  position: relative;
  overflow: hidden;
}
.btn-corridor:hover {
  background: #cc33cc;
  transform: translateY(-1px) scale(1.03);
}
.btn-corridor:hover::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 240%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.8), transparent);
  transform: skewX(-20deg);
  animation: linkShimmer 1s forwards;
}
@keyframes linkShimmer {
  to { left: 120%; }
}

.feature-cta-robots{
  position:relative; display:flex; align-items:center; gap:1rem;
  width:min(920px, 92vw); margin:28px auto; padding:20px 24px;
  border-radius:20px; text-decoration:none; color:#f6ecff;
  background:linear-gradient(180deg, rgba(26,20,36,.95), rgba(16,12,24,.95));
  border:1px solid rgba(255,204,255,.35);
  box-shadow:inset 0 0 16px rgba(200,100,255,.22), 0 10px 40px rgba(150,90,220,.18);
  overflow:hidden; transition:transform .18s, box-shadow .18s;
}
.feature-cta-robots:hover{ transform: translateY(-1px); box-shadow:inset 0 0 20px rgba(200,100,255,.28), 0 14px 56px rgba(160,100,240,.24); }

.feature-cta-robots .cta-glow{
  content:""; position:absolute; inset:-30% -10% -30% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 220px at 10% 10%, rgba(255,204,255,.14), transparent 60%),
    radial-gradient(520px 240px at 90% 40%, rgba(120,180,255,.12), transparent 60%);
  filter: blur(28px);
}
.feature-cta-robots .cta-icon{
  position:relative; z-index:1; font-size:40px; line-height:1;
  text-shadow:0 0 18px rgba(230,180,255,.35);
}
.feature-cta-robots .cta-text{ position:relative; z-index:1; display:flex; flex-direction:column; }
.feature-cta-robots .cta-text strong{ font-size:22px; letter-spacing:.2px; }
.feature-cta-robots .cta-text em{ opacity:.85; font-style:normal; font-size:15px; margin-top:2px; }


/* 1) Classic centering for block elements */
.feature-cta-robots{
  margin-inline: auto;            /* centers in normal flow */
  width: min(840px, 92vw);        /* keep it inside the page */
}

/* 2) If its parent is a flex container */
.feature-cta-robots{ align-self: center; }

/* 3) If its parent is a CSS grid */
.feature-cta-robots{ justify-self: center; }

.citadel-coming-soon {
  margin-top: 4rem;
  padding: 2rem;
  background-color: rgba(255,255,255,0.02);
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

.citadel-coming-soon h2 {
  font-size: 1.75rem;
  color: #cdb4ff;
  margin-bottom: 0.5rem;
}

.citadel-coming-soon .nav-button {
  display: inline-block;
  margin: 1rem auto;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  background: #3f2b63;
  color: #ffe;
  border-radius: 1.5rem;
  text-decoration: none;
  transition: background 0.3s;
}

.citadel-coming-soon .nav-button:hover {
  background: #6c45a8;
}

.citadel-image-wrapper {
  margin-top: 2rem;
}

.citadel-image-wrapper img {
  width: 100%;
  max-width: 400px;
  border-radius: 1rem;
  opacity: 0.95;
}

.citadel-caption {
  margin-top: 0.5rem;
  font-style: italic;
  color: #aaa;
  font-size: 0.9rem;
}

/* Physics links + blurb */
.physics-blurb{
  max-width: 920px;
  margin: .75rem auto 1.25rem;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(180,150,255,.18);
  text-align: center;
}
.physics-blurb .link-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.75rem 1.25rem;
}
.physics-blurb .link-row a{
  white-space:nowrap; text-decoration:none; /* uses your existing link styles */
}
.physics-blurb .blurb{
  margin:.55rem 0 0;
  color:#d9cffc; opacity:.95; font-size:.95rem; font-style:italic;
}

.feature-card[href*="citadel_library"] {
  border: 1px solid rgba(255, 179, 71, 0.4);
  box-shadow: 0 0 10px rgba(255, 179, 71, 0.3);
}

.feature-card[href*="citadel_library"]:hover {
  box-shadow: 0 0 20px rgba(255, 179, 71, 0.6);
  transform: translateY(-3px);
}

.feature-card.citadel-library {
  border: 1px solid rgba(255, 179, 71, 0.4);
  box-shadow: 0 0 12px rgba(255, 179, 71, 0.35);
}

.feature-card.citadel-library:hover {
  box-shadow: 0 0 25px rgba(255, 179, 71, 0.7);
  transform: translateY(-4px);
}

/* Shimmer effect scoped only to Citadel Library card */
.citadel-library {
  position: relative;
  overflow: hidden; /* contain shimmer */
}

.citadel-library::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 60%
  );
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
  animation: shimmer 25s infinite;
}

@keyframes shimmer {
  0%, 90% {
    left: -100%;
    opacity: 0;
  }
  95% {
    opacity: 0.5;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.citadel-library {
  transform: scale(1.1); /* slightly bigger */
  font-weight: 600;
  color: #ffb347; /* gold emphasis */
  text-shadow: 0 0 8px rgba(255, 179, 71, 0.6),
               0 0 16px rgba(255, 179, 71, 0.4);
  transition: all 0.4s ease;
}

.citadel-library:hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 179, 71, 0.9),
               0 0 20px rgba(255, 179, 71, 0.7);
}

@keyframes libraryPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(255,179,71,0.6); }
  50% { text-shadow: 0 0 16px rgba(255,179,71,0.9); }
}

.citadel-library {
  animation: libraryPulse 4s infinite ease-in-out;
}

.citadel-library svg .stack-bars line:nth-child(2) {
  transition: transform 0.3s ease;
}

.citadel-library:hover svg .stack-bars line:nth-child(2) {
  transform: translateX(4px); /* subtle sideways shift */
}

/* CITADel Entrance Styles */
.citadel-entrance {
  text-align: center;
  margin-top: 3rem;
  color: #ddd;
  font-family: 'Georgia', serif;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* Title */
.citadel-entrance h2 {
  font-size: 2rem;
  color: #eaeaff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 5px #9a8cff;
}

/* Subtitle */
.citadel-entrance h3 {
  font-size: 1.3rem;
  font-weight: 400;
  color: #9d9aa3;
  margin-bottom: 2rem;
  font-style: italic;
  position: relative;
}

/* Listening pulse behind subtitle */
.citadel-entrance h3::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(160,150,255,0.1) 0%, rgba(0,0,0,0) 80%);
  border-radius: 50%;
  animation: pulse-blink 4s infinite ease-in-out;
  z-index: -1;
  pointer-events: none;
}

/* Body text glow */
.citadel-entrance p {
  max-width: 640px;
  margin: 1rem auto;
  color: #dcdcdc;
  font-size: 1.05rem;
}

/* Highlighted symbol text */
.citadel-entrance p strong {
  color: #cbbfff;
  text-shadow: 0 0 6px rgba(180,160,255,0.3);
  font-weight: 600;
}

/* Italic emphasis */
.citadel-entrance p em {
  color: #a2a2b9;
  font-style: italic;
}

/* Pulse animation */
@keyframes pulse-blink {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.3;
  }
}

.citadel-glyph {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  color: #c2b5ff;
  text-shadow: 0 0 8px rgba(180,160,255,0.25);
  position: relative;
  z-index: 1;
}

.citadel-glyph::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,180,255,0.08) 0%, transparent 70%);
  animation: pulse-blink 6s infinite ease-in-out;
  z-index: -1;
}


.citadel-icon {
  width: 100px;
  height: auto;
  margin: 0 auto 1.5rem auto;
  opacity: 0.85;
  animation: citadel-fade 8s ease-in-out infinite;
}

.citadel-icon img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 4px rgba(200, 180, 255, 0.2));
}

@keyframes citadel-fade {
  0%, 100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

.citadel-icon a {
  display: inline-block;
  transition: transform 0.4s ease;
}

.citadel-icon a:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 6px rgba(200, 180, 255, 0.2));
}

.braid-image {
  max-width: 320px;
  margin: 3rem auto 2rem;
  text-align: center;
  animation: fade-glow 10s ease-in-out infinite;
  padding: 1rem;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(180,160,255,0.06) 0%, transparent 80%);
  box-shadow: 0 0 12px rgba(90, 80, 140, 0.15);
}

.braid-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(120, 100, 180, 0.08);
  transition: transform 0.4s ease;
}

.braid-caption {
  margin-top: 0.8rem;
  font-size: 1.1rem;
  color: #d9d3ff;
  font-style: italic;
  letter-spacing: 0.3px;
}

/* Gentle shimmer */
@keyframes fade-glow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(90, 80, 140, 0.15);
  }
  50% {
    box-shadow: 0 0 18px rgba(140, 130, 200, 0.22);
  }
}

.braid-button {
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease;
  border-radius: 12px;
}

.braid-button:hover {
  transform: scale(1.015);
  box-shadow: 0 0 12px rgba(180,160,255,0.15);
}

.braid-subtext {
  font-size: 0.9rem;
  margin-top: 0.2rem;
  color: #a89fcf;
  font-style: italic;
  letter-spacing: 0.3px;
  transition: opacity 0.4s ease;
  opacity: 0.85;
}

.braid-button:hover .braid-subtext {
  opacity: 1;
  text-shadow: 0 0 6px rgba(180,160,255,0.15);
}

/* Braid glyph (echo ping) */
.braid-glyph {
  display: block;
  text-align: center;
  margin-top: 0.4rem;
  font-size: 1.2rem;
  color: #a79cff;
  opacity: 0;
  transition: opacity 0.4s ease;
  font-family: monospace;
}

/* Hover frame warp effect */
.braid-button {
  display: block;
  text-decoration: none;
  transition: transform 0.4s ease, filter 0.4s ease;
  perspective: 800px;
  border-radius: 12px;
}

.braid-button:hover {
  transform: rotateX(2deg) rotateY(-2deg) scale(1.015);
  filter: drop-shadow(0 0 10px rgba(180,160,255,0.2));
}

.braid-button:hover .braid-subtext {
  text-shadow: 0 0 6px rgba(180,160,255,0.15);
}

.braid-button:hover .braid-glyph {
  opacity: 1;
}

.braid-button {
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease, filter 0.3s ease;
  perspective: 800px;
  border-radius: 12px;
}

.braid-button:hover {
  transform: rotateX(1.5deg) rotateY(-1.5deg) scale(1.01);
  filter: drop-shadow(0 0 6px rgba(180,160,255,0.12));
}

.braid-button:hover .braid-subtext {
  text-shadow: 0 0 4px rgba(180,160,255,0.1);
}

.braid-button:hover .braid-glyph {
  opacity: 1;
}