/* ------------------------------------------------------------------
   The bar that comes back when you scroll up. It is not in the Figma
   file: at the top of a page the page's own header is the header, and
   this only appears once you are deep enough that the header is gone.
   ------------------------------------------------------------------ */
#topbar{position:fixed;left:0;top:0;width:100%;height:68px;z-index:140;
  background:#FFFAD8;color:#2D120D;transform:translateY(-100%);
  transition:transform .42s cubic-bezier(.22,.61,.36,1);will-change:transform}
#topbar.on{transform:none}
#topbar .tin,#pagebar .tin{position:absolute;left:40px;right:40px;top:21px;height:21px;
  display:flex;align-items:flex-start;justify-content:space-between}
#topbar .tlogo,#pagebar .tlogo{margin-top:-3px;font-size:20px;line-height:25px;font-weight:700;
  font-style:italic;letter-spacing:.01em;text-transform:uppercase;color:#2D120D}
#topbar nav,#pagebar nav{display:flex;gap:10px}
#topbar nav a,#topbar nav button,#pagebar nav a,#pagebar nav button{display:inline-flex;align-items:center;justify-content:center;
  padding:2px 8px;font-size:14px;font-weight:400;line-height:17px;letter-spacing:-.01em;
  text-transform:uppercase;white-space:nowrap;color:#2D120D;background:none;border:0;
  font-family:inherit;cursor:pointer;
  transition:background .2s cubic-bezier(.22,.61,.36,1),color .2s cubic-bezier(.22,.61,.36,1)}
/* every item in the bar is the same box: the label with 8px either side */
#topbar nav a:hover,#pagebar nav a:hover{background:#2D120D;color:#CDE3E8}
#pagebar.onink nav a:hover{background:#CDE3E8;color:#2D120D}
#topbar nav .mail,#pagebar nav .mail{background:#2D120D;color:#CDE3E8}
#topbar nav .mail:hover,#pagebar nav .mail:hover{background:#2D120D;color:#CDE3E8}

/* The bar at the top of every page. Same height, same insets and the
   same type as the bar that comes back on scroll up, so the two are one
   bar: this one sits on the page and leaves with it. */
#pagebar{position:absolute;left:0;top:0;width:100%;height:68px;z-index:130;pointer-events:none}
#pagebar .tin{pointer-events:auto}
/* on the wine of the landing */
#pagebar.onwine .tlogo,#pagebar.onwine nav a{color:#CDE3E8}
#pagebar.onwine nav .mail{background:#CDE3E8;color:#2D120D}
#pagebar.onwine nav .mail:hover{background:#2D120D;color:#CDE3E8}
#pagebar.onink .tlogo,#pagebar.onink nav a{color:#CDE3E8}
@media (max-width:979px){ #topbar,#pagebar{display:none} }

/* copied: the chip turns green for a moment */
.sw.ok,#topbar nav .sw.ok,#pagebar nav .sw.ok{background:#2D120D !important;color:#CDE3E8 !important}

/* palette: coffee bean, lemon chiffon, botticelli. The big dark surfaces are
   coffee bean with botticelli type; the small tags are botticelli with dark type */
.chip--num,.num,.row .nm,.mnote .n,.mrow .n,.mnum,.wnum{background:#CDE3E8 !important;color:#2D120D !important}
.flag.base i,.flag.base b,.flag.base::after{background:#CDE3E8 !important;color:#2D120D !important}
.chip.wine,.mchip[style*="var(--wine)"]{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta:hover{background:#FFFAD8 !important;color:#2D120D !important}
.mhero .mcta{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav a:hover{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav .mail:hover{background:#FFFAD8 !important;color:#2D120D !important}