/* ============================================================
   NAV — dropdown menus ("The Books", "The Lore")
   Shared by index.html and every sub-page. Kept in its own file so it never
   collides with style.css edits. Depends on tokens + .site-nav from style.css.
   ============================================================ */

.site-nav__links{position:relative}

.navdrop{position:relative;display:flex;align-items:center}

/* an <a>, not a <button>: "The Books" is still a jump-link to the books (so Lenis'
   smooth-scroll interception in main.js picks it up) and the panel is the hover
   affordance on top of that. */
.navdrop__btn{
  display:inline-flex;align-items:center;gap:.42em;
  font-family:var(--label);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash);background:none;border:0;padding:0;cursor:pointer;transition:color .3s;
  white-space:nowrap;position:relative;
}
.navdrop__btn:hover,.navdrop:hover .navdrop__btn,.navdrop.is-open .navdrop__btn{color:var(--bone)}
/* the section you're currently inside stays lit, with a hairline under it — except the
   Purchase CTA, which is a bordered button and reads wrong with a rule under it */
.site-nav__links .navdrop__btn.is-current,
.site-nav__links > a[aria-current="page"]{color:var(--bone)}
.site-nav__links .navdrop__btn.is-current::after,
.site-nav__links > a[aria-current="page"]:not(.site-nav__cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:-.55rem;height:1px;background:var(--accent);opacity:.8;
}
.site-nav__links > a{position:relative}
.navdrop__btn .caret{
  width:.42em;height:.42em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-.15em) rotate(45deg);transition:transform .35s ease;flex:0 0 auto;
}
.navdrop.is-open .navdrop__btn .caret{transform:translateY(.03em) rotate(225deg)}

.navdrop__menu{
  position:absolute;top:calc(100% + .95rem);left:50%;translate:-50% 0;z-index:50;
  width:max-content;max-width:min(22rem,88vw);padding:.55rem;
  background:linear-gradient(180deg,rgba(18,13,13,.97),rgba(10,8,9,.97));
  border:1px solid rgba(201,162,75,.18);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4);
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  /* a faded-out panel must not keep swallowing clicks over whatever is beneath it */
  pointer-events:none;
  /* visibility is stepped, not eased: it flips to hidden only AFTER the fade-out
     (delay .32s), and back to visible on the very first frame of opening. Easing it
     instead would leave it computed-hidden for that first frame, and .focus() is a
     no-op on a hidden element — which breaks ArrowDown into the menu. */
  transition:opacity .32s ease,transform .32s ease,visibility 0s linear .32s;
}
/* Hit-bridge so the pointer can cross the gap from the trigger down to the panel.
   It lives on the TRIGGER, not the panel: a bridge on the panel is as wide as the
   panel (~240px) and tall enough to reach back into the nav row, so it lay on top
   of the next trigger along and made "The Lore" unhoverable while "The Books" was
   open. On .navdrop it is only ever as wide as its own trigger. */
.navdrop::after{content:"";position:absolute;left:0;right:0;top:100%;height:1.1rem}
.navdrop:hover .navdrop__menu,
.navdrop:focus-within .navdrop__menu,
.navdrop.is-open .navdrop__menu{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
  transition:opacity .32s ease,transform .32s ease,visibility 0s;
}
/* the last trigger before the CTA sits near the right edge — pin its panel to the
   right rather than let it centre itself off-canvas */
.navdrop--end .navdrop__menu{left:auto;right:0;translate:none}

.navdrop__menu a{
  display:grid;grid-template-columns:1.7rem 1fr;align-items:baseline;gap:.7rem;
  padding:.62rem .7rem;color:var(--ash);position:relative;
  border-left:1px solid transparent;transition:color .25s,background .25s,border-color .25s;
}
.navdrop__menu a:hover,.navdrop__menu a:focus-visible{
  color:var(--bone);background:rgba(255,255,255,.035);border-left-color:var(--c,var(--accent));outline:none;
}
.navdrop__menu a[aria-current="page"]{color:var(--bone);border-left-color:var(--c,var(--accent));background:rgba(255,255,255,.05)}
.navdrop__rom{
  font-family:var(--display);font-style:italic;font-weight:600;font-size:.98rem;
  color:var(--c,var(--accent));line-height:1;text-align:right;letter-spacing:.02em;
}
.navdrop__ttl{
  font-family:var(--label);font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;line-height:1.45;
  white-space:nowrap;
}
.navdrop__ttl em{display:block;font-family:var(--serif);font-style:italic;text-transform:none;
  letter-spacing:0;font-size:.82rem;color:var(--ash-dim);margin-top:.12rem;white-space:nowrap}

