/* ═══════════════════════════════════════════════════════════
   LORE ENTRY PAGE — Individual lore articles
   ═══════════════════════════════════════════════════════════ */

/* ── Daedric Font — HayghinDaedric (OFL-1.1) ─── */
@font-face{
  font-family:'Daedric';
  src:url('/fonts/HayghinDaedric.woff2') format('woff2'),
      url('/fonts/HayghinDaedric.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:swap}

/* ── Daedric Easter Egg Inscriptions ─── */
.daedric-inscription{
  position:relative;display:block;text-align:center;
  margin:2rem auto;padding:1rem 1.5rem;
  max-width:max-content;cursor:pointer;
  font-family:'Daedric',serif;font-size:clamp(1.2rem,2.5vw,1.6rem);
  letter-spacing:.3em;line-height:1.8;
  color:color-mix(in srgb, var(--le-accent) 18%, #111);
  text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5);
  transition:color .6s ease,text-shadow .6s ease;
  user-select:none;opacity:.6}
.daedric-inscription::after{
  content:attr(data-translation);
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  font-family:var(--font-body);font-size:.72rem;font-style:italic;
  letter-spacing:.05em;line-height:1.4;
  color:var(--le-accent);white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease,transform .4s ease;
  padding-bottom:.4rem;transform:translateX(-50%) translateY(4px)}
.daedric-inscription:hover{
  color:color-mix(in srgb, var(--le-accent) 55%, #222);
  text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 8px var(--le-glow),0 0 20px var(--le-glow);
  opacity:1}
.daedric-inscription:hover::after{
  opacity:1;transform:translateX(-50%) translateY(0)}
/* Clicked/revealed state */
.daedric-inscription.is-revealed{
  color:color-mix(in srgb, var(--le-accent) 45%, #222);
  text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 6px var(--le-glow);
  opacity:.8}
.daedric-inscription.is-revealed::after{opacity:.8;transform:translateX(-50%) translateY(0)}
/* Mobile — tap to reveal, keep visible */
@media(max-width:768px){
  .daedric-inscription{font-size:1rem;letter-spacing:.2em;padding:.8rem 1rem}
  .daedric-inscription::after{font-size:.65rem;position:relative;
    left:auto;bottom:auto;transform:none;display:block;
    white-space:normal;text-align:center;padding-top:.5rem;
    opacity:0;transition:opacity .4s}
  .daedric-inscription.is-revealed::after{opacity:.8;transform:none}}

.nav.has-subrow.scrolled{border-bottom:none!important}

/* ── Reading progress bar ─── */
.le-progress{position:fixed;top:0;left:0;width:0%;height:2px;background:var(--le-accent);z-index:1000;pointer-events:none;transition:opacity .3s;opacity:0}
.le-progress.is-visible{opacity:1}
.le-progress::after{content:'';position:absolute;right:0;top:0;width:80px;height:100%;background:linear-gradient(90deg,transparent,var(--le-glow));opacity:.6}

/* ── Breadcrumbs ─── */
.le-breadcrumb{font-family:var(--font-label);font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;color:var(--le-dim);margin-bottom:1.2rem;opacity:.6}
.le-breadcrumb a{color:var(--le-dim);text-decoration:none;transition:color .3s}
.le-breadcrumb a:hover{color:var(--le-accent)}
.le-breadcrumb__sep{margin:0 .4rem;opacity:.4}

.le-w::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px}

/* ── Hero with background image ─── */
.le-hero{position:relative;overflow:hidden;padding:clamp(5rem,12vh,8rem) 2rem clamp(3.5rem,7vh,5.5rem);text-align:center;min-height:clamp(420px,66vh,660px);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:16px}
.le-hero__c{position:relative;z-index:2;max-width:760px}
.le-hero__era{font-family:var(--font-label);font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--le-accent);margin-bottom:1rem}
.le-hero__icon{font-size:1.8rem;color:var(--le-accent);margin-bottom:1.1rem;opacity:.7}
.le-hero__title{font-family:var(--font-display);font-size:clamp(2rem,5.4vw,3.6rem);font-weight:400;letter-spacing:.04em;line-height:1.08;color:#f1ede5;margin-bottom:.9rem;text-shadow:0 2px 30px rgba(0,0,0,.55),0 0 50px var(--le-glow);text-wrap:balance}
.le-hero__date{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.18em;color:var(--le-accent);opacity:.85}

/* ── Floating book cover in hero ─── */
.le-hero__cover{position:absolute;left:clamp(2rem,5vw,6rem);top:50%;transform:translateY(-50%) rotate(-3deg);z-index:3;width:140px;pointer-events:none;transition:transform 1s cubic-bezier(.32,.72,0,1),opacity .8s ease;opacity:.85}
.le-hero__cover img{width:100%;height:auto;display:block;border-radius:3px 6px 6px 3px;box-shadow:4px 6px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)}
@media(max-width:1100px){.le-hero__cover{display:none}}

/* ── Content ─── */
.le-ct{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:3rem 1.5rem 4rem}
.le-prose{font-family:var(--font-body);font-size:1.0rem;color:#c4c0b8;line-height:1.95}.le-prose p{margin:0 0 1.3rem}.le-prose p:last-child{margin-bottom:0}.le-prose em{color:#dcd8d0}.le-prose strong{color:#e8e4dc;font-weight:500}
.le-sp{display:grid;gap:2rem;margin:2.5rem 0;align-items:start}.le-sp--l{grid-template-columns:300px 1fr}.le-sp--r{grid-template-columns:1fr 300px}
.le-sub{font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:400;line-height:1.16;letter-spacing:-.01em;color:#ece8e0;margin:0 0 1.6rem;text-align:center;text-wrap:balance}
.le-note{background:linear-gradient(165deg,rgba(16,16,20,.4),rgba(12,12,18,.3));border:1px solid var(--le-border);border-left:3px solid var(--le-accent);border-radius:10px;padding:2.2rem;margin:2rem 0;position:relative;backdrop-filter:blur(4px);box-shadow:0 2px 12px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.02)}

/* ── Animated chapter numbers ─── */
@keyframes chapterReveal{0%{opacity:0;transform:translateY(10px) scale(.95)}100%{opacity:.7;transform:translateY(0) scale(1)}}
.le-sub{counter-increment:le-section}
.le-sub::before{content:counter(le-section,upper-roman) " - ";font-family:var(--font-mono);font-size:.58em;letter-spacing:.08em;color:var(--le-accent);vertical-align:.06em}
.le-w{counter-reset:le-section}
/* ── Chapter headers ─── */
.le-chapter{text-align:center;padding:0 0 2.5rem;position:relative}
.le-chapter__ornament{font-family:var(--font-display);font-size:.65rem;letter-spacing:.5em;color:var(--le-dim);margin-bottom:1.2rem;opacity:.5}
.le-chapter__number{font-family:var(--font-display);font-size:.6rem;letter-spacing:.6em;text-transform:uppercase;color:var(--le-dim);margin-bottom:.5rem;opacity:.7}
.le-chapter__title{font-family:var(--font-display);font-size:clamp(1.15rem,2.5vw,1.6rem);letter-spacing:.2em;text-transform:uppercase;color:var(--le-accent);margin-bottom:.8rem;text-shadow:0 0 30px var(--le-glow)}
.le-chapter__line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--le-accent),transparent);margin:0 auto;opacity:.4}

