/* nav.css — header-nav dropdown menus for the Home and Method buttons.
   Both buttons front a family of subpages (Home: worlds/delta-e/forces/pigments/
   gallery; Method: the six §-chapters), so on hover-capable desktops they grow a
   small ▾ and a hover/focus dropdown listing those subpages. Everything here is
   gated behind (hover:hover)+(pointer:fine)+(min-width:1024px): phones and
   tablets never see the arrow or the menu (mobile.css owns the header there,
   and its swipeable nav row is an overflow container that would clip an
   absolutely-positioned menu), so narrow layouts are pixel-identical. */

.nav-dd { position: relative; display: inline-flex; flex: 0 0 auto; }
.nav-dd > a { white-space: nowrap; }

.nav-dd-arw { display: none; font-size: 9px; opacity: .45; margin-left: 5px; }

/* padding-top (not a margin) bridges the visual gap below the button so the
   pointer never leaves .nav-dd while travelling into the panel. */
.nav-dd-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 320; padding-top: 7px; }

/* Panel matches the language picker's card (same bg/border/radius/shadow). */
.nav-dd-panel {
  background: #F7F1E3;
  border: 1px solid rgba(34, 29, 23, .16);
  border-radius: 18px;
  corner-shape: squircle;
  padding: 6px;
  box-shadow: 0 18px 42px -22px rgba(34, 29, 23, .55);
  width: max-content;
  min-width: 190px;
  max-width: 300px;
}
.nav-dd-panel a {
  display: block;
  padding: 8px 11px;
  border-radius: 12px;
  corner-shape: squircle;
  text-decoration: none;
  color: #221D17;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.nav-dd-panel a:hover { background: rgba(34, 29, 23, .06); color: #C8453B; }

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .nav-dd-arw { display: inline; }
  .nav-dd:hover .nav-dd-menu,
  .nav-dd:focus-within .nav-dd-menu { display: block; }
}