/* "The Lore" — no numerals, so a single column with a hairline marker instead */
.navdrop__menu--plain a{grid-template-columns:1fr;gap:0}
.navdrop__menu--plain .navdrop__ttl{position:relative}

/* footer row of a panel ("The Saga Entire / Omnibus & Coda") — now a two-line title+
   subtitle set like the book rows (its own `.navdrop__ttl`), so it no longer forces the
   whole panel as wide as one long uppercase line. NOTE the `a.` — `.navdrop__menu a` is
   (0,1,1) and would otherwise win the `display` cascade, wrapping the text one word per
   line. That was the original bug. */
.navdrop__menu a.navdrop__all{
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  margin-top:.35rem;padding:.6rem .7rem .5rem;
  border-left:0;border-top:1px solid rgba(201,162,75,.14);
  color:var(--ash-dim);transition:color .25s,background .25s;
}
.navdrop__menu a.navdrop__all:hover{color:var(--bone);background:rgba(255,255,255,.03)}
.navdrop__all .arw{flex:0 0 auto;transition:transform .3s}
.navdrop__all:hover .arw{transform:translateX(3px)}

/* ============================================================ THE ROW ITSELF
   Press joined the top-level row on 18 Aug, making it SIX items (The Saga · The Books ·
   The Lore · The Author · Press · Purchase) beside a logo whose wordmark is ~300px.
   That does not fit between 760px — where style.css hides the links — and about 1060px.

   Measured before this block existed: at 1024px "THE SAGA" and "THE AUTHOR" each broke
   onto two lines, and at 770px "PRESS" was clipped and the Purchase CTA was pushed
   clean off the right edge (invisible, because body carries overflow-x:hidden — so it
   failed silently rather than producing a scrollbar). The five-item row had the same
   fault from ~980px down; adding Press moved the onset up, it did not create it.

   Three graded steps, cheapest first. `white-space:nowrap` is the important one: a
   two-line nav label is never the right answer, so the row is forced to stay one line
   and the remaining rules buy it the width to do that in. */
.site-nav__links > a{white-space:nowrap}

@media(max-width:1180px){
  .site-nav__links{gap:1.15rem}
}
@media(max-width:1060px){
  .site-nav__links{gap:.8rem}
  .site-nav__links a{font-size:.6rem;letter-spacing:.15em}
  .site-nav__cta{padding:.45rem .7rem}
  /* the wordmark is the biggest single thing in the bar and the most redundant — the
     sigil mark beside it is already the logo. display:none, not opacity, because
     chrome.js's initLogo drives the wordmark's reveal with a class and inline styles;
     taking it out of layout is the one thing that cannot be fought over. */
  .site-nav .logo__wm{display:none}
}

/* the whole nav collapses on small screens (style.css hides the links); the
   dropdowns must go with it rather than sit orphaned. */
@media(max-width:760px){
  .site-nav__links > .navdrop{display:none}
}

/* ============================================================ THE DRAWER
   Ankit, 20 Aug, reviewing on a phone: "there's no hamburger menu on mobile, add one
   top right" and "the logo is just icon, never shows the name, it should on scroll
   like desktop". Those two are one problem. The wordmark was taken out at 1060px (see
   the block above) to buy the six-item row the width it needed; the row is what has to
   go instead, and once it does the wordmark has room again.

   So the breakpoint here is 1060px, not 760px — the same width the row already admitted
   it did not fit at. Between 1060 and 760 the row was surviving at .6rem type with no
   wordmark at all, which is the cramped state Ankit is describing on a tablet as much
   as on a phone.

   NOTHING IS ADDED TO ANY PAGE'S HTML. The button and the panel are built by nav.js out
   of the nav already in the document, so the 47 nav blocks stay byte-identical and the
   links have one source rather than two that drift. The `.has-burger` class nav.js sets
   is the gate: with scripts off none of this applies and the header keeps exactly the
   behaviour it has today — Purchase CTA visible, wordmark hidden — because a burger that
   cannot open is worse than no burger. */
.nav-burger{display:none}

