/* House of Blackmoore: About ▾ dropdown (nav) + Press page layout.
   Linked from about/ and press/. Add the same <link> to any page that gets the dropdown nav. */

/* ---------- About ▾ dropdown ---------- */
.nav-drop { position: relative; display: inline-flex; align-items: center; gap: .1em; }
.nav-drop__toggle {
  background: none; border: 0; color: inherit; font: inherit; line-height: 1;
  padding: .2em .25em; cursor: pointer; opacity: .65;
  transition: opacity .2s ease, transform .25s ease;
}
.nav-drop__toggle:hover,
.nav-drop__toggle:focus-visible { opacity: 1; }
.nav-drop__menu {
  position: absolute; top: calc(100% + .7em); right: 0; z-index: 60;
  min-width: 11em; display: flex; flex-direction: column; gap: .7em;
  padding: .95em 1.15em;
  /* swap these two for your theme variables if you have them */
  background: #000;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
[data-theme="light"] .nav-drop__menu { background: #fff; }
/* invisible bridge so the menu doesn't close while the mouse travels to it */
.nav-drop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.8em; height: .8em; }
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu,
.nav-drop.is-open .nav-drop__menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.nav-drop:hover .nav-drop__toggle,
.nav-drop.is-open .nav-drop__toggle { transform: rotate(180deg); opacity: 1; }
.nav-drop__menu a { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .nav-drop__menu, .nav-drop__toggle { transition: none; }
}

/* ---------- Press page ---------- */
.press-facts {
  display: grid; grid-template-columns: minmax(8em, 12em) 1fr;
  gap: .7em 1.5em; margin: 0;
}
.press-facts dt { opacity: .6; padding-top: .2em; }
.press-facts dd { margin: 0; }
@media (max-width: 560px) {
  .press-facts { grid-template-columns: 1fr; gap: .15em; }
  .press-facts dd { margin-bottom: .8em; }
}

.bio-block {
  max-width: 68ch; margin: 0 0 2.2em;
  padding-top: 1em; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.bio-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: .6em; }
.bio-block__head h3 { margin: 0; font-weight: 400; opacity: .6; }
.bio-copy {
  background: none; color: inherit; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  padding: .3em .8em; border-radius: 2em;
  transition: border-color .2s ease;
}
.bio-copy:hover, .bio-copy:focus-visible { border-color: currentColor; }
.bio-text p { margin: 0 0 .9em; }

.press-grid {
  display: grid; gap: 2.2rem 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  align-items: start;
}
.press-fig { margin: 0; }
.press-fig--wide { grid-column: span 2; }
@media (max-width: 640px) { .press-fig--wide { grid-column: auto; } }
.press-fig img,
.press-fig video { display: block; width: 100%; height: auto; background: color-mix(in srgb, currentColor 6%, transparent); }
.press-fig figcaption { margin-top: .65em; opacity: .75; line-height: 1.5; }
.press-more { margin-top: 2em; }
.press-note { max-width: 68ch; }