/* ===========================================================================
   menu.css -- the site's index, and the button that opens it.

   This lived in paper.css, which the Get It Live app does not load: the app
   is deliberately self-contained on app/app.css. The result was that the one
   place somebody spends real time -- six steps, several minutes each -- was
   the one place with no way back into the rest of the site except a wordmark.

   Copying the markup into the app would have copied the seven links with it,
   and a duplicated list of destinations is how a menu and a footer start
   disagreeing about what the site contains. So the rules live here once and
   both stylesheets @import them, and _chrome.js owns the single copy of the
   link list for the menu, the footer and the app alike.
   =========================================================================== */

.menu-btn{background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:flex-end;
  min-height:var(--navh);min-width:56px;padding:0;
  font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);-webkit-tap-highlight-color:transparent}
/* The rule under the word is there at rest, because a word on its own reads
   as a label and a label does not look like it does anything. :active is what
   carries that to a touch screen. */
.menu-btn span{position:relative;display:inline-block;padding-bottom:5px}
.menu-btn span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.5;transition:height .18s var(--ease,cubic-bezier(.22,1,.36,1)),opacity .18s var(--ease,cubic-bezier(.22,1,.36,1))}
.menu-btn:hover span::after,.menu-btn:focus-visible span::after,
.menu-btn:active span::after,.menu-btn[aria-expanded="true"] span::after{height:2px;opacity:1}
.menu-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.menu-btn span::after{transition:none}}

/* ---------- the menu ----------
   Dark, like the bar it opens from and the footer it sits above, so opening
   it reads as the same surface expanding rather than a different page. It was
   paper on paper: a light panel over a light page, which is why it needed the
   bar to stay visible just to prove something had happened.
   Seven rows, each a full-width band with a hairline under it, rather than
   seven words floating in the middle of a screen. The number on the left is
   the same wayfinding the page's own section tabs use, so the menu and the
   page agree about what 03 means. */
.mmenu{position:fixed;inset:0;z-index:200;
  --ink:#F7F4EC;--ink-2:#B3AEA0;--ink-3:#8C8878;
  --line:rgba(247,244,236,.20);--line-soft:rgba(247,244,236,.11);
  background:#17170F;color:var(--ink);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:calc(var(--navh) + clamp(14px,2.4vw,26px)) var(--gut,5%) clamp(24px,4vw,44px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease,cubic-bezier(.22,1,.36,1)),visibility .3s}
.mmenu.open{opacity:1;visibility:visible}
.mmenu[hidden]{display:none}
.mmenu>*{width:100%;max-width:var(--wrap,1220px);margin-inline:auto}

.mmenu-index{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(8px,2vw,24px) 0}
.mmenu-index a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(14px,3vw,26px);text-decoration:none;color:var(--ink);
  padding:clamp(13px,2.2vw,20px) 0;border-bottom:1px solid var(--line-soft);
  /* each row arrives just after the one above it, which walks the eye down
     the list instead of presenting seven at once */
  opacity:0;transform:translateY(6px)}
.mmenu.open .mmenu-index a{animation:miIn .4s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(60ms + var(--i) * 45ms)}
@keyframes miIn{to{opacity:1;transform:none}}
.mmenu-index a:first-child{border-top:1px solid var(--line-soft)}

.mi-n{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.14em;
  color:var(--ink-3);transition:color .2s var(--ease,cubic-bezier(.22,1,.36,1))}
.mi-l{font-family:'Mazius',Georgia,serif;
  font-size:clamp(27px,22.9px + 1.09vw,38px);line-height:1.08;letter-spacing:-.015em}
.mi-a{font-family:'DM Mono',monospace;font-size:15px;color:var(--ink-3);
  opacity:0;transform:translateX(-6px);
  transition:opacity .22s var(--ease,cubic-bezier(.22,1,.36,1)),transform .22s var(--ease,cubic-bezier(.22,1,.36,1)),color .2s var(--ease,cubic-bezier(.22,1,.36,1))}
.mmenu-index a:hover .mi-a,.mmenu-index a:focus-visible .mi-a,
.mmenu-index a:active .mi-a{opacity:1;transform:none;color:var(--ink)}
.mmenu-index a:hover .mi-n,.mmenu-index a:focus-visible .mi-n{color:var(--ink)}
.mmenu-index a[aria-current=page] .mi-l{font-style:italic}
.mmenu-index a[aria-current=page] .mi-n{color:var(--ink)}

/* the three that are looked for rather than browsed */
.mmenu-foot{flex:none;padding-top:clamp(16px,2.4vw,24px)}
.mmenu-util{display:flex;flex-wrap:wrap;gap:6px clamp(16px,2.4vw,26px)}
.mmenu-util a{font-family:'DM Mono',monospace;font-size:12.5px;letter-spacing:.08em;
  text-transform:lowercase;color:var(--ink-3);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:var(--line);min-height:44px;display:inline-flex;align-items:center}
.mmenu-util a:hover,.mmenu-util a:focus-visible{color:var(--ink);text-decoration-color:currentColor}

@media(prefers-reduced-motion:reduce){
  .mmenu-index a{opacity:1;transform:none}
  .mmenu.open .mmenu-index a{animation:none}
  .mi-a{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.mmenu-index a:hover{padding-left:0}}

/* the quiet row, and the line the whole site is about */
@media(prefers-reduced-motion:reduce){.mmenu{transition:none}}