@media(max-width:1060px){
  /* The five destinations go behind the burger; the PURCHASE CTA does not. Ankit's other
     word on 20 Aug was that with the sticky Amazon bar off phones and tablets, "the purchase
     CTA button up top does the job" — so it has to still be up top and visible, not one row
     inside a panel. It is in the drawer as well, as its last item. */
  .site-nav.has-burger .site-nav__links > a:not(.site-nav__cta),
  .site-nav.has-burger .site-nav__links > .navdrop{display:none}
  /* this is now the gap between the CTA and the burger, which are the only two things left
     in the row — nothing else is affected by it */
  .site-nav.has-burger .site-nav__links{gap:.5rem}

  .site-nav.has-burger .nav-burger{
    display:grid;place-items:center;flex:0 0 auto;
    /* NO height. `align-self:stretch` takes the flex line's cross size, and the CTA is the only
       other thing in the line, so the button is exactly as tall as the Purchase button — in both
       bands, without repeating the CTA's font-size and padding here and keeping two sets of
       numbers in step. Measured: Δ0.0px at 320/360/390/414/600/768/1024.
       The WIDTH cannot be had the same way — `aspect-ratio:1` is a no-op on a flex item whose
       main size resolves from its content before the cross-size stretch happens, so it measured
       20.4 against a 31.7 height. The side padding is what squares it up, and it is free to be a
       plain number because nothing else has to agree with it. */
    align-self:stretch;padding:0 .35rem;
    background:none;cursor:pointer;
    border:1px solid rgba(201,162,75,.3);color:var(--bone);
    transition:border-color .3s ease,background .3s ease;
  }
  .site-nav.has-burger .nav-burger:hover,
  .site-nav.has-burger .nav-burger:focus-visible{border-color:var(--accent);outline:none}
  /* matching the CTA's height took the button from 38px to 32px, which is under the ~44px a
     thumb wants. The BOX stays 32px — that is what Ankit asked for — and the hit area grows
     past it invisibly. -6px still leaves 2px of the 8px gap, so it cannot steal a tap from the
     Purchase button next to it. */
  .site-nav.has-burger .nav-burger{position:relative}
  .site-nav.has-burger .nav-burger::after{content:"";position:absolute;inset:-6px}

  /* THE WORDMARK, and the width it has to live in.
     Four things now share a 390px bar — sigil, wordmark, CTA, burger — and the wordmark is
     the only one that can give. At its desktop 1.16rem it measures ~300px on its own, so it
     scales with the viewport instead of sitting at one size.
     `min-width:0` + `overflow:hidden` on the lockup is the guard, not a nicety: `.lw-b` is
     `white-space:nowrap`, so on a narrower phone than the clamp floor allows for it would
     otherwise refuse to shrink and shove the CTA past the right edge — and `body` carries
     `overflow-x:hidden`, so that fails SILENTLY with no scrollbar to show it. This is the
     exact fault the six-item row hit at 770px; it clips instead. */
  .site-nav.has-burger .logo{min-width:0;gap:.62rem}
  .site-nav.has-burger .logo__wm{display:flex;min-width:0;overflow:hidden}
  .site-nav.has-burger .logo__wm .lw-b{
    font-size:clamp(.62rem,2.75vw,1.16rem);letter-spacing:.11em;
  }
}
/* below this the four of them genuinely do not fit — measured, the wordmark clips mid-word at
   320px ("A BALLAD OF CHA") — and a clipped wordmark is worse than none. The sigil is the
   brand at that width, which is where this started. */
@media(max-width:349px){
  .site-nav.has-burger .logo__wm{display:none}
}

/* the three lines, and the X they become. Hairlines, like every other rule on the site. */
.nav-burger__box{position:relative;width:1.15rem;height:.75rem}
.nav-burger__box i{
  position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .2s ease;
}
.nav-burger__box i:nth-child(1){top:0}
.nav-burger__box i:nth-child(2){top:50%;margin-top:-.5px}
.nav-burger__box i:nth-child(3){bottom:0}
.nav-burger[aria-expanded="true"] .nav-burger__box i:nth-child(1){transform:translateY(.375rem) rotate(45deg)}
.nav-burger[aria-expanded="true"] .nav-burger__box i:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] .nav-burger__box i:nth-child(3){transform:translateY(-.375rem) rotate(-45deg)}

/* ---- the panel ----
   It lives on <body>, not inside .site-nav: the nav takes `backdrop-filter` on .scrolled,
   and a backdrop-filter makes its element a containing block for fixed descendants — a
   drawer nested in there would be clipped to the height of the header. */
/* ⚠️ `height` is DYNAMIC, and `inset:0` alone is not enough. Ankit, 20 Aug: *"the mobile menu needs
   scrolling capability for smaller height phones."* The panel already had `overflow-y:auto` and it does
   scroll headless — 882px of content in a 640px panel, measured — which is exactly why this shipped:
   headless has no browser UI. On a phone `position:fixed;inset:0` sizes to the LAYOUT viewport, which is
   taller than the visible area while the URL bar is showing, so the panel believed it was full height,
   had almost nothing to overflow, and the bottom of the list (the Purchase CTA) sat under the browser
   chrome where it could not be reached. It reads as "it will not scroll" because there is nothing to
   scroll TO. `100dvh` is the visible height, so the overflow becomes real and `overflow-y:auto` engages.
   The `100vh` line above it is the fallback and must stay first. */
