/* ── Sitewide chrome ──────────────────────────────────────────────
   The ident and footer appear on every page. home.css carries their
   look (and the design tokens they read); this file supplies only what
   an inner page needs that the homepage does not.
   ───────────────────────────────────────────────────────────────── */

  /* Nothing on this site is meant to be scrolled sideways. Desktop and Android
     enforce that by clipping; iOS Safari is happy to let a page be dragged left
     and right if any layer briefly measures wider than the screen, and the whole
     page then sits off-centre — which is what the client is seeing on his phone.
     clip rather than hidden, because hidden here would turn the root into a
     scroll container and break sticky positioning. */
  html{overflow-x:clip;background:var(--bmp-ink)}
  @supports not (overflow:clip){
    html,body{overflow-x:hidden}
  }

  body.bmp-page{
    margin:0;background:var(--bmp-ink);color:var(--bmp-white);
    font-family:var(--bmp-body);font-size:16px;line-height:1.65;
    caret-color:var(--bmp-gold-1);-webkit-font-smoothing:antialiased;
  }
  .bmp-page,.bmp-page *{box-sizing:border-box}
  .bmp-page ::selection{background:var(--bmp-gold-2);color:#0A0A0A}
  .bmp-page :focus-visible{outline:2px solid var(--bmp-gold-1);outline-offset:3px}
  .bmp-page a{color:var(--bmp-gold-1);text-underline-offset:4px}
  .bmp-page .bmp-navlist{display:flex;gap:26px;align-items:center;flex-wrap:wrap;
    justify-content:flex-end;list-style:none;margin:0;padding:0}

  /* The ident released from the field: it flows instead of overlaying. */
  .bmp-topbar{background:var(--bmp-ink);border-bottom:1px solid var(--bmp-line)}
  .bmp-topbar .bmp-ident{position:static;width:auto;padding:22px 0;pointer-events:auto}
  /* The bar carries the same lockup the homepage does, so it is measured from
     the window rather than from the text column. Left inside .bmp-wrap it
     stops at the 1220px content width, which puts the logo 150px further in
     than on the homepage and the last nav link 150px short of it — the header
     visibly moves when you follow a link off the front page. The gutter is
     kept, so the lockup still lands on the same 52px margin as the homepage. */
  .bmp-topbar .bmp-wrap{max-width:none}

  @media (max-width:600px){
    .bmp-topbar .bmp-ident{flex-direction:column;gap:14px}
    .bmp-js .bmp-topbar .bmp-ident{flex-direction:row;align-items:center;gap:16px}
    .bmp-page .bmp-navlist{justify-content:flex-start;gap:12px 20px}
  }

  /* ── The footer ───────────────────────────────────────────
     Four columns on a desk, two on a tablet, one on a phone. The brand
     column gets half again the room because it carries the mark and a
     sentence; the other three are lists and need only their longest item.

     These live here rather than in home.css because the footer is on every
     page and the old rules were scoped to .bmp-home. chrome.css loads after
     home.css, so .bmp-foot-col a beats .bmp-page a on equal specificity and
     the links stay muted until they are hovered.
     ─────────────────────────────────────────────────── */
  .bmp-footer{border-top:1px solid var(--bmp-line);
    background:linear-gradient(180deg,rgba(200,149,47,.035),transparent 46%)}
  .bmp-foot{display:grid;gap:clamp(28px,4vw,54px);
    grid-template-columns:1.5fr .85fr .85fr 1.3fr;
    padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(36px,4.4vw,58px)}

  .bmp-foot-brand .bmp-lock img{display:block;height:34px;width:auto}
  .bmp-foot-brand p{margin:18px 0 22px;max-width:34ch;
    font-family:var(--bmp-body);font-size:14px;line-height:1.62;color:var(--bmp-muted)}
  .bmp-foot-cta{font-size:12px;padding:11px 20px}

  .bmp-foot-col h2{margin:0 0 14px;font-family:var(--bmp-display);font-weight:700;
    font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bmp-muted-2)}
  .bmp-foot-col ul{list-style:none;margin:0;padding:0}
  /* Padded rather than bare: as inline text these were 14px tall, which is a
     thumb-sized miss on a phone. */
  .bmp-foot-col a{display:inline-block;padding:7px 0;font-size:14px;
    color:var(--bmp-muted);text-decoration:none;
    transition:color .2s var(--bmp-ease)}
  .bmp-foot-col a:hover,.bmp-foot-col a:focus-visible{color:var(--bmp-gold-1)}

  /* The accounts. The mark sits in a column of its own spanning both lines, so
     the handles align with each other rather than with the glyphs, and the
     network is readable before the handle is. */
  .bmp-foot-follow a{display:grid;grid-template-columns:auto 1fr;
    column-gap:11px;align-items:center;padding:9px 0}
  .bmp-foot-icon{display:flex;width:19px;height:19px;grid-row:span 2;
    color:var(--bmp-gold-1)}
  .bmp-foot-icon svg{width:100%;height:100%}
  /* @businessmediaplatform is 22 characters. In an even quarter-column it broke
     after "platfor", which reads as a typo rather than a wrap — so the Follow
     column is given the width the longest handle needs and the handle is never
     broken inside itself. */
  .bmp-foot-at{font-family:var(--bmp-display);font-weight:600;font-size:13px;
    color:var(--bmp-muted);
    transition:color .2s var(--bmp-ease)}
  .bmp-foot-note{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--bmp-muted-2)}
  .bmp-foot-follow a:hover .bmp-foot-at,
  .bmp-foot-follow a:focus-visible .bmp-foot-at{color:var(--bmp-gold-1)}

  .bmp-foot-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
    align-items:center;padding-top:20px;padding-bottom:26px;
    border-top:1px solid var(--bmp-line);font-size:12px;color:var(--bmp-muted-2)}
  .bmp-foot-strap{font-family:var(--bmp-display);font-weight:700;font-size:10px;
    letter-spacing:.26em;text-transform:uppercase}

  @media (max-width:900px){
    .bmp-foot{grid-template-columns:repeat(3,1fr)}
    .bmp-foot-brand{grid-column:1/-1}
  }
  @media (max-width:560px){
    .bmp-foot{grid-template-columns:1fr;gap:32px}
    .bmp-foot-brand p{max-width:none}
  }