/* ASRM 2026 conference banner ("Slim 4" — Metal + Sunshine + Baltimore photo).
   Markup sits immediately before <header class="nav"> on each page.
   - #asrmBanner is an in-flow placeholder that reserves the banner's height, so page
     layout is the same as if the banner were a normal block.
   - .asrm-banner__bar inside it is position:fixed, so the banner stays pinned to the
     top of the viewport while scrolling.
   - The nav (fixed, see assets/site-nav.css) sits under it via
     `#asrmBanner ~ .nav{top:var(--asrm-banner-h)}`. --asrm-banner-h is set live by
     asrm-banner.js, with per-breakpoint fallbacks here. Removing the banner (dismiss
     or expiry) puts the nav back at top:0.
   - Like the nav, the bar compacts a little once the page is scrolled
     (html.nav-scrolled, set by site-nav.js) and expands again back at the top. The
     placeholder keeps the full height (--asrm-banner-full-h) so content doesn't jump.
   Rules are scoped to #asrmBanner because on some pages (team, investors, newsroom,
   privacy, terms) the nav lives inside a .hero whose `p`/`a` styles would leak in.
   To remove after the conference: delete assets/asrm-2026/ plus the <link> and the
   "ASRM 2026 banner" block in each page. The sticky nav (assets/site-nav.*) stays. */

#asrmBanner{display:block;position:relative;flex:none;width:100%;height:var(--asrm-banner-full-h,80px);
  margin:0;padding:0;}
#asrmBanner .asrm-banner__bar{position:fixed;top:0;left:0;right:0;z-index:61;box-sizing:border-box;display:flex;align-items:center;gap:24px;
  height:80px;margin:0;padding:0 20px 0 0;background:#D2E2E0;color:#053220;
  font-family:"Geologica","Helvetica Neue",Arial,sans-serif;text-align:left;
  letter-spacing:normal;text-transform:none;overflow:hidden;
  transition:height .3s ease,padding .3s ease;}
#asrmBanner ~ .nav{top:var(--asrm-banner-h,80px);}

#asrmBanner .asrm-banner__photo{flex:none;display:block;width:300px;height:80px;max-width:none;object-fit:cover;
  transition:height .3s ease;}
#asrmBanner .asrm-banner__mark{flex:none;align-self:stretch;margin-left:-24px;background:#F7C65D;
  display:flex;align-items:center;padding:0 26px;}
#asrmBanner .asrm-banner__mark svg{display:block;width:72px;height:38px;transition:width .3s ease,height .3s ease;}

#asrmBanner .asrm-banner__text{display:flex;flex-direction:column;gap:2px;min-width:0;}
#asrmBanner .asrm-banner__title,
#asrmBanner .asrm-banner__sub{margin:0;padding:0;max-width:none;color:#053220;opacity:1;
  letter-spacing:normal;text-transform:none;white-space:nowrap;}
#asrmBanner .asrm-banner__title{font-family:"Grandiflora One","Geologica",Georgia,serif;
  font-weight:400;font-size:26px;line-height:1;transition:font-size .3s ease;}
#asrmBanner .asrm-banner__booth{font-size:32px;color:#053220;-webkit-text-stroke:.9px #053220;transition:font-size .3s ease;}
#asrmBanner .asrm-banner__sub{font-family:"Geologica","Helvetica Neue",Arial,sans-serif;
  font-size:14px;font-weight:500;line-height:1.3;transition:font-size .3s ease;}
#asrmBanner .asrm-banner__sub .long{display:inline;}
#asrmBanner .asrm-banner__sub .short{display:none;}

#asrmBanner .asrm-banner__spacer{flex:1;}
#asrmBanner .asrm-banner__asrm{flex:none;display:block;height:58px;width:auto;max-width:none;transition:height .3s ease;}

#asrmBanner .asrm-banner__cta{flex:none;display:inline-flex;align-items:center;gap:10px;height:46px;
  margin:0;padding:0 24px;border:none;border-radius:999px;background:#F7C65D;color:#053220;
  font-family:"Geologica","Helvetica Neue",Arial,sans-serif;font-size:16px;font-weight:600;
  line-height:1;text-decoration:none;white-space:nowrap;opacity:1;
  transition:background .2s,height .3s ease,font-size .3s ease,padding .3s ease;}
#asrmBanner .asrm-banner__cta:hover{background:#F3B93A;color:#053220;}
#asrmBanner .asrm-banner__cta svg{flex:none;display:block;}

#asrmBanner .asrm-banner__close{flex:none;width:44px;height:44px;margin:0;border-radius:999px;border:none;
  background:transparent;color:#3D193D;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:background .2s,width .3s ease,height .3s ease;}
#asrmBanner .asrm-banner__close:hover{background:rgba(61,25,61,.08);}
#asrmBanner a:focus-visible,#asrmBanner button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(5,130,119,.45);}

