/* Header menu: at 600px and under, the page links fold into a drop-down behind a three-line button
   (nav.js opens and closes it). Wider, the links sit in the header as before. */
.menu-btn{display:none}
.menu{display:contents}
@media (max-width:600px){
  header nav{position:relative}
  .menu-btn{display:inline-grid;place-items:center;order:2;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;
    background:#fff;color:#21110c;cursor:pointer;box-shadow:0 8px 32px rgba(166,181,214,.25)}
  .menu-btn svg{width:20px;height:20px}
  .menu-btn:focus-visible{outline:2px solid #21110c;outline-offset:2px}
  .menu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:200px;
    flex-direction:column;align-items:stretch;padding:8px;background:#fff;border-radius:20px;
    box-shadow:0 12px 40px rgba(33,17,12,.14)}
  header nav.open .menu{display:flex}
  header nav .menu a{display:block;padding:12px 16px;font:500 16px/1.2 Inter,system-ui,sans-serif;color:#21110c;
    white-space:nowrap;border-radius:12px}
  header nav .menu a:hover{background:#f3f1f6}
  header nav .menu a[hidden]{display:none}
}