/* ============================================================
   A BALLAD OF CHAOS — index.html only
   Everything the lore-band draft adds on top of css/style.css.

   Loaded by index.html and by nothing else, so style.css — which all 13 other root pages plus the 33
   essay pages share — carries none of it. If any of this is approved for the real home page it should
   move into style.css at that point, not before.
   ALREADY MOVED: `.foot__lore` lived here until Ankit approved it for all 48 pages on 19 Aug. Its
   rules are now in css/style.css next to `.foot__books`; nothing about it is left in this file.

   Tokens, type scale and spacing are style.css's own; nothing new is invented here. The band
   deliberately reads as a sibling of .interlude and .finale (centred composition, display face,
   single hot accent) rather than as a new component.
   ============================================================ */

/* ============================================================ HOME 3 · hero author link */
/* No underline — Ankit's call (19 Aug): the hero is a title page and a rule under the byline reads as
   a link on a page that otherwise has none. The name still links to author.html; the only affordance
   is the warm shift on hover, which is enough here because the cursor changes anyway. */
.hero__word .author a{color:inherit;transition:color .35s ease}
.hero__word .author a:hover{color:var(--gold)}

/* ============================================================ HOME 3 · per-stage lore hooks */
/* .stage__meta is [Read more] [Foreword] [Part N of V]. The hook is a third item that must read as
   secondary to Read more — same label face and tracking, no rule under it, ash until hover. */
.stage__meta a.stage__lore{
  color:var(--ash);
  border-bottom:1px solid transparent}
.stage__meta a.stage__lore:hover{color:var(--bone);border-bottom-color:var(--accent)}

/* ============================================================ HOME 1 · the lore band */
/* The coda epigraph is the band's heading, so the two have to read as one composition. .interlude is
   min-height:90svh with place-items:center, which parks "Lucifer endures." in the middle of its own
   screen and would leave ~45vh of dead space above the cards. Scoped to the LAST interlude on this
   page only — it is the coda, the one epigraph with no book after it — so the four inter-book
   epigraphs keep their full-screen pause. .interlude itself is in the shared style.css and is not
   touched. Bottom padding goes to the band below instead, and buildSoul()/initAmbience() both measure
   at init, after this sheet has applied, so nothing is left holding a stale height. */
#books .interlude:last-child{min-height:56svh;padding-bottom:0}

.lore{position:relative;z-index:3;padding:.5rem var(--gutter) 7rem;text-align:center}
/* wider than .threshold__inner's 52rem because the card row is five across; the verse plate below
   keeps its own narrower measure inside it */
.lore__inner{max-width:min(82rem,95vw);margin-inline:auto}

/* ============================================================ HOME 1 · the five cards */
/* Five columns or one, and nothing in between, because there are exactly five cards: any other
   column count leaves an empty cell on the last row. auto-fit with a minmax() was tried first and is
   wrong — at 1600px it resolves to four columns, which both orphans Alternative Covers and, since
   the hairlines were a lit container background showing through a 1px gap, painted the four empty
   cells of row two as one large tan slab. Hence separators on the cards themselves, not the
   container, so an empty cell is impossible by construction. */
.lore__grid{list-style:none;margin:0;display:grid;gap:0;grid-template-columns:repeat(5,1fr)}
.lore__card{background:transparent}
.lore__card + .lore__card{border-left:1px solid rgba(201,162,75,.16)}
/* below this the five columns stop holding a readable measure; stack rather than orphan */
@media(max-width:1180px){
  .lore__grid{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}
  .lore__card + .lore__card{border-left:0;border-top:1px solid rgba(201,162,75,.16)}
}
.lore__card > a{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;height:100%;
  text-align:left;padding:1.9rem clamp(1.1rem,1.7vw,1.5rem) 1.6rem;
  position:relative;transition:background .4s ease}
.lore__card > a:hover{background:rgba(27,20,19,.85)}

/* the count is the argument, so it is set in the display face at stage-numeral weight */
.lore__n{font-family:var(--display);font-weight:600;line-height:.9;
  font-size:clamp(2.6rem,4vw,3.4rem);color:transparent;
  -webkit-text-stroke:1px rgba(235,229,214,.42);
  transition:-webkit-text-stroke-color .4s ease}
