:root {
  --paper-desktop: #ccc0b4;
  --paper-mobile: #ebe1d8;
  --ink: #5f4638;
  --ink-deep: #4f3c2e;
  --line: rgba(95, 70, 56, .24);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: var(--paper-desktop); }
body { overflow: hidden; }
a, button { -webkit-tap-highlight-color: transparent; }
a { outline: none; }

.page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  background: var(--paper-desktop);
}
.page-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hit { fill: transparent; pointer-events: all; cursor: pointer; }
.desktop-svg { display: block; }
.mobile-svg { display: none; }

.menu-underline {
  stroke: #6e5139;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.menu-link:hover .menu-underline,
.menu-link:focus .menu-underline { opacity: 1; }
.menu-link[aria-current="page"] .menu-underline { opacity: .55; }

.focus-outline {
  fill: none;
  stroke: #6e5139;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  pointer-events: none;
}
.menu-link:focus-visible .focus-outline,
.home-link:focus-visible .focus-outline { opacity: .72; }

.mobile-menu { display: none; }

@media (max-width: 767px) {
  html, body, .page { background: var(--paper-mobile); }
  .desktop-svg { display: none; }
  .mobile-svg { display: block; }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(235, 225, 216, .985);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu-inner { width: min(76vw, 360px); text-align: center; }
  .mobile-menu-close {
    position: absolute;
    top: max(24px, env(safe-area-inset-top));
    right: max(27px, env(safe-area-inset-right));
    border: 0;
    background: transparent;
    color: #6e5139;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-menu a {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid rgba(110, 81, 57, .22);
    color: var(--ink-deep);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    letter-spacing: .22em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .mobile-menu a:first-of-type { border-top: 1px solid rgba(110, 81, 57, .22); }
  .mobile-menu a[aria-current="page"] { font-weight: 600; }
}