/* AMP ENT menu bar. One file for every page, so the menu cannot drift between pages.
   Reads the page's own tokens (--s-*, --t-*, --gutter, --disp, --accent and the rest). */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-4) var(--gutter);background:linear-gradient(180deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.7) 60%,rgba(8,8,10,0) 100%)}
/* once the page has moved under it, the bar closes up so text and tiles do not show through the links */
.bar.over{background:linear-gradient(180deg,rgba(8,8,10,.98) 0%,rgba(8,8,10,.96) 72%,rgba(8,8,10,0) 100%)}
.bug{font-family:var(--disp);font-weight:700;font-size:var(--t-title);letter-spacing:.03em;color:#fff}
.bug b{color:var(--accent)}
.menu{display:flex;align-items:center;gap:var(--s-6);font-family:var(--body);font-weight:600;font-size:var(--t-meta);line-height:1.5;letter-spacing:.1em;text-transform:uppercase}
.menu a{color:var(--soft);transition:color .2s}
.menu a:hover,.menu a[aria-current="page"]{color:#fff}
.menu a.sec[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px}
.menu a.pill{color:var(--on-accent);background:var(--accent);border-radius:999px;padding:var(--s-3) var(--s-5);transition:background .2s}
.menu a.pill:hover{color:var(--on-accent);background:var(--accent-dk)}
.menu .more{display:none;align-items:center;min-height:48px;padding:0 var(--s-4);border:1px solid rgba(244,244,246,.4);background:rgba(8,8,10,.4);
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:#fff;cursor:pointer;transition:border-color .2s}
.menu .more:hover{border-color:var(--accent)}
.menu .more:focus-visible,.sheet .x:focus-visible,.sheet a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:820px){
  .menu{gap:var(--s-3)}
  .menu a.sec{display:none}
  .menu .more{display:inline-flex}
}
@media(max-width:380px){
  .menu{gap:var(--s-2);letter-spacing:.06em}
  .menu a.pill{padding:var(--s-3) var(--s-4)}
  .menu .more{padding:0 var(--s-3)}
}

/* the full list, for screens too narrow for the row */
dialog.sheet{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:rgba(4,4,6,.98);color:var(--ink)}
dialog.sheet::backdrop{background:rgba(4,4,6,.98)}
.sheet .list{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s-5);padding:var(--s-9) var(--gutter) var(--s-7)}
.sheet .list a{font-family:var(--disp);font-weight:700;font-size:var(--t-h2);line-height:1.1;letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
.sheet .list a[aria-current="page"]{color:var(--accent)}
.sheet .list a.go{margin-top:var(--s-5);display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--s-4) var(--s-6);
  background:var(--accent);color:var(--on-accent);font-family:var(--body);font-weight:600;font-size:var(--t-meta);line-height:1;letter-spacing:.1em}
.sheet .x{position:absolute;top:var(--s-4);right:var(--gutter);min-height:48px;padding:0 var(--s-4);border:1px solid rgba(244,244,246,.4);background:none;
  font-family:var(--body);font-weight:600;font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase;color:#fff;cursor:pointer}
.sheet .x:hover{border-color:var(--accent)}