/* =========================================================
   BRAND MARK
   The logo lockup that replaced the word "LOGO" in the header
   and footer. Loaded last, after the mobile layer, because it
   has to out-rank the .hdr__logo / .ft__logo rules in
   style.css, p34-base.css and responsive.css.

   Those five original stylesheets still get zero edits — the
   pixel gate depends on that — so every override lives here.

   Source art: brand/logo.png, 167x74, aspect 2.257.
   That aspect is the whole constraint. The header band is
   8.9rem (89px at the 1980px reference), so the requested
   22rem width would make the mark 97px tall and overflow it.
   15rem / 66px is the largest that sits inside the band with
   real margins, and it is a slight *down*scale from native,
   so it stays crisp.
   ========================================================= */

.brand-mark{
  display: block;
  width: auto;
  height: auto;
  max-width: none;   /* style.css:47 / p34-base.css:47 set img{max-width:none}
                        already, but responsive.css overrides it below 1280px */
}


/* =========================================================
   1. DESKTOP (>=1280px)
   ========================================================= */

@media (min-width: 1280px){

  .brand-mark--hdr{ width: 15rem; }

  /* p34-base.css:99 pins the text logo at top:3.68rem. The mark is 6.6rem
     tall inside an 8.9rem band, so centre it: (8.9 - 6.6) / 2 = 1.15rem */
  .hdr__logo{ top: 1.15rem; }

  /* style.css:134 makes .hdr a flex row with align-items:center, so the
     front page centres the mark on its own — but the anchor still carries
     the text line-height, which would pad it. */
  .hdr__logo{ line-height: 0; }

  /* --- footer ---------------------------------------------------------
     p34-base.css puts .ft__logo at top:7.06rem and .ft__addr right below
     at top:10.66rem — a 3.6rem gap that only fits the old text line. A
     legible mark needs ~5.3rem, so the address moves down to clear it.
     There is room: the footer rule sits far below at top:33.2rem. */
  .brand-mark--ft{ width: 12rem; }

  .ft__logo{ line-height: 0; }
  body:not(.home) .ft__addr{ top: 13.4rem; }

  /* The front page wraps both in .ft__brand (style.css:651), which is
     ordinary flow — a taller mark just pushes the address down, so only
     the width needs setting. */
  .home .brand-mark--ft{ width: 14rem; }
}


/* =========================================================
   2. TABLET AND MOBILE (<1280px)
   ========================================================= */

@media (max-width: 1279px){

  /* responsive.css:276 makes .hdr__logo a relative flex child of the 7rem
     header bar. 13rem / 5.8rem tall leaves ~0.6rem top and bottom. */
  .brand-mark--hdr{ width: 13rem; }
  .hdr__logo{ line-height: 0; font-size: 0 !important; }

  /* responsive.css sets img{max-width:100% !important; height:auto !important}
     on every image below 1280px; the mark needs its own width to survive. */
  .brand-mark{ max-width: 100% !important; height: auto !important; }

  .brand-mark--ft{ width: 15rem; }
  .ft__logo{ line-height: 0; }

  /* the open burger panel pins the logo at top:2.75rem (responsive.css:324);
     with a 5.8rem mark that would collide with the close button, so lift it */
  .hdr.is-open .hdr__logo{ top: 1.6rem !important; }
}

@media (max-width: 767px){
  .brand-mark--hdr{ width: 12rem; }
  .brand-mark--ft{ width: 14rem; }
}