/* ── Ayleid shimmer — cool teal-silver sweep ─── */
@keyframes ayleShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.ayleid-shimmer{background:linear-gradient(90deg, var(--le-accent,#6a9eb4) 0%, var(--le-accent,#6a9eb4) 35%, rgba(180,220,240,0.9) 50%, var(--le-accent,#6a9eb4) 65%, var(--le-accent,#6a9eb4) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ayleShimmer 4.5s ease-in-out infinite}

/* ── Crimson shimmer — deep red-gold sweep ─── */
@keyframes crimShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.crimson-shimmer{background:linear-gradient(90deg, var(--le-accent,#e0607a) 0%, var(--le-accent,#e0607a) 35%, rgba(255,190,160,0.85) 50%, var(--le-accent,#e0607a) 65%, var(--le-accent,#e0607a) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:crimShimmer 4.5s ease-in-out infinite}

/* ── Golden shimmer — warm gold-white sweep ─── */
@keyframes goldShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.golden-shimmer{background:linear-gradient(90deg, var(--le-accent,#d4a850) 0%, var(--le-accent,#d4a850) 35%, rgba(255,240,180,0.9) 50%, var(--le-accent,#d4a850) 65%, var(--le-accent,#d4a850) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:goldShimmer 4.5s ease-in-out infinite}

/* ── Ayleid Word Wall — Interactive Decoder ───────────────
   Skyrim Word Wall style + click-to-decode mini-game.
   Words start as dark chiselled stone; clicking reveals
   their meaning one by one. Full translation unlocks
   when all words are decoded or the reader gives up.
   ─────────────────────────────────────────────────────── */

/* Animations */
@keyframes aylBreathe{0%,100%{opacity:.5}50%{opacity:.7}}
@keyframes aylSweep{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes aylWordPop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes aylRevealIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Stone slab wrapper ─── */
.ayl-wrap{position:relative;margin:3.5rem 0;padding:0;border-radius:12px;overflow:hidden}
/* Edge vignette */
.ayl-wrap::before{content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 10%, transparent 90%, rgba(0,0,0,.2) 100%),
    linear-gradient(90deg, rgba(0,0,0,.12) 0%, transparent 6%, transparent 94%, rgba(0,0,0,.12) 100%);
  pointer-events:none;z-index:4}
/* Stone texture */
.ayl-wrap::after{content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size:256px;pointer-events:none;z-index:1;mix-blend-mode:multiply}

/* ── Carved text block ─── */
.ayl{display:block;position:relative;text-align:center;
  font-style:normal;font-weight:400;
  font-size:clamp(1.05rem,2.2vw,1.4rem);
  letter-spacing:.25em;line-height:2.2;word-spacing:.15em;
  user-select:none;padding:2rem 2rem 1.5rem;
  z-index:2;margin:0;
  color:color-mix(in srgb, var(--le-accent) 25%, #1a1a1a);
  -webkit-text-fill-color:color-mix(in srgb, var(--le-accent) 25%, #1a1a1a);
  text-shadow:0 2px 1px rgba(0,0,0,.95),0 3px 5px rgba(0,0,0,.35),0 -1px 0 rgba(255,255,255,.035);
  -webkit-filter:url('#ayl-rough');filter:url('#ayl-rough')}

/* Glow overlay via data-ayl */
.ayl::before{content:attr(data-ayl);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:inherit;letter-spacing:inherit;line-height:inherit;font:inherit;word-spacing:inherit;
  color:var(--le-accent);-webkit-text-fill-color:var(--le-accent);
  text-shadow:0 0 4px var(--le-glow),0 0 10px var(--le-glow);
  opacity:.3;pointer-events:none;z-index:3;
  animation:aylBreathe 8s ease-in-out infinite;mix-blend-mode:screen}

/* Shimmer variants — subtle light sweep */
.ayl--shimmer{background-image:linear-gradient(90deg,
    transparent 0%, transparent 30%,
    rgba(180,220,240,0.1) 49%, rgba(200,235,255,0.15) 50%, rgba(180,220,240,0.1) 51%,
    transparent 70%, transparent 100%);
  background-size:300% 100%;background-repeat:no-repeat;
  animation:aylSweep 9s ease-in-out infinite}
.ayl--crimson{background-image:linear-gradient(90deg,
    transparent 0%, transparent 30%,
    rgba(255,180,140,0.1) 49%, rgba(255,200,170,0.15) 50%, rgba(255,180,140,0.1) 51%,
    transparent 70%, transparent 100%);
  background-size:300% 100%;background-repeat:no-repeat;
  animation:aylSweep 9s ease-in-out infinite}
.ayl--golden{background-image:linear-gradient(90deg,
    transparent 0%, transparent 30%,
    rgba(255,220,120,0.1) 49%, rgba(255,240,160,0.15) 50%, rgba(255,220,120,0.1) 51%,
    transparent 70%, transparent 100%);
  background-size:300% 100%;background-repeat:no-repeat;
  animation:aylSweep 9s ease-in-out infinite}

/* ── Individual words — clickable ─── */
.ayl__w{cursor:pointer;position:relative;
  transition:color .5s ease,text-shadow .5s ease,-webkit-text-fill-color .5s ease;
  border-bottom:1px solid transparent;padding-bottom:1px}
/* Hover — word lightens */
.ayl__w:hover{
  color:color-mix(in srgb, var(--le-accent) 55%, #2a2a2a)!important;
  -webkit-text-fill-color:color-mix(in srgb, var(--le-accent) 55%, #2a2a2a)!important;
  text-shadow:0 2px 1px rgba(0,0,0,.95),0 3px 5px rgba(0,0,0,.35),0 -1px 0 rgba(255,255,255,.05),0 0 5px var(--le-glow);
  border-bottom-color:var(--le-accent)}
/* Decoded — word glows softly */
.ayl__w.is-decoded{
  color:color-mix(in srgb, var(--le-accent) 65%, #3a3a3a)!important;
  -webkit-text-fill-color:color-mix(in srgb, var(--le-accent) 65%, #3a3a3a)!important;
  text-shadow:0 2px 1px rgba(0,0,0,.9),0 -1px 0 rgba(255,255,255,.04),0 0 6px var(--le-glow);
  animation:aylWordPop .4s ease;
  border-bottom-color:transparent}
/* Active — just clicked */
.ayl__w.is-active{
  color:var(--le-accent)!important;
  -webkit-text-fill-color:var(--le-accent)!important;
  text-shadow:0 2px 1px rgba(0,0,0,.9),0 -1px 0 rgba(255,255,255,.06),0 0 8px var(--le-glow),0 0 18px var(--le-glow)}

/* ── Decode panel below the wall ─── */
.ayl-decode{position:relative;z-index:5;text-align:center;padding:.8rem 1.5rem 1.2rem;
  min-height:2.5rem}
.ayl-decode__prompt{font-family:var(--font-label);font-size:.5rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--le-dim);opacity:.5;
  animation:aylBreathe 4s ease-in-out infinite;
  transition:opacity .4s}
.ayl-wrap.is-active .ayl-decode__prompt{opacity:0;height:0;overflow:hidden}
/* Currently decoded word meaning */
.ayl-decode__meaning{font-family:var(--font-body);font-size:.88rem;font-style:italic;
  color:var(--le-accent);line-height:1.6;min-height:1.4em;
  transition:opacity .3s;opacity:0;margin-bottom:.4rem}
.ayl-decode__meaning.is-visible{opacity:1;animation:aylRevealIn .35s ease}
/* Progress counter */
.ayl-decode__progress{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
  color:var(--le-dim);opacity:0;transition:opacity .4s;margin-bottom:.6rem}
.ayl-wrap.is-active .ayl-decode__progress{opacity:.5}
/* Full translation — revealed at end */
.ayl-decode__full{font-family:var(--font-body);font-size:.85rem;font-style:italic;
  color:color-mix(in srgb, var(--le-accent) 50%, #a0a0a0);line-height:1.7;
  max-width:520px;margin:0 auto;padding:.8rem 0;
  opacity:0;transform:translateY(8px);
  transition:opacity .8s ease,transform .8s ease;pointer-events:none}
.ayl-decode__full.is-revealed{opacity:1;transform:translateY(0);pointer-events:auto}
/* Reveal button */
.ayl-decode__reveal{display:none;font-family:var(--font-label);font-size:.48rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--le-dim);background:none;
  border:1px solid rgba(160,160,170,.1);border-radius:6px;
  padding:.4rem 1rem;cursor:pointer;
  transition:transform .5s cubic-bezier(.32,.72,0,1),border-color .5s cubic-bezier(.32,.72,0,1),color .3s ease;margin-top:.3rem}
.ayl-wrap.is-active .ayl-decode__reveal{display:inline-block}
.ayl-decode__reveal:hover{color:var(--le-accent);border-color:var(--le-accent);transform:translateY(-1px)}
.ayl-decode__reveal:active{transform:scale(0.97)}
.ayl-wrap.is-complete .ayl-decode__reveal{display:none}

/* ── Footnotes ─── */
.le-footnotes{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--le-border)}
.le-footnotes__title{font-family:var(--font-label);font-size:.55rem;letter-spacing:.25em;text-transform:uppercase;color:var(--le-dim);margin-bottom:1rem}
.le-footnote{font-family:var(--font-mono);font-size:.78rem;color:var(--le-dim);line-height:1.7;margin-bottom:.5rem;padding-left:1.5rem;text-indent:-1.5rem}
.le-footnote a{color:var(--le-accent);text-decoration:none;border-bottom:1px dotted var(--le-border)}
.le-footnote a:hover{color:#dcd8d0}
sup.fn{font-size:.65rem;color:var(--le-accent);cursor:help;margin:0 .1rem}
sup.fn a{color:var(--le-accent);text-decoration:none}

/* ── Social sharing ─── */
.le-share{display:flex;align-items:center;gap:.8rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(160,160,170,.04)}
.le-share__label{font-family:var(--font-label);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--le-dim)}
.le-share__btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-label);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--le-dim);text-decoration:none;padding:.4rem .8rem;border:1px solid rgba(160,160,170,.08);border-radius:6px;transition:transform .5s cubic-bezier(.32,.72,0,1),border-color .5s cubic-bezier(.32,.72,0,1),color .3s ease;cursor:pointer;background:none}
.le-share__btn:hover{border-color:var(--le-accent);color:#c8c4bc;transform:translateY(-1px)}
.le-share__btn:active{transform:scale(0.97)}

/* ── Cross-reference link ─── */
.le-xref{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-body);font-size:.88rem;font-style:italic;color:var(--le-accent);text-decoration:none;padding:.6rem 0;transition:color .3s}
.le-xref:hover{color:#dcd8d0}

/* ── Clan emblem animation ─── */
@keyframes emblemPulse{0%,100%{filter:brightness(.82) contrast(1.05) drop-shadow(0 0 0 transparent)}50%{filter:brightness(.92) contrast(1.1) drop-shadow(0 0 12px var(--le-glow))}}
.le-img--emblem img{animation:emblemPulse 4s ease-in-out infinite}

/* ── House visit button ─── */
.le-visit{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-label);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--le-accent);text-decoration:none;padding:.7rem 1.8rem;border:1px solid var(--le-border);border-radius:8px;margin-top:2rem;transition:transform .5s cubic-bezier(.32,.72,0,1),border-color .5s cubic-bezier(.32,.72,0,1),background .3s ease,color .3s ease,box-shadow .5s cubic-bezier(.32,.72,0,1)}
.le-visit:hover{border-color:var(--le-accent);background:var(--le-glow);color:#e8e4dc;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2),0 0 10px var(--le-glow)}
.le-visit:active{transform:scale(0.97)}

.le-back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-label);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;color:var(--le-dim);text-decoration:none;padding:.5rem 1.3rem;border:1px solid rgba(160,160,170,.08);border-radius:8px;transition:transform .5s cubic-bezier(.32,.72,0,1),border-color .5s cubic-bezier(.32,.72,0,1),color .3s ease;margin-top:3rem}.le-back:hover{border-color:var(--le-accent);color:#c8c4bc;transform:translateY(-1px)}.le-back:active{transform:scale(0.97)}

/* ── Infobox visual upgrade ─── */
.wp{background:linear-gradient(165deg,rgba(16,16,20,.6),rgba(12,12,18,.5));border:1px solid var(--le-border);border-left:3px solid var(--le-accent);border-radius:10px;margin-bottom:2.5rem;backdrop-filter:blur(4px);position:relative;box-shadow:0 2px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.03),inset 0 -1px 0 rgba(0,0,0,.1);overflow:hidden}
.wp__h{padding:.75rem 1.2rem;border-bottom:1px solid rgba(160,160,170,.05);font-family:var(--font-display);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--le-accent);background:linear-gradient(90deg,var(--le-glow),rgba(16,16,20,.5));text-shadow:0 0 20px var(--le-glow);position:relative}
.wp__h::after{content:'';position:absolute;bottom:0;left:1rem;right:1rem;height:1px;background:linear-gradient(90deg,transparent,var(--le-glow),transparent)}
.wp__r{display:grid;grid-template-columns:130px 1fr;border-bottom:1px solid rgba(160,160,170,.025);transition:background .5s cubic-bezier(.32,.72,0,1)}.wp__r:last-child{border-bottom:none}
.wp__r:hover{background:rgba(160,160,170,.02)}
.wp__l{padding:.5rem 1rem;font-family:var(--font-label);font-size:.57rem;letter-spacing:.16em;text-transform:uppercase;color:var(--le-dim);background:rgba(160,160,170,.02);padding-top:.6rem}
.wp__v{padding:.5rem 1rem;font-family:var(--font-body);font-size:.9rem;color:#b8b4ac;line-height:1.65}

/* ── Section divider variants ─── */
.le-div{text-align:center;padding:2rem 0;color:var(--le-dim);font-size:.7rem;letter-spacing:.5em;opacity:.5}
.le-div--ayleid::before{content:'◈ — ⌘ — ◈';font-size:.65rem}
.le-div--crimson::before{content:'✦ — ◆ — ✦';font-size:.65rem}

/* ── Image hover parallax container ─── */
/* Skeleton placeholder animation */
@keyframes leSkeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
.le-img{margin:2.2rem 0;overflow:hidden;position:relative;background:linear-gradient(90deg,rgba(20,20,24,0) 0%,rgba(20,20,24,.6) 40%,var(--le-glow,rgba(160,160,170,.04)) 50%,rgba(20,20,24,.6) 60%,rgba(20,20,24,0) 100%);background-size:200% 100%;animation:leSkeleton 2s ease-in-out infinite;min-height:120px}
.le-img.is-loaded{background:none;min-height:0}
.le-img::after{content:'';position:absolute;inset:0;background:var(--le-accent);mix-blend-mode:color;opacity:.08;pointer-events:none;transition:opacity .4s}.le-img:hover::after{opacity:.04}
.le-img img{width:100%;display:block;border:1px solid var(--le-border);border-radius:8px;filter:brightness(.82) saturate(.9);transition:filter .6s cubic-bezier(.32,.72,0,1),transform 1s cubic-bezier(.32,.72,0,1),opacity .4s;will-change:transform;opacity:0}
.le-img.is-loaded img{opacity:1}
.le-img:hover img{filter:brightness(.92) saturate(1);transform:scale(1.02)}
/* Error fallback placeholder */
.le-img__fallback{display:flex;align-items:center;justify-content:center;min-height:180px;background:rgba(16,16,20,.5);border:1px solid var(--le-border);color:var(--le-dim);font-size:2rem;opacity:.4}
.le-img__cap{font-family:var(--font-body);font-size:.82rem;font-style:italic;color:rgba(190,185,178,0.75);padding:.6rem 0 0}

/* ── Floating Dots Navigation (vertical stepper) ─── */
.le-dots{position:fixed;top:50%;right:max(calc((100vw - 820px)/2 - 80px), 20px);transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:0;opacity:0;transition:opacity .5s ease}
.le-dots.is-visible{opacity:1}
.le-dots__line{width:1px;height:16px;background:rgba(160,160,170,.08);flex-shrink:0}
.le-dots__dot{position:relative;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(160,160,170,.15);background:transparent;cursor:pointer;transition:all .35s ease;flex-shrink:0}
.le-dots__dot:hover{border-color:var(--le-accent);transform:scale(1.3)}
.le-dots__dot.is-active{border-color:var(--le-accent);background:var(--le-accent);box-shadow:0 0 8px var(--le-glow),0 0 20px var(--le-glow)}
.le-dots__dot.is-active::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--le-accent);opacity:.3;animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.5);opacity:0}}
.le-dots__tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--font-label);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--le-dim);background:rgba(10,10,14,.92);border:1px solid var(--le-border);border-radius:8px;padding:.3rem .7rem;pointer-events:none;opacity:0;transition:opacity .4s cubic-bezier(.32,.72,0,1),transform .4s cubic-bezier(.32,.72,0,1);transform:translateY(-50%) translateX(5px);backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.03)}
.le-dots__dot:hover .le-dots__tip{opacity:1;transform:translateY(-50%) translateX(0)}
.le-dots__dot.is-active .le-dots__tip{color:var(--le-accent)}

