/* ——— Anunnaki Corridor polish ——— */
:root {
  --ink: #e9d7ff;
  --ink-soft: #bfa9ff;
  --glow: rgba(192,132,252,.35);
  --glow-strong: rgba(192,132,252,.55);
  --panel: rgba(18,0,30,.55);
  --panel-edge: rgba(192,132,252,.18);
}

/* Back link */
.corridor-back {
  display:inline-block;
  margin: 10px 0 22px 0;
  padding: 6px 12px;
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink-soft);
  backdrop-filter: blur(2px);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 0 0 0 transparent;
}
.corridor-back:hover {
  color: var(--ink);
  border-color: var(--glow-strong);
  box-shadow: 0 0 22px 0 var(--glow);
  transform: translateY(-1px);
}

/* Opening quote spacing */
.corridor-quote {
  margin: 18px 0 28px 0;
  padding-left: 14px;
  border-left: 2px solid var(--panel-edge);
  color: var(--ink-soft);
}

/* Fragments list */
.fragments-list {
  list-style: none;
  margin: 12px 0 24px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 16px;
}

/* Fragment button */
.frag-btn {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  background: radial-gradient(120% 160% at 10% 10%, var(--panel-edge), transparent 55%),
              radial-gradient(120% 160% at 90% 90%, var(--glow), transparent 60%),
              var(--panel);
  border: 1px solid var(--panel-edge);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02),
              0 8px 26px -18px var(--glow);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .25s ease;
}
.frag-btn:hover {
  transform: translateY(-1px);
  border-color: var(--glow-strong);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03),
              0 14px 38px -16px var(--glow-strong);
}

/* Hide duplicate tiny caption under the hero if present */
.hero-caption,
.cover-caption,
.small-under-title { display: none !important; }

.corridor-sidebar {
  position: fixed;
  top: 4rem; /* adjust to match header spacing */
  left: 1rem;
  width: 220px;
  background: #111;
  color: #eee;
  border: 1px solid #444;
  padding: 1rem;
  border-radius: 0.75rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  line-height: 1.5;
}

.corridor-sidebar h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #ffd27f;
}

.corridor-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.corridor-sidebar li {
  margin-bottom: 0.4rem;
}

.corridor-sidebar a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.corridor-sidebar a:hover {
  color: #ffd27f;
}

/* Sidebar: fixed, never taller than the viewport, scrolls internally */
.corridor-sidebar{
  position: fixed;
  top: 1rem;          /* adjust if you have a fixed header */
  left: 1rem;
  bottom: 1rem;       /* pins the bottom -> gives us a height to calc */
  width: 240px;
  overflow: auto;     /* <— lets the sidebar itself scroll */
  background:#111;
  color:#eee;
  border:1px solid #444;
  padding:1rem;
  border-radius:0.75rem;
  font-family:'Cormorant Garamond',serif;
  font-size:0.95rem;
  line-height:1.5;
  z-index: 1000;      /* stay above content */
}

.corridor-sidebar h3{font-size:1.1rem;margin-bottom:0.5rem;color:#ffd27f;}
.corridor-sidebar ul{list-style:none;margin:0;padding:0;}
.corridor-sidebar li{margin-bottom:0.4rem;}
.corridor-sidebar a{color:#bbb;text-decoration:none;transition:color .2s;}
.corridor-sidebar a:hover{color:#ffd27f;}

/* Push main content to the right so it doesn’t sit under the sidebar */
.anunnaki-corridor{
  margin-left: 280px; /* 240px + 40px gutter */
}

/* Responsive: on narrow screens / heavy zoom, stack it on top */
@media (max-width: 900px){
  .corridor-sidebar{
    position: static;   /* no longer fixed */
    width: auto;
    max-height: none;
    margin: 0 0 1rem 0;
  }
  .anunnaki-corridor{
    margin-left: 0;
  }
}


/* Smooth scroll for anchor jumps */
html { scroll-behavior: smooth; }

/* Ensure anchors don't hide under fixed headers / top padding */
.story-block { scroll-margin-top: 96px; } /* adjust if your header is taller */

/* Active link highlight from scrollspy */
.corridor-sidebar a.is-active {
  color: #ffd27f;
  font-weight: 600;
  text-decoration: underline;
}

/* Back-to-Top button */
#backToTop {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.6rem;
  background: #111;
  color: #eee;
  border: 1px solid #444;
  cursor: pointer;
  display: none;          /* toggled by JS */
  z-index: 1001;
}
#backToTop:hover { color: #ffd27f; border-color: #666; }

.fragment {
  margin: 3rem 0;
  padding: 1rem 1.5rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid #2c2838;
  border-radius: 0.8rem;
}

.fragment h2 {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  color: #ffd27f;
}

.fragment-image {
  text-align: center;
  margin-bottom: 1rem;
}
.fragment-image img {
  max-width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #39364a;
}

.fragment {
  margin: 3rem 0;
  padding: 1rem 1.5rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid #2c2838;
  border-radius: 0.8rem;
  overflow: visible;   /* <-- make sure this is not hidden */
}

.fragment-image {
  text-align: center;
  margin-bottom: 1.5rem; /* give more space under the image */
}

.fragment-image img {
  max-width: 100%;
  height: auto;         /* preserves aspect ratio */
  display: block;
  margin: 0 auto;
  border-radius: 0.5rem;
  border: 1px solid #39364a;
}

/* ===== Sidebar base ===== */
.corridor-toc{
  position: fixed;
  inset: 0 auto 0 0;
  width: 280px;
  background: rgba(10, 6, 22, .92);
  border-right: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  padding: 18px 16px;
  overflow-y: auto;
  z-index: 1000;
}

.toc-title{
  margin: 8px 0 12px;
  font-weight: 700;
  color: #f6d17a;
  letter-spacing: .3px;
}

#toc-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

#toc-list li { margin: 6px 0; }
#toc-list a{
  display: block;
  color: #cbbaf6;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
  line-height: 1.25;
}
#toc-list a:hover{ background: rgba(255,255,255,.06); }
#toc-list a.active{
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* keep main content clear of the sidebar on wide screens */
.page-wrap, main, .content {
  margin-left: 280px;   /* adjust if your main wrapper uses a different class */
  transition: margin-left .25s ease;
}

/* ===== Toggle button (visible on mobile) ===== */
.toc-toggle{
  display: none;        /* hidden on desktop */
  position: sticky;
  top: 8px;
  left: 8px;
  width: 46px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
}

/* ===== Mobile behavior ===== */
@media (max-width: 900px){
  .corridor-toc{
    width: 78vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .corridor-toc.open{ transform: translateX(0); }

  .toc-toggle{ display: inline-flex; align-items:center; justify-content:center; }

  /* let content use full width when the sidebar is hidden */
  .page-wrap, main, .content { margin-left: 0; }
}

html {
  scroll-padding-top: 500px;  /* adjust this value until images line up */
}

.fragment-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.fragment-link:hover {
  opacity: 0.9; /* little hover feedback */
  cursor: pointer;
}

/* Hide sidebar on screens smaller than 768px (tablets + phones) */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }

  .content {
    margin-left: 0; /* make main content full width */
  }
}
.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%; }
}