/* THE MENU — the site's navigation, on every page, at every width that needs it.

   WHAT WAS WRONG, AND IT WAS NOT A PHONE PROBLEM.

   The left rail carries the six doors — Search and the five programmes — and it exists on
   exactly ONE page. The other 787 carry `<div class="top">`, whose nav is Why Bose Boys ·
   Our Mission · Editorial Principles · Sign up/Login · Subscribe · Join Forces. Not one
   programme is in it. So on every page but the home page, at every width including a
   1440px desktop, the only route to Breaking The Build or Collateral Damage was the footer.

   And below 861 the rail is display:none and the home ribbon's links are display:none, so
   on a phone the home page's masthead was the wordmark and nothing else: no navigation, no
   search, no account, and no Subscribe — the entire membership funnel invisible on the
   device most readers arrive on. Measured: the first navigation link on a 390px home page
   sat 11,723 pixels down, which is fourteen screens.

   audit/nav.py reported 0 orphans throughout, and it was right by its own definition: every
   one of those destinations is in the DOM. It reads HTML. `display:none` is CSS. That gap
   is what audit/reach.py now closes. */

/* AND IT IS NOT DRAWN UNTIL menu.js HAS RUN. The same law the shelf controls follow: a
   control that appears without the behaviour that makes it work is a lie about what the
   page can do, and on 799 pages this one is the only navigation there is. `display:none`
   until the script marks the document; the footer's site map is what a reader without it
   has, which is what they had before this file existed. */
.menubtn{display:none}
html.menu-live .menubtn{position:fixed;left:12px;top:12px;z-index:120;width:44px;height:44px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:8px;border:1px solid rgba(201,168,76,.3);background:rgba(8,7,11,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;padding:0;
  transition:border-color .2s,background .2s}
html.menu-live .menubtn span{display:block;width:18px;height:1.5px;background:var(--gold-bright,#e9c765);
  border-radius:2px;transition:transform .26s,opacity .2s}
html.menu-live .menubtn:hover{border-color:var(--gold,#c9a84c);background:rgba(8,7,11,.95)}
html.menu-live .menubtn:focus-visible{outline:2px solid var(--gold-bright,#e9c765);outline-offset:3px}
html.menu-live .menubtn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
html.menu-live .menubtn[aria-expanded="true"] span:nth-child(2){opacity:0}
html.menu-live .menubtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* ONE DOOR PER WIDTH. Reversed on the owner's word, 26 Aug 2026, and the earlier ruling
   it reverses is recorded here rather than quietly overwritten: this file used to say
   "every button that is on phone, must also be in the desktop version," and drew the
   drawer button at every width. On the one page that carries a rail that produced two
   controls opening the same six doors, and the drawer button had to be parked at the FOOT
   of the rail's column to avoid the seal — a hamburger at the end of a bar, which is not
   where anybody looks for one.

   The ruling now: WHERE THE RAIL IS ON SCREEN, THE RAIL IS THE NAVIGATION. The drawer
   button is not drawn at all. Below 861 the rail is display:none, so the drawer button
   takes the top-left corner and is the only navigation there is — which is the job it was
   written for. On the 789 pages with no rail it keeps that same corner at every width.

   So: one control, always top-left, never two, and never at the end of a bar. What the
   drawer carried beyond the rail's six — account, Subscribe, billing, gift, and the four
   About pages — is on the desktop masthead and in the footer site map on every page that
   has no drawer button. audit/inbound.py holds that to be true rather than trusting it. */
@media(min-width:861px){
  body:has(.rail) .menubtn,
  body:has(.rail) .menuscrim,
  body:has(.rail) .menudrw{display:none !important}
}
/* and a floor under the last row either way */
.menudrw{padding-bottom:74px}

.menuscrim{position:fixed;inset:0;z-index:118;background:rgba(4,3,6,.62);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .28s}
.menuscrim.on{opacity:1;pointer-events:auto}

.menudrw{position:fixed;left:0;top:0;bottom:0;z-index:119;width:min(310px,86vw);
  background:#0c0a11;border-right:1px solid rgba(201,168,76,.22);
  transform:translateX(-102%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:70px 0 26px}
.menudrw.on{transform:none;box-shadow:22px 0 60px rgba(0,0,0,.6)}
@media(prefers-reduced-motion:reduce){.menudrw,.menuscrim,.menubtn span{transition:none}}

.menudrw .mgrp{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted,#8b8274);padding:16px 22px 8px}
.menudrw .mgrp:first-of-type{padding-top:4px}
.menudrw a,.menudrw button.mrow{display:flex;align-items:center;gap:14px;
  min-height:48px;padding:10px 22px;color:var(--warm,#b9b0a1);text-decoration:none;
  font-family:'Cinzel',serif;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  background:none;border:0;width:100%;text-align:left;cursor:pointer;
  transition:color .18s,background .18s}
.menudrw a:hover,.menudrw a:focus-visible,.menudrw button.mrow:hover{
  color:var(--gold-bright,#e9c765);background:rgba(201,168,76,.08)}
.menudrw a[aria-current="page"]{color:var(--gold-bright,#e9c765)}
.menudrw a svg{width:20px;height:20px;flex:0 0 20px}
.menudrw hr{border:0;border-top:1px solid rgba(239,231,214,.1);margin:12px 22px}
.menudrw .msub{border-color:rgba(201,168,76,.5);color:var(--gold-bright,#e9c765)}

/* THE MASTHEAD MAKES ROOM FOR IT rather than being covered by it. Both mastheads: the home
   page's `nav#nav` and the `.top` the other 787 pages carry. */
/* the home ribbon only needs to move over where the button is in its corner, which is
   below 861 — above that the rail is on screen and the button is at the rail's foot. */
@media(max-width:860px){
  #nav{padding-left:66px}
  .top{padding-left:66px}
}
body:not(:has(.rail)) .top{padding-left:66px}
body.menu-open{overflow:hidden}


/* ── THE CORNER HAD THREE CONTROLS IN IT AND ONE OF THEM WAS BURIED ─────────────────
   On the 524 pages that carry a back button, the top-left corner held, stacked:

     .backbtn   x 22–121   z-index 60     the way out of an episode
     .top       full width z-index 90     the masthead, painted straight over it
     .brand     x 66–227                  and the wordmark across its right half

   So "← Back" could not be clicked on 524 pages, and had not been able to be for as long
   as both rules have existed. Playwright times out trying; a reader gets the header. It is
   not a hit-testing subtlety, it is a control under two other things. This release put a
   menu button on top of its left third as well, which is how it was finally found.

   Three controls, three places. The menu keeps the corner it has on every other page in
   the site, because a control that moves is a control you look for. The back button moves
   out from under the masthead and takes the slot beside it, and the masthead's own padding
   moves over far enough to clear them both. Nothing overlaps anything now, at either width
   the back button has. */
body:has(.backbtn) .backbtn{left:66px;z-index:100}
body:has(.backbtn) .top{padding-left:180px}
@media(max-width:680px){
  body:has(.backbtn) .top{padding-left:124px}
}