/* Site chrome: the burger and the slide-out menu.
 *
 * Shared by every page rather than inlined per page, which is the one thing that has repeatedly
 * gone wrong on this site. Everything else here is still inlined and self-contained; this file
 * and chrome.js are same-origin, so the pages still make zero third-party requests.
 *
 * The interaction is lifted from andjroo.com (public/pages.css): a right-anchored panel that
 * slides in, a backdrop, and a mirrored burger whose lines shorten toward the bottom. Retoned
 * from that site's near-black to this one's light tokens. */

.burger {
  position: absolute; top: 26px; right: 24px; z-index: 30;
  display: block; background: none; border: 0; padding: 8px;
  cursor: pointer; color: var(--ink);
  border-radius: 500px;
}
.burger svg { display: block; }
.burger:focus-visible { outline: 2px solid #0582CA; outline-offset: 2px; }

.menu-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(31, 35, 72, 0.6);          /* navy scrim, never black (rule 11) */
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.25, 0, 0, 1);
}

.menu-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45;
  width: min(86vw, 360px);
  background: var(--surface);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
  border-left: 1px solid var(--hair);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0, 0, 1);
  display: flex; flex-direction: column;
  padding: 24px 24px 20px;
  overflow-y: auto;
}
body.menu-open { overflow: hidden; }
body.menu-open .menu-panel { transform: none; }
body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }

.menu-close {
  align-self: flex-end; background: none; border: 0; padding: 8px; margin: -8px -8px 8px 0;
  cursor: pointer; color: var(--ink-2); border-radius: 500px; line-height: 0;
}
.menu-close:hover { color: var(--ink); }
.menu-close:focus-visible { outline: 2px solid #0582CA; outline-offset: 2px; }

/* Search. Inset box-shadow, never a border (rule 1), and a full pill. */
.menu-search {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--page); border: 0; border-radius: 500px;
  box-shadow: inset 0 0 0 2px var(--hair);
  padding: 12px 20px;
  transition: box-shadow 0.2s cubic-bezier(0.25, 0, 0, 1);
}
.menu-search::placeholder { color: var(--eyebrow); }
.menu-search:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ink); }

.menu-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--eyebrow); margin: 28px 0 4px;
}

.menu-list { display: flex; flex-direction: column; }
.menu-list a {
  display: block; padding: 12px; margin: 0 -12px; border-radius: 6px;
  border-bottom: 1px solid var(--hair);
  font-size: 16px; font-weight: 600; line-height: 1.35;
}
.menu-list a:last-child { border-bottom: 0; }
.menu-list a:hover { color: var(--ink); background: var(--page); }
.menu-list .m-date {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--eyebrow); margin-bottom: 3px;
}
.menu-empty { padding: 12px 0; color: var(--ink-2); font-size: 15px; }

.menu-ask {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding: 14px 20px;
  background: var(--page); border-radius: 500px;
  font-size: 16px; font-weight: 700;
  transition: background 0.2s cubic-bezier(0.25, 0, 0, 1);
}
.menu-ask:hover { background: rgba(31, 35, 72, 0.07); }
.menu-ask .m-arrow { color: var(--eyebrow); }

/* The wallet is the fourth element in one column, not a button floating in the footer. The
 * search pill, the article rows and the Submit pill all run the panel's full width and share
 * its left edge; a centred pill was the only thing breaking that, which read as an accident.
 *
 * app-shell's own pill is an inline-flex that hugs its label, so the width has to be pushed
 * onto its inner elements rather than the slot. Both states are covered: .nq-connect before
 * you connect, .nq-wallet__btn after. */
.menu-wallet { margin-top: auto; padding-top: 24px; }
.menu-wallet:empty { display: none; }
.menu-wallet .nq-wallet { display: block; }
.menu-wallet .nq-connect,
.menu-wallet .nq-wallet__btn { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-backdrop, .menu-search, .menu-ask { transition: none; }
}

/* "Read next", the link from one post to the other.
 *
 * It used to be a bare <a> inside a paragraph, which gave it no affordance at all: on the
 * blocked post it sat as the fourth item in the Method list and read as another method note.
 * It is a card now, in the same visual language as the article cards on the index, because it
 * points at the same kind of object and should look like it. */
.read-next {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 56px 0 0;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 10px;
  transition: box-shadow 0.2s cubic-bezier(0.25, 0, 0, 1);
}
.read-next:hover { box-shadow: 0 8px 56px rgba(0, 0, 0, 0.111); }
.read-next .rn-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--eyebrow); margin-bottom: 6px;
}
.read-next .rn-title { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.read-next .rn-arrow { color: var(--eyebrow); font-size: 22px; line-height: 1; flex: none; }

@media (max-width: 560px) {
  .read-next { margin-top: 40px; padding: 20px 22px; }
  .read-next .rn-title { font-size: 17px; }
}