/*
 * Cross-width design tweaks on top of the generated markup.
 *
 * Hand-maintained — NOT regenerated by tools/port-from-design.py, which emits
 * the <link> that loads it LAST (after styles.css and responsive.css) so these
 * rules win. Unlike responsive.css, the rules here apply at every width.
 *
 * These target the design source's inline styles, so they need !important and
 * structural selectors (the elements carry no classes of their own).
 */

/* ---------- ABOUT — "WHO WE ARE" header row ---------- */

/* The generated row is `align-items: end`, which drops the small mono label to
   the bottom of the tall paragraph — so the heading on the left and the
   paragraph on the right sit at different heights and read as unrelated. Align
   both to the top instead. */
#about > div > div:first-child {
  align-items: start !important;
}

/* Highlight the eyebrow so it actually reads as a heading: brand-yellow marker
   behind ink text, hugging the label rather than filling the column. */
#about > div > div:first-child > p:first-child {
  color: #14110f !important;
  background: #f2e400;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.24em !important;
  padding: 9px 13px !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  justify-self: start;
  align-self: start;
  line-height: 1 !important;
}

/* Let the intro paragraph settle to the same top line and keep it comfortably
   readable next to the highlighted heading. */
#about > div > div:first-child > p:last-child {
  align-self: start;
  margin-top: 2px !important;
}

/* ---------- MOBILE MENU — visible close (×) ---------- */

/* wireMobileNav() rotates the burger into an X and sets aria-label="Close menu"
   when open, but the bars are dark ink (#14110f) sitting on the dark menu
   (#141210), so the X is invisible. Make the bars light while the menu is open.
   Only the burger turns into an X on touch widths, so this is inert elsewhere. */
[data-burger][aria-label="Close menu"] [data-burger-line] {
  background: #f2efe6 !important;
}