/* One continuous mobile/tablet menu surface; the desktop header stays intact. */
@media (max-width: 999px) {
  .intention-menu { position: static; }
  .intention-menu summary { justify-content: flex-end; gap: 8px; min-width: 60px; min-height: 46px; padding: 0; line-height: 1.2; font-weight: 400; white-space: nowrap; }
  .intention-menu summary::marker { content: ""; }
  .intention-menu[open] summary { font-weight: 400; }
  .intention-menu .menu-label-close { display: none; }
  .intention-menu[open] .menu-label-open { display: none; }
  .intention-menu[open] .menu-label-close { display: inline; }
  .intention-menu .menu-mark { position: relative; display: block; flex: 0 0 16px; width: 16px; height: 12px; }
  .intention-menu .menu-mark::before,
  .intention-menu .menu-mark::after { content: ""; position: absolute; top: 50%; left: 0; width: 16px; height: 1.5px; background: currentColor; transform-origin: center; transition: none; }
  .intention-menu .menu-mark::before { transform: translateY(-3px); }
  .intention-menu .menu-mark::after { transform: translateY(3px); }
  .intention-menu[open] .menu-mark::before { transform: rotate(45deg); }
  .intention-menu[open] .menu-mark::after { transform: rotate(-45deg); }

  .intention-header:has(.intention-menu[open]) { background: var(--paper); color: var(--espresso); }
  .intention-page .intention-header .intention-book { white-space: nowrap; }
  .intention-page .intention-header:has(.intention-menu[open]) .intention-book { background: var(--espresso); color: var(--ivory); }
  .intention-header:has(.intention-menu[open]) .intention-book:focus-visible { outline-color: var(--espresso); }
  .intention-menu nav {
    position: absolute; top: calc(100% - 1px); left: 0; right: 0;
    display: grid; align-content: start; gap: 0;
    max-height: calc(100svh - 140px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px max(var(--gutter), env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: var(--paper); color: var(--espresso);
  }
  .intention-menu nav a { min-height: 56px; padding: 5px 0; font: 400 38px/1.15 var(--serif); letter-spacing: -.02em; text-decoration: none; }
  .intention-menu nav a:focus-visible { outline-offset: 3px; }
}
@media (max-width: 599px) {
  .intention-menu nav a { font-size: 34px; }
}
@media (max-width: 359px) {
  .intention-header { column-gap: 6px; }
  .intention-brand { font-size:30px; }
  .intention-page .intention-header .intention-book { padding-inline:10px; }
  .intention-menu summary { min-width:52px; }
}