.lore__card > a:hover .lore__n{-webkit-text-stroke-color:var(--accent)}
.lore__n em{display:block;font-family:var(--label);font-style:normal;font-weight:500;
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash-dim);-webkit-text-stroke:0;margin-top:.75rem;line-height:1.4}

.lore__t{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,1.9vw,1.6rem);
  line-height:1.1;color:var(--bone);margin-top:.2rem}
.lore__d{color:var(--ash);font-size:.94rem;line-height:1.6}
.lore__go{margin-top:auto;padding-top:1.1rem;color:var(--ash-dim);font-size:1.1rem;line-height:1;
  transition:color .35s ease,transform .35s ease}
.lore__card > a:hover .lore__go{color:var(--accent);transform:translateX(5px)}

/* ============================================================ HOME 5 · MICRO PLAYER
   ⚠ ONE DELETABLE UNIT. Remove this whole section, the HOME 5 markup block in index.html and
   miniPlayer() in js/home.js, plus the three lines marked "HOME 5" in the MOBILE and
   reduced-motion blocks at the foot of this file, and the player is gone without a trace.

   Geometry is .buy-fab's, mirrored: same fixed inset clamp, same z-index, same pill, same blur, same
   label face and tracking. Colour is GOLD, not crimson, on purpose — crimson is the buy CTA's, and a
   second crimson pill in the opposite corner would read as a second call to action. */
.mini{position:fixed;left:clamp(1rem,2.2vw,2.2rem);bottom:clamp(1rem,2.2vw,2.2rem);z-index:30;
  display:inline-flex;align-items:center;gap:.6rem;padding:.5rem .95rem .5rem .55rem;
  background:linear-gradient(180deg,rgba(24,18,9,.92),rgba(10,8,5,.94));backdrop-filter:blur(5px);
  border:1px solid rgba(201,162,75,.5);border-radius:999px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.85),0 0 26px -12px rgba(201,162,75,.55);
  transition:border-color .35s ease,box-shadow .35s ease,transform .4s ease,opacity .5s ease}
/* [hidden] is a UA rule and loses to the display above, so it has to be restated */
.mini[hidden]{display:none}
/* JS reveals it once it is wired, so it fades in rather than popping */
.mini.is-ready{opacity:1}
.mini:not(.is-ready){opacity:0;pointer-events:none}
.mini:hover{border-color:var(--gold);box-shadow:0 16px 40px -12px rgba(0,0,0,.9),0 0 34px -10px rgba(201,162,75,.7);transform:translateY(-2px)}

/* ---- HOME 5b · COLLAPSED: just the play button, a circle ----
   `.is-compact` is set by miniPlayer() in js/home.js and only ever on a phone — see the note there
   for when. This block is deliberately NOT inside a media query: the class is the gate, so the two
   halves cannot disagree about which widths collapse.
   The text is taken out with `max-width` rather than `display:none` so the change is animatable, and
   `visibility` is STEPPED (0s, delayed by the width transition) so the link leaves the accessibility
   tree and the tab order once it has finished closing — easing it instead would leave a focusable
   invisible link behind. Same trick as .navdrop__menu in nav.css, same reason. */
.mini{transition:border-color .35s ease,box-shadow .35s ease,transform .4s ease,opacity .5s ease,
  padding .42s cubic-bezier(.4,0,.2,1),gap .42s cubic-bezier(.4,0,.2,1),border-radius .42s ease}
.mini__txt{max-width:16rem;visibility:visible;
  transition:max-width .42s cubic-bezier(.4,0,.2,1),opacity .3s ease,visibility 0s}
.mini.is-compact{gap:0;padding:.45rem;border-radius:50%}
.mini.is-compact .mini__txt{max-width:0;opacity:0;overflow:hidden;pointer-events:none;visibility:hidden;
  transition:max-width .42s cubic-bezier(.4,0,.2,1),opacity .26s ease,visibility 0s linear .42s}
/* the equaliser only ever shows while playing, and playing is never collapsed — belt and braces */
.mini.is-compact .mini__eq{display:none}