#asrmBanner .asrm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Narrower desktops: shrink the photo, then drop it. */
@media (max-width:1320px){
  #asrmBanner .asrm-banner__photo{width:180px;}
}
@media (max-width:1140px){
  #asrmBanner .asrm-banner__photo{display:none;}
  #asrmBanner .asrm-banner__mark{margin-left:0;}
  #asrmBanner .asrm-banner__asrm{height:48px;}
}

/* Tablet. */
@media (max-width:980px){
  :root{--asrm-banner-h:64px;--asrm-banner-full-h:64px;}
  #asrmBanner .asrm-banner__bar{height:64px;gap:16px;padding-right:12px;}
  #asrmBanner .asrm-banner__mark{padding:0 18px;}
  #asrmBanner .asrm-banner__mark svg{width:56px;height:30px;}
  #asrmBanner .asrm-banner__title{font-size:20px;}
  #asrmBanner .asrm-banner__booth{font-size:24px;-webkit-text-stroke:.6px #053220;}
  #asrmBanner .asrm-banner__sub{font-size:12.5px;}
  #asrmBanner .asrm-banner__sub .long{display:none;}
  #asrmBanner .asrm-banner__sub .short{display:inline;}
  #asrmBanner .asrm-banner__asrm{display:none;}
  #asrmBanner .asrm-banner__cta{height:40px;padding:0 18px;font-size:14px;gap:8px;}
  #asrmBanner .asrm-banner__close{width:40px;height:40px;}
}

/* Phones: title + dismiss on the first row, dates + CTA on the second
   (CTA drops to its own row on very narrow screens). */
@media (max-width:640px){
  :root{--asrm-banner-h:98px;--asrm-banner-full-h:98px;}
  #asrmBanner .asrm-banner__bar{height:auto;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 6px 12px 16px;}
  #asrmBanner .asrm-banner__mark,#asrmBanner .asrm-banner__spacer{display:none;}
  #asrmBanner .asrm-banner__text{display:contents;}
  #asrmBanner .asrm-banner__title{order:1;flex:1 1 calc(100% - 52px);font-size:18px;white-space:normal;}
  #asrmBanner .asrm-banner__booth{font-size:21px;}
  #asrmBanner .asrm-banner__close{order:2;width:36px;height:36px;}
  #asrmBanner .asrm-banner__sub{order:3;flex:1 1 auto;margin-right:auto;font-size:12px;}
  #asrmBanner .asrm-banner__cta{order:4;height:34px;padding:0 14px;margin-right:10px;font-size:13px;}
  #asrmBanner .asrm-banner__cta svg{display:none;}
}

/* Compact state while scrolled (mirrors the nav tightening up). Kept after the
   breakpoint rules so it wins at each size. */
html.nav-scrolled #asrmBanner .asrm-banner__bar{height:62px;}
html.nav-scrolled #asrmBanner .asrm-banner__photo{height:62px;}
html.nav-scrolled #asrmBanner .asrm-banner__mark svg{width:60px;height:32px;}
html.nav-scrolled #asrmBanner .asrm-banner__title{font-size:22px;}
html.nav-scrolled #asrmBanner .asrm-banner__booth{font-size:27px;}
html.nav-scrolled #asrmBanner .asrm-banner__sub{font-size:12.5px;}
html.nav-scrolled #asrmBanner .asrm-banner__asrm{height:46px;}
html.nav-scrolled #asrmBanner .asrm-banner__cta{height:38px;font-size:15px;padding:0 20px;}
html.nav-scrolled #asrmBanner .asrm-banner__close{width:38px;height:38px;}
@media (max-width:1140px){
  html.nav-scrolled #asrmBanner .asrm-banner__asrm{height:40px;}
}
@media (max-width:980px){
  html.nav-scrolled #asrmBanner .asrm-banner__bar{height:52px;}
  html.nav-scrolled #asrmBanner .asrm-banner__mark svg{width:46px;height:24px;}
  html.nav-scrolled #asrmBanner .asrm-banner__title{font-size:17px;}
  html.nav-scrolled #asrmBanner .asrm-banner__booth{font-size:20px;}
  html.nav-scrolled #asrmBanner .asrm-banner__sub{font-size:11.5px;}
  html.nav-scrolled #asrmBanner .asrm-banner__cta{height:34px;font-size:13px;padding:0 15px;}
  html.nav-scrolled #asrmBanner .asrm-banner__close{width:34px;height:34px;}
}
@media (max-width:640px){
  html.nav-scrolled #asrmBanner .asrm-banner__bar{height:auto;padding-top:6px;padding-bottom:7px;}
  html.nav-scrolled #asrmBanner .asrm-banner__title{font-size:16px;}
  html.nav-scrolled #asrmBanner .asrm-banner__booth{font-size:18px;}
  html.nav-scrolled #asrmBanner .asrm-banner__sub{font-size:11px;}
  html.nav-scrolled #asrmBanner .asrm-banner__cta{height:30px;font-size:12.5px;padding:0 13px;}
  html.nav-scrolled #asrmBanner .asrm-banner__close{width:32px;height:32px;}
}
@media (prefers-reduced-motion:reduce){
  #asrmBanner .asrm-banner__bar,#asrmBanner .asrm-banner__bar *{transition:none !important;}
}