/* Legacy TOC (keep for mobile drawer fallback) */
.le-toc{display:none}
.le-toc__title{font-family:var(--font-label);font-size:.48rem;letter-spacing:.25em;text-transform:uppercase;color:var(--le-dim);margin-bottom:.6rem}
.le-toc__list{list-style:none;padding:0;margin:0;border-left:1px solid rgba(160,160,170,.06)}
.le-toc__item{display:block}
.le-toc__link{display:block;padding:.35rem .8rem;font-family:var(--font-body);font-size:.72rem;color:var(--le-dim);text-decoration:none;border-left:2px solid transparent;margin-left:-1px;transition:all .25s;line-height:1.4}
.le-toc__link:hover{color:var(--le-accent);border-left-color:rgba(160,160,170,.15)}
.le-toc__link.is-active{color:var(--le-accent);border-left-color:var(--le-accent)}
/* Mobile TOC: floating button + drawer */
.le-toc-mobile{display:none}
.le-toc-mobile__btn{position:fixed;bottom:20px;right:20px;z-index:60;width:44px;height:44px;border-radius:50%;background:rgba(10,10,14,.92);border:1px solid var(--le-border);color:var(--le-accent);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);box-shadow:0 4px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.03);transition:transform .5s cubic-bezier(.32,.72,0,1),border-color .5s cubic-bezier(.32,.72,0,1),box-shadow .5s cubic-bezier(.32,.72,0,1)}
.le-toc-mobile__btn:hover{border-color:var(--le-accent);transform:scale(1.05);box-shadow:0 4px 20px rgba(0,0,0,.4),0 0 12px var(--le-glow)}
.le-toc-mobile__btn:active{transform:scale(0.95)}
.le-toc-drawer{position:fixed;bottom:0;left:0;right:0;z-index:61;background:rgba(10,10,14,.96);border-top:1px solid var(--le-border);border-radius:16px 16px 0 0;backdrop-filter:blur(12px);transform:translateY(100%);transition:transform .5s cubic-bezier(.32,.72,0,1);max-height:50vh;overflow-y:auto;padding:1.2rem 1.5rem 2rem;box-shadow:0 -8px 32px rgba(0,0,0,.3)}
.le-toc-drawer.is-open{transform:translateY(0)}
.le-toc-drawer__title{font-family:var(--font-label);font-size:.52rem;letter-spacing:.25em;text-transform:uppercase;color:var(--le-dim);margin-bottom:.8rem;display:flex;justify-content:space-between;align-items:center}
.le-toc-drawer__close{background:none;border:none;color:var(--le-dim);cursor:pointer;font-size:1rem;padding:.2rem}
.le-toc-drawer .le-toc__link{padding:.6rem .8rem;font-size:.82rem}

