/* NL BAR (2026-10-21): the newsletter bar at the top of the page, the way Dr. Rod's site opens.
   nl-bar.js builds it and decides when it shows (once per visitor). The bar is one strip of the
   kit's off white paper (#FBFBF8) hanging from the top of the window. Its bottom edge is the About
   page's calm tear tile (pg-amc.css ABOUT PASS2 STRIP) mirrored, so the fibre rim and the soft
   shadow under it are the site's own. While it is up the nav steps down under it (--nlbar-h). */
.nlbar{position:fixed;top:0;left:0;right:0;z-index:150;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.3rem 1.1rem;
  min-height:46px;padding:.6rem calc(var(--gutter,24px) + 40px) .6rem var(--gutter,24px);
  background:#FBFBF8;color:#0B1B33;font-size:.92rem;line-height:1.35;
  transform:translateY(calc(-100% - 24px));visibility:hidden;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s linear .55s;}
.nlbar.is-up{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s;}
/* the torn bottom edge. The tile's first 7 rows are cut off (the straight top of its shadow would
   show as a grey line over the bar) and it starts 3px inside the bar, so every point of the tear
   lands just below the bar and no flat bottom shows through anywhere */
.nlbar::after{content:'';position:absolute;left:0;right:0;top:calc(100% - 3px);height:33px;pointer-events:none;
  background:url("../images/papercut/nlbar-tear.svg") 0 -7px/800px 40px repeat-x;}
.nlbar__text{margin:0;max-width:none;color:#42506B;}
.nlbar__text strong{color:#0B1B33;font-weight:600;}
.nlbar__go{position:relative;z-index:1;color:#A5202A;font-weight:600;white-space:nowrap;
  border-bottom:1px solid rgb(165 32 42 / .35);transition:color .2s ease,border-color .2s ease;}
.nlbar__go .arr{display:inline-block;transition:transform .2s ease;}
.nlbar__x{position:absolute;z-index:1;right:max(6px,calc(var(--gutter,24px) - 12px));top:50%;transform:translateY(-50%);
  width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:transparent;color:#0B1B33;font:inherit;font-size:1.35rem;line-height:1;cursor:pointer;
  transition:background-color .2s ease;}
@media (hover:hover) and (pointer:fine){
  .nlbar__go:hover{color:#8E1620;border-bottom-color:currentColor;}
  .nlbar__go:hover .arr{transform:translateX(3px);}
  .nlbar__x:hover{background:rgb(11 27 51 / .07);}
}
.nlbar :is(.nlbar__go,.nlbar__x):focus-visible{outline:2px solid #9C1B27;outline-offset:3px;}

/* the nav steps down under the bar while it is up, and back when it goes */
html.nlbar-live .nav{transition:top .55s cubic-bezier(.2,.8,.2,1);}
html.nlbar-on .nav{top:var(--nlbar-h,0px);}
/* the open phone menu covers the whole screen, so the bar steps out of its way until it closes */
html.nlbar-on:has(.nav.is-menu) .nlbar{transform:translateY(calc(-100% - 24px));}
html.nlbar-on:has(.nav.is-menu) .nav{top:0;}

@media (max-width:700px){
  .nlbar{justify-content:flex-start;font-size:.88rem;padding-right:52px;}
  .nlbar__more{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .nlbar,.nlbar.is-up,html.nlbar-live .nav{transition:none;}
}