.navmob{position:fixed;inset:0;height:100vh;height:100dvh;z-index:60;visibility:hidden;transition:visibility 0s linear .42s}
.navmob.is-open{visibility:visible;transition:visibility 0s}
.navmob__scrim{position:absolute;inset:0;background:rgba(6,4,5,.72);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .42s ease}
.navmob.is-open .navmob__scrim{opacity:1}

.navmob__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(20rem,84vw);
  background:linear-gradient(200deg,rgba(22,15,15,.985),rgba(9,7,8,.99));
  border-left:1px solid rgba(201,162,75,.2);
  box-shadow:-30px 0 70px -26px rgba(0,0,0,.95);
  transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.navmob.is-open .navmob__panel{transform:none}
.navmob__inner{padding:.9rem 1.35rem calc(1.6rem + env(safe-area-inset-bottom))}

/* the panel's own dismiss, sitting level with the burger it replaced */
.navmob__x{
  display:grid;place-items:center;margin-left:auto;width:2.4rem;height:2.4rem;padding:0;
  background:none;border:1px solid rgba(201,162,75,.3);color:var(--bone);cursor:pointer;
  transition:border-color .3s ease}
.navmob__x:hover,.navmob__x:focus-visible{border-color:var(--accent);outline:none}
.navmob__x svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.3}

/* ⚠ NO `display` on this bare selector. `.navmob a` is (0,1,1) and would beat
   `.navmob__item{display:grid}` at (0,1,0), which collapses the roman numeral into the title
   — "INIGHT & CHAOS". It is the same trap `.navdrop__menu a.navdrop__all` above was written
   around. Every row type declares its own display. */
.navmob a{color:var(--ash);transition:color .25s ease,border-color .25s ease}

/* a top-level destination — The Saga, The Author, Press */
.navmob__top{
  display:block;
  font-family:var(--label);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.72rem 0;border-bottom:1px solid rgba(255,255,255,.055);
}
.navmob__top:hover,.navmob__top:focus-visible,.navmob__top[aria-current="page"]{color:var(--bone);outline:none}
.navmob__top[aria-current="page"]{border-bottom-color:var(--accent)}

/* a group — the head is the same link the desktop trigger is, the rows are its panel */
.navmob__grp{border-bottom:1px solid rgba(255,255,255,.055);padding-bottom:.6rem}
.navmob__head{
  display:block;
  font-family:var(--label);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.72rem 0 .1rem;color:var(--bone);
}
.navmob__head .navmob__rule{display:block;height:1px;margin-top:.5rem;
  background:linear-gradient(90deg,var(--accent),rgba(201,162,75,0))}
.navmob__item{
  display:grid;grid-template-columns:1.7rem 1fr;align-items:baseline;gap:.7rem;
  padding:.44rem .6rem;border-left:1px solid transparent;
  transition:color .25s ease,background .25s ease,border-color .25s ease;
}
.navmob__grp--plain .navmob__item{grid-template-columns:1fr;gap:0}
.navmob__item:hover,.navmob__item:focus-visible{
  color:var(--bone);background:rgba(255,255,255,.035);border-left-color:var(--c,var(--accent));outline:none}
.navmob__item[aria-current="page"]{color:var(--bone);border-left-color:var(--c,var(--accent));background:rgba(255,255,255,.05)}
/* the panel is 20rem at most, so the desktop `nowrap` on these two would run them off the
   edge — the subtitle under Poetry & Soundtrack is on its own wider than the drawer */
.navmob .navdrop__ttl,.navmob .navdrop__ttl em{white-space:normal}
.navmob .navdrop__ttl{line-height:1.3}
.navmob .navdrop__ttl em{margin-top:.02rem}
.navmob__item .navdrop__rom{font-size:.92rem}
/* "The Saga Entire" is a footer row in the desktop panel and reads as one here too */
.navmob__item.navdrop__all{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  margin-top:.35rem;border-left:0;border-top:1px solid rgba(201,162,75,.14);color:var(--ash-dim)}

/* the Purchase CTA keeps its border and its crimson — Ankit's word (20 Aug) is that with the
   sticky Amazon bar gone from phones and tablets, "the purchase CTA button up top does the
   job", so it is the one thing in here that must not read as another list row */
.navmob__cta{
  display:block;margin-top:1.1rem;text-align:center;border:1px solid var(--accent);
  padding:.85rem 1rem;color:var(--bone)!important;
  font-family:var(--label);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s ease}
.navmob__cta:hover,.navmob__cta:focus-visible{background:var(--accent);outline:none}

html.nav-open,html.nav-open body{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .navdrop__menu,.navdrop__btn .caret,.navdrop__all .arw{transition:none}
  .navmob,.navmob__scrim,.navmob__panel,.nav-burger__box i{transition:none}
}