/* ===== Lore Story (Sticky Gallery) — v1.1 CSS ===== */
/* Adds dynamic top offset + better anchor behavior */
#lore-story { --gap: 1.25rem; --r: 18px; --border: rgba(255,255,255,.12);
  --text: #f2f5f9; --dim:#c6cfda; --brand:#e6d69b; --accent:#7ac7ff;
  --bg-elev: rgba(255,255,255,.04); --chip:#1a1f2b; --chip-on:#2d364b;
  /* default fallback; JS will set this to header height + 16px */
  --sticky-offset: 6.5rem;
}
#lore-story * { box-sizing: border-box; }

#lore-story .section { max-width:1200px; margin:0 auto; padding: 2rem 1rem 2.5rem; }
#lore-story .grid { display:grid; grid-template-columns: 1fr 1.35fr; gap: 1.25rem; align-items:start; }
@media (max-width: 980px){ #lore-story .grid { grid-template-columns: 1fr; } }

/* Left sticky rail */
#lore-story .rail { position: sticky; top: var(--sticky-offset); align-self:start; }
#lore-story .frame { position: relative; width:100%; aspect-ratio:1/1; border:1px solid var(--border); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); overflow:hidden;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.25), inset 0 0 3rem rgba(255,255,255,.04); }
#lore-story .frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.02);
  transition: opacity .35s ease, transform .6s ease; }
#lore-story .frame img.is-active { opacity:1; transform:scale(1); }
#lore-story .caption { margin-top:.5rem; color:#c6cfda; font-size:.95rem; text-align:center; min-height:1.4em; }

/* Right article */
#lore-story .article { color: #f2f5f9; }
#lore-story .kicker { color: #c6cfda; letter-spacing:.18em; text-transform:uppercase; font-size:.9rem; margin-bottom:.25rem; }
#lore-story h2 { margin:.1rem 0 1rem; font-size: clamp(2rem, 3vw, 2.6rem); color: #e6d69b; text-shadow: 0 0 .5rem rgba(255,255,200,.15); }
#lore-story .standfirst { color: #c6cfda; font-size:1.05rem; margin: 0 0 1.25rem; }

#lore-story .beat + .beat { margin-top: 1.15rem; }
#lore-story .beat h3 { margin:.7rem 0 .35rem; font-size:1.25rem; letter-spacing:.2px; }
#lore-story .beat p { margin:.5rem 0; line-height:1.7; color:#f2f5f9; }
#lore-story .beat[data-beat="Grey_city"] p:first-of-type::first-letter { 
  font-size: 3.3rem; float:left; line-height: .95; padding:.22rem .5rem .1rem 0; color: #e6d69b; 
}

/* Ensure anchor jumps don’t hide under the fixed header */
#lore-story .beat { scroll-margin-top: calc(var(--sticky-offset) + 12px); }

#lore-story blockquote { margin:1rem 0; padding: .9rem 1rem; border-left:3px solid #7ac7ff;
  background: rgba(255,255,255,.04); border-radius: 0 18px 18px 0; color: #f2f5f9; }
#lore-story blockquote .attribution { color: #c6cfda; font-size:.95rem; margin-top:.25rem; }

#lore-story .facts { margin:1.4rem 0 .5rem; display:flex; gap:.5rem; flex-wrap:wrap; }
#lore-story .chip { background: #1a1f2b; color: #f2f5f9; border:1px solid rgba(255,255,255,.12);
  padding:.35rem .6rem; border-radius:999px; font-size:.9rem; }
#lore-story .chip .dot { display:inline-block; width:.45rem; height:.45rem; border-radius:999px; margin-right:.35rem; background:#7ac7ff; }

/* Mobile anchor nav */
#lore-story .anchors { display:none; margin:.75rem 0 0; gap:.35rem; flex-wrap:wrap; }
#lore-story .anchors a { color: #7ac7ff; text-decoration:none; font-size:.95rem; }
@media (max-width: 980px){ #lore-story .anchors { display:flex; } }