/* ── Related entries panel ─── */
.le-related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--le-border)}
.le-related__title{font-family:var(--font-label);font-size:.52rem;letter-spacing:.25em;text-transform:uppercase;color:var(--le-dim);margin-bottom:1rem}
.le-related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.le-related__card{background:linear-gradient(165deg,rgba(16,16,20,.5),rgba(12,12,18,.4));border:1px solid var(--le-border);border-radius:10px;padding:1.2rem;text-decoration:none;transition:transform .7s cubic-bezier(.32,.72,0,1),border-color .5s ease,box-shadow .7s cubic-bezier(.32,.72,0,1),background .5s ease;display:block;box-shadow:0 2px 8px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.02)}
.le-related__card:hover{border-color:var(--le-accent);background:rgba(16,16,20,.6);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.25),0 0 12px var(--le-glow),inset 0 1px 0 rgba(255,255,255,.03)}
.le-related__card:active{transform:scale(0.98)}
.le-related__card-era{font-family:var(--font-label);font-size:.45rem;letter-spacing:.2em;text-transform:uppercase;color:var(--le-dim);margin-bottom:.3rem}
.le-related__card-title{font-family:var(--font-display);font-size:.88rem;letter-spacing:.06em;color:#dcd8d0;margin-bottom:.4rem}
.le-related__card-desc{font-family:var(--font-body);font-size:.78rem;color:var(--text-secondary,#9a968e);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Anomaly log (field notes style) ─── */
.le-anomaly{background:linear-gradient(165deg,rgba(16,16,20,.45),rgba(12,12,18,.35));border:1px solid var(--le-border);border-left:3px solid var(--le-accent);border-radius:10px;padding:1.8rem;margin:2rem 0;font-family:var(--font-mono);font-size:.82rem;color:var(--le-dim);line-height:1.9;box-shadow:0 2px 12px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.02)}
.le-anomaly__header{font-family:var(--font-label);font-size:.5rem;letter-spacing:.25em;text-transform:uppercase;color:var(--le-accent);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(160,160,170,.04)}
.le-anomaly__entry{margin-bottom:.8rem;padding-left:1rem;border-left:1px solid rgba(160,160,170,.06)}
.le-anomaly__date{color:var(--le-accent);font-weight:400}

/* ── Blood Scion colour shift (Valyria page) ─── */
@keyframes scionShift{0%{--le-prose-color:#c4c0b8}100%{--le-prose-color:#d4706a}}
.le-scion-shift{animation:scionShift 2s ease forwards;animation-play-state:paused}
.le-scion-shift.is-visible{animation-play-state:running}
.le-scion-shift p{color:var(--le-prose-color,#c4c0b8);transition:color 2s ease}
.le-scion-shift.is-visible p{color:#d4706a}

/* ═══ MOBILE RESPONSIVE ═══════════════════════════════════ */

@media(max-width:1200px){
  .le-toc{display:none}
  .le-dots{display:none}
  .le-toc-mobile{display:block}
}
@media(min-width:1201px){
  .le-toc-mobile{display:none}
}
@media(max-width:768px){
  .le-sp--l,.le-sp--r{grid-template-columns:1fr}
  .le-sp--r>:last-child{order:-1}
  .wp__r{grid-template-columns:100px 1fr}
  /* Mobile hero — larger, more breathing room */
  .le-hero{padding:6rem 1.5rem 3.5rem;min-height:300px}
  .le-hero__title{font-size:clamp(1.2rem,5vw,1.8rem)}
  .le-hero__bg{opacity:.35!important}
  .ayl{font-size:1.1rem}
  /* Mobile image captions */
  .le-img__cap{padding:.8rem 0;font-size:.8rem}
  /* Mobile footnotes */
  .le-footnote{font-size:.82rem;padding-left:1rem;text-indent:-1rem;line-height:1.85}
  /* Mobile related grid */
  .le-related__grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* Tablet-to-phone: stack infobox and reduce padding */
  .wp__r{grid-template-columns:1fr}
  .le-body{padding:0 1rem}
  .le-prose{font-size:.95rem}
}
@media(max-width:480px){
  /* Mobile infobox — readable single column */
  .wp__r{grid-template-columns:1fr}
  .wp__l{padding:.5rem 1rem .2rem;border-bottom:none;background:rgba(160,160,170,.035);font-size:.65rem}
  .wp__v{padding:.2rem 1rem .6rem}
  .wp__r{margin-bottom:.15rem}
  /* Hero on very small screens */
  .le-hero{padding:5.5rem 1rem 2.5rem;min-height:260px}
  .le-hero__title{font-size:1.1rem;letter-spacing:.06em}
  .le-hero__era{font-size:.48rem}
  .le-hero__date{font-size:.7rem}
  .le-hero__bg{opacity:.4!important}
  /* Images: full width on mobile */
  .le-img{margin-left:0;margin-right:0}
  .le-img img,.le-img picture{width:100%;height:auto}
  /* Chapter nav: horizontal scroll */
  .le-toc-mobile{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;padding-bottom:.5rem}
  .le-toc-mobile a{min-height:44px;display:inline-flex;align-items:center}
}

/* ── Archive → Entry Transition ─── */
.le-hero.from-archive{opacity:0;transform:scale(0.88) translateY(12px);transition:opacity 0.6s ease,transform 0.7s cubic-bezier(.32,.72,0,1)}
.le-hero.from-archive--revealed{opacity:1;transform:scale(1) translateY(0)}
@media(prefers-reduced-motion:reduce){.le-hero.from-archive{opacity:1;transform:none;transition:none}}


/* ═══════════════════════════════════════════════════════════════
   PREMIUM ENHANCEMENTS v4.4 — Lore Entry Pages
   Hero, Typography, Infobox, Images, Navigation, Cards, Buttons
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero — Cinematic Depth (full-bleed) ────────────────────── */
.le-hero {
    border-radius: 0;
    overflow: hidden;
    width: 100vw; margin-left: calc(50% - 50vw);
    padding: clamp(4rem,10vh,7rem) 2rem clamp(5.5rem,13vh,8rem);
    min-height: 100vh; min-height: 100svh;
}
/* The floating book cover doesn't suit the full-bleed centered hero. */
.le-hero__cover { display: none; }
.le-hero__bg {
    transition: opacity 1.5s cubic-bezier(.32,.72,0,1), filter 1.5s cubic-bezier(.32,.72,0,1);
}
/* Parallax-like depth on hero background */
.le-hero:hover .le-hero__bg {
    transform: scale(1.03);
    transition: transform 8s cubic-bezier(.32,.72,0,1);
}
/* Enhanced gradient overlay with accent radial glow */
.le-hero::after {
    background:
        radial-gradient(ellipse 50% 45% at 50% 45%, var(--le-glow), transparent 55%),
        linear-gradient(to bottom, transparent 0%, var(--le-dark, #080e14) 88%) !important;
}
/* Era label — premium pill */
.le-hero__era {
    display: inline-block;
    padding: 0.3rem 1rem;
    border: 1px solid var(--le-border);
    border-radius: 20px;
    background: rgba(6,6,8,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 1rem;
    transition: border-color 0.5s cubic-bezier(.32,.72,0,1);
}
.le-hero:hover .le-hero__era {
    border-color: color-mix(in srgb, var(--le-accent) 30%, transparent);
}
/* Icon — subtle pulse */
.le-hero__icon {
    transition: text-shadow 0.6s cubic-bezier(.32,.72,0,1), transform 0.6s cubic-bezier(.32,.72,0,1);
}
.le-hero:hover .le-hero__icon {
    text-shadow: 0 0 16px var(--le-glow), 0 0 32px var(--le-glow);
    transform: scale(1.08);
}
/* Title — gradient text with shimmer */
.le-hero__title {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--le-accent) 70%, #ece8e0) 0%,
        #ece8e0 30%,
        #ece8e0 70%,
        color-mix(in srgb, var(--le-accent) 70%, #ece8e0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: leHeroTitleShimmer 8s ease-in-out infinite;
}
/* Don't override shimmer classes — they have their own animations */
.le-hero__title.ayleid-shimmer,
.le-hero__title.crimson-shimmer,
.le-hero__title.golden-shimmer {
    background-size: 200% auto;
}
@keyframes leHeroTitleShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
/* Date — enhanced accent glow */
.le-hero__date {
    text-shadow: 0 0 12px var(--le-glow);
}
/* Floating cover — enhanced shadow + hover lift */
.le-hero__cover {
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
    transition: transform 1s cubic-bezier(.32,.72,0,1), opacity 0.8s ease, filter 0.6s cubic-bezier(.32,.72,0,1);
}
.le-hero:hover .le-hero__cover {
    transform: translateY(-50%) rotate(-2deg) translateX(4px);
    filter: drop-shadow(0 12px 32px rgba(0,0,0,0.6)) drop-shadow(0 0 12px var(--le-glow));
}
.le-hero__cover img {
    border: 1px solid var(--le-border);
    transition: border-color 0.5s cubic-bezier(.32,.72,0,1);
}
.le-hero:hover .le-hero__cover img {
    border-color: color-mix(in srgb, var(--le-accent) 25%, transparent);
}

/* ── Reading Progress — Premium Glow ────────────────────────── */
.le-progress {
    height: 2px;
    background: linear-gradient(90deg, var(--le-accent), color-mix(in srgb, var(--le-accent) 60%, #fff));
    box-shadow: 0 0 8px var(--le-glow), 0 0 20px var(--le-glow);
}

/* ── Breadcrumb — Glass Pill ────────────────────────────────── */
.le-breadcrumb {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    background: rgba(6,6,8,0.3);
    border: 1px solid rgba(160,160,170,0.04);
    border-radius: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0.7;
    transition: opacity 0.3s, border-color 0.3s;
}
.le-breadcrumb:hover {
    opacity: 1;
    border-color: rgba(160,160,170,0.08);
}

/* ── Prose — Enhanced Readability ───────────────────────────── */
.le-prose {
    font-size: 1.05rem;
    line-height: 2;
    letter-spacing: 0.008em;
}
.le-prose p {
    margin: 0 0 1.5rem;
}
/* First paragraph drop cap */
.le-prose:first-of-type > p:first-child::first-letter {
    font-family: var(--font-display);
    font-size: 3.2em;
    float: left;
    line-height: 0.85;
    margin: 0.06em 0.12em 0 0;
    color: var(--le-accent);
    text-shadow: 0 0 20px var(--le-glow);
}
.le-prose em {
    color: color-mix(in srgb, var(--le-accent) 25%, #dcd8d0);
}

/* ── Section Headers — single centered inline heading ──────── */
.le-sub {
    border-bottom: none;
    padding-bottom: 0;
    margin: 3.5rem 0 1.6rem;
    position: relative;
}

/* ── Dividers — refined gradient rule + glowing glyph ──────── */
.le-div {
    position: relative;
    padding: 2.5rem 0;
    opacity: 0.4;
    color: var(--le-accent);
    text-shadow: 0 0 14px var(--le-glow);
    transition: opacity 0.6s cubic-bezier(.32,.72,0,1);
}
.le-div.is-visible { animation-name: leFadeUp, leDivPulse; }
@keyframes leDivPulse { 0%, 100% { text-shadow: 0 0 10px var(--le-glow); } 50% { text-shadow: 0 0 20px var(--le-accent); } }
.le-div::before,
.le-div::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 1px;
    width: calc(50% - 60px);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--le-accent) 45%, transparent));
}
.le-div::before { left: 0; }
.le-div::after {
    right: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--le-accent) 45%, transparent), transparent);
}
.le-div:hover {
    opacity: 0.7;
}

/* ── Infobox (Wiki Panel) — Enhanced Glass ──────────────────── */
.wp {
    background: linear-gradient(165deg, rgba(12,12,16,0.55), rgba(8,8,12,0.45));
    border: 1px solid var(--le-border);
    border-left: 3px solid var(--le-accent);
    border-radius: 14px;
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    box-shadow:
        0 4px 20px rgba(0,0,0,0.2),
        0 0 1px rgba(255,255,255,0.03) inset,
        0 1px 0 rgba(255,255,255,0.02) inset;
    transition: border-color 0.5s cubic-bezier(.32,.72,0,1), box-shadow 0.5s cubic-bezier(.32,.72,0,1);
}
.wp:hover {
    border-color: color-mix(in srgb, var(--le-accent) 30%, var(--le-border));
    box-shadow:
        0 6px 24px rgba(0,0,0,0.25),
        0 0 16px var(--le-glow),
        0 1px 0 rgba(255,255,255,0.03) inset;
}
.wp__h {
    padding: 0.85rem 1.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    background: linear-gradient(90deg, var(--le-glow), rgba(12,12,16,0.4));
}
.wp__r {
    transition: background 0.4s cubic-bezier(.32,.72,0,1);
}
.wp__r:hover {
    background: color-mix(in srgb, var(--le-accent) 3%, transparent);
}
.wp__v {
    font-size: 0.92rem;
    color: #c4c0b8;
}

/* ── Images — Premium Frame + Hover ─────────────────────────── */
.le-img {
    border-radius: 12px;
    margin: 2.5rem 0;
}
.le-img img {
    border-radius: 12px;
    border: 1px solid var(--le-border);
    transition: filter 0.8s cubic-bezier(.32,.72,0,1), transform 1.2s cubic-bezier(.32,.72,0,1), opacity 0.4s, border-color 0.5s;
}
.le-img:hover img {
    filter: brightness(0.9) saturate(1.05);
    transform: scale(1.015);
    border-color: color-mix(in srgb, var(--le-accent) 20%, var(--le-border));
}
.le-img__cap {
    font-size: 0.84rem;
    color: rgba(190,185,178,0.6);
    padding: 0.8rem 0 0;
    border-top: 1px solid rgba(160,160,170,0.03);
    margin-top: 0.5rem;
}

/* ── Notes — Enhanced Glass Card ────────────────────────────── */
.le-note {
    border-radius: 14px;
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid var(--le-border);
    border-left: 3px solid var(--le-accent);
    padding: 2.5rem;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.02);
    transition: border-color 0.5s cubic-bezier(.32,.72,0,1), box-shadow 0.5s cubic-bezier(.32,.72,0,1);
}
.le-note:hover {
    border-color: color-mix(in srgb, var(--le-accent) 25%, var(--le-border));
    box-shadow:
        0 6px 24px rgba(0,0,0,0.2),
        0 0 12px var(--le-glow),
        inset 0 1px 0 rgba(255,255,255,0.03);
}

/* ── Footnotes — Glass Panel ────────────────────────────────── */
.le-footnotes {
    margin-top: 4rem;
    padding: 2rem;
    background: rgba(6,6,8,0.3);
    border: 1px solid rgba(160,160,170,0.04);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.le-footnotes__title {
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--le-border);
}
.le-footnote {
    font-size: 0.8rem;
    line-height: 1.8;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0 0.4rem 1.5rem;
    text-indent: -1.5rem;
    transition: color 0.3s;
}
.le-footnote:hover {
    color: color-mix(in srgb, var(--le-accent) 40%, var(--le-dim));
}
.le-footnote a {
    border-bottom: 1px solid color-mix(in srgb, var(--le-accent) 30%, transparent);
    transition: color 0.3s, border-color 0.3s;
}
.le-footnote a:hover {
    color: var(--le-accent);
    border-bottom-color: var(--le-accent);
}

/* ── Related Cards — Premium Hover ──────────────────────────── */
.le-related {
    margin-top: 4rem;
    padding-top: 2.5rem;
}
.le-related__title {
    margin-bottom: 1.5rem;
}
.le-related__card {
    background: rgba(10,10,14,0.4);
    border: 1px solid var(--le-border);
    border-radius: 14px;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.02);
    transition: all 0.5s cubic-bezier(.32,.72,0,1);
}
.le-related__card:hover {
    border-color: color-mix(in srgb, var(--le-accent) 35%, transparent);
    background: rgba(12,12,16,0.55);
    transform: translateY(-4px);
    box-shadow:
        0 8px 28px rgba(0,0,0,0.25),
        0 0 16px var(--le-glow),
        inset 0 1px 0 rgba(255,255,255,0.03);
}
.le-related__card-era {
    font-size: 0.48rem;
    letter-spacing: 0.22em;
    color: var(--le-dim);
    margin-bottom: 0.4rem;
}
.le-related__card-title {
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    transition: color 0.3s;
}
.le-related__card:hover .le-related__card-title {
    color: var(--le-accent);
}

/* ── Navigation Dots — Glass Backdrop ───────────────────────── */
.le-dots {
    right: max(calc((100vw - 820px)/2 - 80px), 24px);
}
.le-dots__dot {
    border: 1.5px solid rgba(160,160,170,0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.4s cubic-bezier(.32,.72,0,1);
}
.le-dots__dot:hover {
    border-color: var(--le-accent);
    background: color-mix(in srgb, var(--le-accent) 15%, transparent);
    transform: scale(1.4);
    box-shadow: 0 0 8px var(--le-glow);
}
.le-dots__dot.is-active {
    box-shadow: 0 0 10px var(--le-glow), 0 0 24px var(--le-glow);
}
.le-dots__tip {
    background: rgba(8,8,12,0.94);
    border: 1px solid var(--le-border);
    border-radius: 10px;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
}

/* ── Cross-Reference Links — Arrow Animation ────────────────── */
.le-xref {
    padding: 0.8rem 0;
    transition: color 0.3s, transform 0.3s cubic-bezier(.32,.72,0,1);
}
.le-xref:hover {
    color: color-mix(in srgb, var(--le-accent) 40%, #dcd8d0);
    transform: translateX(4px);
}

/* ── Buttons — Premium Gold Accent ──────────────────────────── */
.le-visit {
    border-radius: 12px;
    padding: 0.8rem 2rem;
    letter-spacing: 0.3em;
    transition: all 0.5s cubic-bezier(.32,.72,0,1);
}
.le-visit:hover {
    border-color: var(--le-accent);
    background: color-mix(in srgb, var(--le-accent) 6%, transparent);
    color: #ece8e0;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 16px var(--le-glow);
}
.le-back {
    border-radius: 10px;
    transition: all 0.5s cubic-bezier(.32,.72,0,1);
}
.le-back:hover {
    border-color: color-mix(in srgb, var(--le-accent) 40%, transparent);
    color: var(--le-accent);
    background: color-mix(in srgb, var(--le-accent) 3%, transparent);
    transform: translateY(-2px);
}

/* ── Share Buttons — Glass ──────────────────────────────────── */
.le-share {
    padding-top: 2rem;
    border-top: 1px solid rgba(160,160,170,0.04);
}
.le-share__btn {
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.4s cubic-bezier(.32,.72,0,1);
}
.le-share__btn:hover {
    border-color: var(--le-accent);
    color: var(--le-accent);
    background: color-mix(in srgb, var(--le-accent) 4%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ── Anomaly Log — Enhanced Glass ───────────────────────────── */
.le-anomaly {
    border-radius: 14px;
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    transition: border-color 0.5s cubic-bezier(.32,.72,0,1);
}
.le-anomaly:hover {
    border-color: color-mix(in srgb, var(--le-accent) 25%, var(--le-border));
}

/* ── Mobile TOC Button — Glass Orb ──────────────────────────── */
.le-toc-mobile__btn {
    background: rgba(8,8,12,0.94);
    border: 1px solid var(--le-border);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03);
}
.le-toc-mobile__btn:hover {
    border-color: var(--le-accent);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 16px var(--le-glow);
}
.le-toc-drawer {
    background: rgba(8,8,12,0.96);
    border-top: 1px solid var(--le-border);
    border-radius: 18px 18px 0 0;
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.35);
}
.le-toc-drawer .le-toc__link {
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(.32,.72,0,1);
}
.le-toc-drawer .le-toc__link:hover {
    background: color-mix(in srgb, var(--le-accent) 4%, transparent);
}

/* ── Ayleid Word Wall — Enhanced Stone ──────────────────────── */
.ayl-wrap {
    border-radius: 14px;
    margin: 4rem 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.02);
}
.ayl-decode {
    padding: 1rem 1.5rem 1.5rem;
}
.ayl-decode__reveal {
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(.32,.72,0,1);
}
.ayl-decode__reveal:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 0 8px var(--le-glow);
}

/* ── Scroll Reveal Animations ───────────────────────────────── */
@keyframes leFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.le-prose,
.le-img,
.le-div,
.le-note,
.le-anomaly,
.wp {
    opacity: 0;
    animation: leFadeUp 0.8s cubic-bezier(.32,.72,0,1) forwards;
    animation-play-state: paused;
}
.le-prose.is-visible,
.le-img.is-visible,
.le-div.is-visible,
.le-note.is-visible,
.le-anomaly.is-visible,
.wp.is-visible {
    animation-play-state: running;
}

/* ── Premium Mobile Overrides ───────────────────────────────── */
@media(max-width:768px) {
    .le-hero { padding: 7rem 1.5rem 4rem; min-height: 340px; }
    .le-hero__era { font-size: 0.48rem; padding: 0.25rem 0.8rem; }
    .le-prose:first-of-type > p:first-child::first-letter {
        font-size: 2.6em;
        margin: 0.04em 0.1em 0 0;
    }
    .le-footnotes { padding: 1.5rem; }
    .le-breadcrumb { padding: 0.35rem 0.8rem; }
    .le-sub::after { width: 40px; }
}
@media(max-width:480px) {
    .le-hero { padding: 6rem 1rem 3rem; min-height: 280px; }
    .le-prose:first-of-type > p:first-child::first-letter {
        font-size: 2.2em;
    }
    .le-related__card { padding: 1.2rem; }
    .le-footnotes { padding: 1.2rem; border-radius: 10px; }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce) {
    .le-hero__title { animation: none; }
    .le-hero:hover .le-hero__bg { transform: none; }
    .le-hero:hover .le-hero__cover { transform: translateY(-50%) rotate(-3deg); }
    .le-prose, .le-img, .le-div, .le-note, .le-anomaly, .wp {
        opacity: 1; animation: none;
    }
}