/* Free Bacchus — floating crest nav (phones only).

   The masthead plus section nav ran 362px on a phone, 45% of the first screen,
   before anyone read a word. It now lives behind a single button, which also
   replaced the scroll-gated drawer that used to sit beside it; keeping both
   would have left two nav systems and no way to tell which was live.

   Paired with /js/fb-navfab.js, which injects the button and the sheet and
   builds the menu by cloning the page header. Used by index.html,
   producers.html and verification-standard.html.

   NOTE: .htaccess caches css/js for a week. Bump the ?v= on both the <link>
   and the <script> in all three pages when editing this file, or returning
   visitors keep the old copy. */

/* Liquid glass: a lens rather than a tinted disc. The blur samples what is
   behind it and the saturation lifts it, an inset highlight along the top edge
   reads as light catching a curved surface, a darker inset along the bottom
   gives it thickness, and the drop shadow separates it from the page. */
#fb-navfab{
  display:none;position:fixed;top:68px;right:14px;z-index:120;
  width:52px;height:52px;border-radius:50%;padding:0;cursor:pointer;
  align-items:center;justify-content:center;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  /* A dark tint floor under the glass. Without it the blur carried a light
     background straight through: on the ivory article pages the copper crest
     measured 1.63:1, invisible — and this button IS the navigation on a phone.
     At .78 the worst case across every background the site uses is 3.88:1,
     clearing WCAG AA for graphics. The glass reads from the blur and the edge
     light, not from being thin. */
  background:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 46%,rgba(255,255,255,0) 70%),
             rgba(9,24,17,.78);
  -webkit-backdrop-filter:blur(14px) saturate(125%);backdrop-filter:blur(14px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -5px 10px rgba(8,22,15,.20),0 6px 16px rgba(4,12,8,.24);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.35),box-shadow .3s,border-color .3s,opacity .25s ease;
}
#fb-navfab::after{
  content:"";position:absolute;top:-32%;left:-18%;width:78%;height:62%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 60%,rgba(255,255,255,.20),transparent 70%);
}
#fb-navfab:active{transform:scale(.93);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -4px 8px rgba(8,22,15,.24),0 2px 7px rgba(4,12,8,.22)}
/* Fixed at the top-right, the crest sat over whatever scrolled through
   viewport y 68-120: at 375px that is 39px of the journal's "Wild" chip, 33px
   of "Whisky" and a third of the search box, and a tap there opened the menu
   instead of working the control. It clears out on the way down and returns on
   the way up, so it is never parked on something someone is reaching for.
   Sits after :active so it wins the transform while both apply. */
#fb-navfab.fab-away{opacity:0;pointer-events:none;transform:translateY(-16px) scale(.92)}
#fb-navfab .fab-crest{
  display:block;width:27px;height:31px;
  background:url("/images/brand-crest.png") center/contain no-repeat;
  transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.3,1.35);
}
#fb-navfab .fab-x{
  position:absolute;width:17px;height:1.5px;background:var(--copper);
  opacity:0;transform:rotate(0);transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.3,1.35);
}
#fb-navfab .fab-x::after{content:"";position:absolute;inset:0;background:var(--copper);transform:rotate(90deg)}
html.navopen #fb-navfab .fab-crest{opacity:0;transform:scale(.6)}
html.navopen #fb-navfab .fab-x{opacity:1;transform:rotate(45deg)}
html.navopen #fb-navfab{border-color:rgba(201,155,122,.5)}
#fb-navsheet{
  position:fixed;inset:0;z-index:119;overflow-y:auto;
  background:rgba(8,22,15,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:130px 28px 48px;text-align:center;
  opacity:0;pointer-events:none;transform:translateY(-10px);
  transition:opacity .3s ease,transform .3s ease;
}
html.navopen #fb-navsheet{opacity:1;pointer-events:auto;transform:none}
html.navopen{overflow:hidden}
#fb-navsheet .ns-crest{width:64px;height:64px;margin:0 auto 10px;background:url("/images/brand-crest.png") center/contain no-repeat}
#fb-navsheet .ns-mark{font-family:"Cormorant Garamond",serif;font-size:17px;letter-spacing:.3em;text-transform:uppercase;color:var(--copper);margin-bottom:30px}
/* The crest block is a link home, so it has to shed the padding and spacing
   the generic sheet-link rule below would give it, and carry the wordmark's
   bottom margin itself. */
#fb-navsheet .ns-home{padding:0;margin-bottom:30px;transition:opacity .25s ease}
#fb-navsheet .ns-home .ns-mark{margin-bottom:0}
#fb-navsheet .ns-home:hover{opacity:.82}
#fb-navsheet .ns-home:active{opacity:.7}
#fb-navsheet a{display:block;padding:13px 0;font-family:"Karla",sans-serif;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(234,228,214,.86);text-decoration:none}
#fb-navsheet a:active{color:#F3EFE7}
/* The sheet takes focus on open, so it must not paint a ring of its own.
   Links keep one for keyboard users, but via :focus-visible, so a tap never
   leaves the browser's blue box behind — and in copper when it does show. */
#fb-navsheet:focus{outline:none}
#fb-navsheet a:focus{outline:none}
#fb-navsheet a:focus-visible{outline:1px solid rgba(201,155,122,.85);outline-offset:3px}
#fb-navfab:focus{outline:none}
#fb-navfab:focus-visible{outline:1px solid rgba(201,155,122,.85);outline-offset:3px}
#fb-navsheet .ns-primary a{font-size:13.5px;color:#F3EFE7}
#fb-navsheet .ns-rule{height:1px;background:rgba(201,155,122,.22);margin:18px auto;max-width:200px}
@media (prefers-reduced-motion:reduce){#fb-navfab,#fb-navsheet,#fb-navfab span,#fb-navfab span::before,#fb-navfab span::after{transition:none}}

/* The phone gate. Every selector is qualified with html purely for weight:
   this file loads from <head>, so each page's own inline #fb-sticky{display:
   flex} comes later in the cascade and would win an even match on source
   order — which showed the old sticky bar next to the crest, the two-nav-
   systems problem this button exists to avoid. The extra element bumps these
   above anything a page declares with a bare id or type selector.
   #fb-sticky is the desktop scroll bar; the two legacy ids are the drawer
   this button replaced, listed so a page still carrying that markup cannot
   light up both systems at once. */
@media (max-width:720px){
  html header{display:none}
  html #fb-sticky{display:none}
  html #fb-burger{display:none}
  html #fb-mnav{display:none}
  html #fb-navfab{display:flex}
}