/* Shared expanding navigation, from Figma Header / hover and Navigation / Expanding menu. */
.menu-btn { border: 0; background: none; color: var(--ink); cursor: pointer; }
.menu-btn:focus-visible, .site-menu a:focus-visible, .site-menu button:focus-visible {
  outline: 2px solid var(--orange, #de4f2b); outline-offset: 5px;
}
html.menu-open { overflow: hidden; }
html.menu-open body { position: fixed; top: var(--menu-scroll-y); width: 100%; overflow: hidden; }

/* The menu scales as one piece with the height of the screen, so on laptops and tablets it fits
   instead of scrolling. Every size below is a multiple of --mp, one "menu pixel": 1px when the
   screen has room for the designed menu (823px tall), smaller on shorter screens. It is capped at
   1px, so big screens get the designed size and never more, and floored at 0.62px (only very short
   windows scroll). The 60px is the top offset navigation.js gives it (20px) plus 40px of air below.
   Phones keep their own layout (the 640px block resets --mp to 1px). */
.site-menu {
  --menu-ease: cubic-bezier(.22, 1, .36, 1);
  --mp: clamp(0.62px, calc((100vh - 60px) / 823), 1px);
  --mp: clamp(0.62px, calc((100dvh - 60px) / 823), 1px);
  position: fixed; inset: auto; margin: 0; padding: 0;
  width: min(calc(520 * var(--mp)), calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 40px); border: 0; border-radius: calc(24 * var(--mp));
  background: #fff; color: var(--ink); overflow: hidden;
  box-shadow: 0 12px 36px rgb(36 33 28 / .10);
}
.site-menu[open] { display: flex; flex-direction: column; }
.site-menu::backdrop {
  background: rgb(36 33 28 / .12); opacity: 0;
  transition: opacity 340ms ease;
}
.site-menu.is-open::backdrop { opacity: 1; }
.site-menu__header { position: relative; flex: 0 0 calc(65 * var(--mp)); }
.site-menu__header .wordmark {
  position: absolute; left: 50%; top: calc(11 * var(--mp)); transform: translateX(-50%);
  font-size: calc(32 * var(--mp)); line-height: 1.3;
}
.site-menu[data-mode="top"] .site-menu__header .wordmark { visibility: hidden; }
.site-menu__close {
  position: absolute; left: calc(20 * var(--mp)); top: calc(9 * var(--mp)); margin: 0; padding: 0;
  width: 44px; height: 44px; display: block;   /* the tap target stays 44px at any scale */
}
.site-menu__close span {
  position: absolute; left: 10px; top: 21px; width: calc(24 * var(--mp)); height: 1.6px;
  transition: transform 380ms var(--menu-ease), width 380ms var(--menu-ease);
}
.site-menu__close span:first-child { transform: translateY(calc(-7 * var(--mp))); }
.site-menu__close span:last-child { transform: translateY(calc(7 * var(--mp))); }
.site-menu.is-open .site-menu__close span:first-child { transform: rotate(45deg); }
.site-menu.is-open .site-menu__close span:last-child { transform: rotate(-45deg); }
.site-menu__content {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(24 * var(--mp)) calc(32 * var(--mp)) calc(32 * var(--mp)); scrollbar-width: thin;
}
.site-menu__overview {
  display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--mp));
  font-family: var(--font-headline); font-size: calc(30 * var(--mp)); font-weight: 200; line-height: 1.3;
  padding-bottom: calc(18 * var(--mp));
}
/* Small labels shrink with the rest but never below 12px. */
.site-menu__caption { font-size: max(12px, calc(14 * var(--mp))); line-height: 1.4; color: #766f64; margin: calc(18 * var(--mp)) 0 calc(20 * var(--mp)); }
.site-menu__medications { list-style: none; margin: 0; padding: 0; }
.site-menu__medication {
  display: grid; grid-template-columns: calc(72 * var(--mp)) minmax(0, 1fr) calc(12 * var(--mp)); align-items: center;
  gap: calc(24 * var(--mp)); min-height: calc(94 * var(--mp)); padding: calc(10 * var(--mp)) 0;
}
.site-menu__photo { width: calc(72 * var(--mp)); height: calc(72 * var(--mp)); border-radius: calc(16 * var(--mp)); background: #efe4cf; overflow: hidden; position: relative; }
.site-menu__photo img { position: absolute; max-width: none; width: 130%; height: 169%; object-fit: fill; left: -15%; top: -24%; transition: transform 450ms var(--menu-ease); }
.site-menu__photo--pill img { width: 160%; height: 160%; left: -30%; top: -30%; }
.site-menu__photo--foundayo img { width: 90%; height: 90%; left: 5%; top: 5%; }
.site-menu__name { display: block; font-family: var(--font-headline); font-weight: 200; font-size: calc(27 * var(--mp)); line-height: 1.3; }
.site-menu__result { display: block; color: #766f64; font-size: max(12px, calc(14 * var(--mp))); line-height: 1.4; margin-top: calc(6 * var(--mp)); }
.site-menu__caret { width: calc(7 * var(--mp)); height: calc(13 * var(--mp)); flex-shrink: 0; transition: transform 300ms var(--menu-ease); }
.site-menu__medication:hover .site-menu__photo img { transform: scale(1.05); }
.site-menu a { transition: color 180ms ease; }
.site-menu__overview:hover, .site-menu__medication:hover .site-menu__name { color: #de4f2b; }
.site-menu a:hover .site-menu__caret { transform: translateX(3px); }
/* The journal link closes the nav, after the medications (added with /journal/, 2026-10-04). */
.site-menu__journal { margin-top: calc(14 * var(--mp)); padding-top: calc(18 * var(--mp)); border-top: 1px solid rgb(33 29 24 / .1); }
.site-menu__account { margin-top: calc(20 * var(--mp)); padding-top: calc(18 * var(--mp)); }
.site-menu__account .site-menu__caption { margin: 0 0 calc(12 * var(--mp)); }
.site-menu__login { display: flex; width: 100%; min-height: max(44px, calc(52 * var(--mp))); align-items: center; justify-content: center; border: 0; border-radius: 100px; background: #de4f2b; color: white; font: 200 calc(18 * var(--mp))/1.3 var(--font-headline); cursor: pointer; transition: background 220ms ease; }
.site-menu__login:hover { background: #ef6847; }
.site-menu__login:disabled { cursor: default; }
@media (max-width: 640px) {
  .site-menu { --mp: 1px; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  .site-menu__header { flex-basis: 60px; }
  .site-menu__header .wordmark { font-size: 28px; top: 12px; }
  .site-menu[data-mode="top"] .site-menu__header .wordmark { visibility: visible; }
  .site-menu__close { left: 14px; top: 8px; }
  .site-menu__content { padding: 12px 24px 24px; }
  .site-menu__overview { font-size: 25px; padding-bottom: 16px; }
  .site-menu__caption { font-size: 13px; margin: 14px 0 16px; }
  .site-menu__medication { grid-template-columns: 64px minmax(0, 1fr) 7px; gap: 16px; min-height: 84px; padding: 9px 0; }
  .site-menu__photo { width: 64px; height: 64px; border-radius: 14px; }
  .site-menu__name { font-size: 24px; }
  .site-menu__result { font-size: 12px; margin-top: 4px; }
  .site-menu__journal { margin-top: 10px; padding-top: 14px; }
  .site-menu__account { margin-top: 16px; padding-top: 16px; }
  .site-menu__login { min-height: 48px; }
}
@media (max-width: 360px) {
  .site-menu__content { padding-inline: 18px; }
  .site-menu__medication { gap: 12px; grid-template-columns: 56px minmax(0,1fr) 7px; }
  .site-menu__photo { width: 56px; height: 56px; }
  .site-menu__name { font-size: 22px; }
  .site-menu__overview { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu *, .site-menu::backdrop { transition: none !important; }
}