@media(prefers-reduced-motion:reduce){
  .mini,.mini__txt{transition:none}
}

.mini__btn{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid rgba(201,162,75,.45);border-radius:50%;
  color:var(--gold);padding:0;transition:background .3s ease,color .3s ease,border-color .3s ease}
.mini__btn:hover,.mini__btn:focus-visible{background:var(--gold);color:var(--ink);border-color:var(--gold);outline:none}
.mini__ico{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:0}
.mini__ico--pause{fill:none;stroke-width:2;stroke-linecap:round;display:none}
.mini.is-on .mini__ico--play{display:none}
.mini.is-on .mini__ico--pause{display:block}

/* three bars, only while playing — the whole point of a "now playing" state you can read at a glance */
.mini__eq{display:none;align-items:flex-end;gap:2px;height:14px;width:12px}
.mini.is-on .mini__eq{display:flex}
.mini__eq i{flex:1;background:var(--gold);opacity:.85;height:30%;transform-origin:50% 100%;
  animation:mini-eq .9s ease-in-out infinite}
.mini__eq i:nth-child(2){animation-duration:.62s;animation-delay:.12s}
.mini__eq i:nth-child(3){animation-duration:1.05s;animation-delay:.26s}
@keyframes mini-eq{0%,100%{height:22%}50%{height:100%}}

/* Two fixed lines now, nothing cross-fades — so no min-width is needed to hold two strings in one
   slot, and the pill is exactly as wide as its longer line.
   Line 1 is the song name, in the label face at label scale: it names what plays without shouting.
   Line 2 is the call, and it is the one that has to be seen — so it takes the display face, the
   larger size and BONE, the brightest ink on the page. Gold would have tied it to the frame and lost
   it; bone is what the book titles and the stage headings use. */
.mini__txt{display:flex;flex-direction:column;gap:.15rem;line-height:1.15}
.mini__k{font-family:var(--label);font-weight:500;font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-lo);white-space:nowrap;transition:color .3s ease}
/* the only text that reacts to playback — the icon and the bars do the rest */
.mini.is-on .mini__k{color:var(--gold)}
.mini__go{font-family:var(--display);font-size:.95rem;color:var(--bone);white-space:nowrap;
  transition:color .3s ease}
.mini__txt:hover .mini__go,.mini__txt:focus-visible .mini__go{color:var(--gold)}

/* ============================================================ MOBILE */
@media(max-width:760px){
  /* Ankit, 21 Aug: *"reduce space above and below lucifer endures so at least 2.5 lore items fit
     the screen"*. The epigraph above gave up its `min-height:90svh` in style.css; the cards give up
     some padding here, because at 360px wide the copy wraps far enough to push a card to 288px and
     two and a bit is all that lands. Measured on screen at the moment a reader arrives at the band:
     2.04 items at 360x640 before, and the target is 2.5. */
  .lore{padding:.6rem var(--gutter) 4rem}
  .lore__grid{margin-top:0}
  .lore__card > a{padding:1.05rem 1.1rem .95rem;gap:.4rem}
  .lore__n{font-size:2.1rem}
  .lore__n em{margin-top:.5rem}
  .lore__t{font-size:1.22rem}
  .lore__d{font-size:.88rem;line-height:1.5}
  .lore__go{padding-top:.6rem}
  /* HOME 5 — it used to be hidden here, because .buy-fab became a full-width bottom BAR under
     760px and the pill had nowhere to live. The bar is gone (Ankit, 20 Aug: "on home the mini
     player can take its place like desktop"), so the pill keeps its own corner at phone size —
     bottom-left, exactly where it sits on a desktop. Nothing autoplays; it is still a button. */
  .mini{padding:.45rem .8rem .45rem .5rem}
  .mini__go{font-size:.88rem}
}

@media(prefers-reduced-motion:reduce){
  /* [data-fade] is a gsap.from, so a reduced-motion visitor must not be left at opacity 0 */
  .lore__card{opacity:1!important;transform:none!important}
  /* HOME 5 — the equaliser is decoration; the is-on state still reads from the pause icon and label */
  .mini__eq i{animation:none;height:60%}
}