.menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:44px;height:44px;padding:0;border:1px solid #1e463b;border-radius:3px;background:#fff;color:#1e463b;cursor:pointer}
.menu-toggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:1px}
.menu-toggle:focus-visible{outline:3px solid #8aa89b;outline-offset:3px}

/* Size the wordmark to the name, then center its second line within it. */
.site-header .header-main .brand,body>header:not(.site-header) .brand{display:flex;flex-direction:column;align-items:center;text-align:center;width:max-content;max-width:100%}
.site-header .header-main .brand small,body>header:not(.site-header) .brand small{align-self:center;text-align:center;margin-inline:auto}

@media(max-width:900px){
  .menu-toggle{display:flex}

  body>header:not(.site-header){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-items:center;column-gap:12px;row-gap:16px;padding:18px 22px}
  body>header:not(.site-header) .brand{grid-column:1;grid-row:1;min-width:0;width:auto;align-items:flex-start;text-align:left}
  body>header:not(.site-header) .brand span{font-size:clamp(25px,6vw,38px);white-space:normal}
  body>header:not(.site-header) .brand small{font-size:10px;letter-spacing:.35em}
  body>header:not(.site-header) .menu-toggle{grid-column:2;grid-row:1;justify-self:end}
  body>header:not(.site-header) .book{grid-column:1/-1;grid-row:2;justify-self:center;margin:0}
  body>header:not(.site-header) nav{grid-column:1/-1;grid-row:3;display:none;flex-direction:column;align-items:stretch;order:initial;width:100%;gap:0;margin:0;padding:12px 0 0;border-top:1px solid #d9ded9;font-size:16px}
  body>header:not(.site-header).menu-open nav{display:flex}
  body>header:not(.site-header) nav>a,body>header:not(.site-header) nav>.drop>a{display:block;padding:9px 4px}
  body>header:not(.site-header) nav>.drop{width:100%}
  body>header:not(.site-header) nav>.drop>div{display:grid;position:static;min-width:0;padding:0 0 5px 16px;background:transparent;box-shadow:none}
  body>header:not(.site-header) nav>.drop>div a{padding:6px 4px;font-size:13px}

  .site-header{padding:18px 18px 22px}
  .site-header .header-main{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-items:center;column-gap:12px;row-gap:16px;min-height:0;padding:0}
  .site-header .brand{grid-column:1;grid-row:1;align-self:center;min-width:0;align-items:flex-start;text-align:left}
  .site-header .brand span{font-size:clamp(25px,7vw,34px);white-space:normal}
  .site-header .brand small{font-size:10px;letter-spacing:.34em}
  .site-header .menu-toggle{grid-column:2;grid-row:1;justify-self:end}
  .site-header .header-book{grid-column:1/-1;grid-row:2;justify-self:center;align-self:center;margin:0}
  .site-header nav{grid-column:1/-1;grid-row:3;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;gap:0;margin:0;padding:12px 0 0;border-top:1px solid #d9ded9}
  .site-header.menu-open nav{display:flex}
  .site-header nav a{display:block;padding:9px 4px;font-size:16px}
}

@media(max-width:900px){
  .site-header .header-main .brand,body>header:not(.site-header) .brand{align-items:center;text-align:center;width:max-content}
}