/* Bebop site — production overrides on top of the design-canvas styles.
   Makes the fixed-width artboards (.mob 390 / .mob.desk 1440) responsive,
   and turns the mega-menu artboard into a real fixed drawer overlay. */

.bebop-root {
  background: var(--bb-paper, #f2f0e8);
  min-height: 100vh;
}

/* ---- responsive toggle: mobile tree < 980px, desktop tree >= 980px ---- */
.bebop-view--mobile { display: flex; justify-content: center; }
.bebop-view--desktop { display: none; }

@media (min-width: 980px) {
  .bebop-view--mobile { display: none; }
  .bebop-view--desktop { display: flex; justify-content: center; }
}

/* ---- fluid mobile frame (was fixed 390px) ---- */
.bebop-view--mobile .mob {
  width: 100%;
  max-width: 430px;
  overflow: visible;
}

/* ---- desktop frame: allow sticky header + normal page scroll ---- */
.bebop-view--desktop .mob.desk {
  overflow: visible;
}

/* ---- mega-menu as a real drawer overlay ---- */
.bebop-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  background: rgba(10, 14, 16, 0.45);
  display: flex;
  justify-content: center;
}
.bebop-menu-overlay > div {
  width: 100%;
  max-width: 430px;
}
.bebop-menu-overlay .mega {
  width: 100%;
  min-height: 100vh;
}

/* ---- About page desktop reflow (about.css is mobile-only) ---- */
.desk .aboutpg { width: 100%; --apad: max(40px, calc((100% - 1100px) / 2)); }
.desk .aboutpg > section { padding-inline: var(--apad) !important; }
.desk .aboutpg .ap-hero h1 { font-size: 52px; line-height: 1.0; max-width: 880px; }
.desk .aboutpg .ap-hero .lede { font-size: 19px; max-width: 720px; }
.desk .aboutpg .ap-hero .meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.desk .aboutpg .ap-manifesto h2,
.desk .aboutpg .ap-principles h2,
.desk .aboutpg .ap-numbers h2,
.desk .aboutpg .ap-diff h2 { font-size: 36px; max-width: 820px; }
.desk .aboutpg .ap-founder .frame { max-width: 520px; }
.desk .aboutpg .ap-founder .cred { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.desk .aboutpg .ap-principles .rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
.desk .aboutpg .ap-numbers .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.desk .aboutpg .ap-diff .pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.desk .aboutpg .ap-cta h2 { font-size: 44px; }