/* The Butcher : visitor popups.
   Brand first. A popup is still a piece of the brand, so it uses the same
   grounds, the same type and the same restraint as the menu. */

.tb-pop{
  position:fixed;inset:0;z-index:9000;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(14,12,12,.58);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .26s ease;
  font-family:'Plex','PlexAr',system-ui,sans-serif;
}
.tb-pop.tb-in{opacity:1}

.tb-pop-panel{
  position:relative;width:min(430px,100%);padding:38px 34px 32px;
  text-align:center;transform:translateY(14px) scale(.985);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
  max-height:88vh;overflow:auto;
}
.tb-pop.tb-in .tb-pop-panel{transform:none}

/* grounds, the same three the site uses */
.tb-dark  .tb-pop-panel{background:#0E0C0C url('marbling_black.jpg') center/cover;color:#EBE1D7}
.tb-maroon .tb-pop-panel{background:#521617 url('marbling_maroon.jpg') center/cover;color:#EBE1D7}
.tb-paper .tb-pop-panel{background:#F9F7F5 url('paper.jpg') center/cover;color:#521617}

/* corner and bar layouts, for something less interrupting than a modal */
.tb-corner{align-items:flex-end;justify-content:flex-end;background:none;
  backdrop-filter:none;pointer-events:none;padding:22px}
.tb-corner .tb-pop-panel{width:min(348px,100%);padding:26px 24px 24px;text-align:start;
  pointer-events:auto;box-shadow:0 12px 44px rgba(14,12,12,.34)}
.tb-bar{align-items:flex-end;background:none;backdrop-filter:none;
  pointer-events:none;padding:0}
.tb-bar .tb-pop-panel{width:100%;max-width:none;padding:18px 26px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  transform:translateY(100%);pointer-events:auto}
.tb-bar.tb-in .tb-pop-panel{transform:none}
.tb-bar .tb-pop-actions{margin-top:0}
.tb-bar .tb-pop-title{font-size:17px}
.tb-bar .tb-pop-body{margin:0;max-width:52ch}

.tb-pop-x{
  position:absolute;top:10px;inset-inline-end:12px;
  background:none;border:0;color:inherit;opacity:.5;cursor:pointer;
  font-size:24px;line-height:1;padding:6px 8px;font-family:inherit;
}
.tb-pop-x:hover{opacity:1}

.tb-pop-img{width:100%;height:132px;object-fit:cover;margin-bottom:20px}
.tb-pop-qr{width:118px;margin:18px auto 0;padding:9px;background:#fff}

.tb-pop-kick{
  font-size:9.5px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;
  opacity:.72;margin-bottom:13px;
}
.tb-pop-title{
  font-family:'Serif',Georgia,serif;font-weight:400;font-size:26px;
  line-height:1.2;margin:0 0 12px;
}
.tb-pop-body{font-size:14.5px;line-height:1.62;opacity:.86;margin:0}

.tb-pop-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.tb-bar .tb-pop-actions{margin-top:0}

.tb-pop-cta,.tb-pop-sec{
  font-family:inherit;cursor:pointer;border:1px solid currentColor;background:transparent;
  color:inherit;padding:13px 26px;font-size:10.5px;letter-spacing:.24em;
  text-indent:.24em;text-transform:uppercase;transition:background .22s,color .22s;
}
.tb-dark .tb-pop-cta,.tb-maroon .tb-pop-cta{background:#EBE1D7;color:#521617;border-color:#EBE1D7}
.tb-dark .tb-pop-cta:hover,.tb-maroon .tb-pop-cta:hover{background:transparent;color:#EBE1D7}
.tb-paper .tb-pop-cta{background:#521617;color:#EBE1D7;border-color:#521617}
.tb-paper .tb-pop-cta:hover{background:transparent;color:#521617}
.tb-pop-sec{opacity:.62;border-color:transparent;text-decoration:underline;
  text-underline-offset:4px;padding-inline:10px}
.tb-pop-sec:hover{opacity:1}

/* Arabic: right to left, and the type needs its own size and leading */
.tb-rtl .tb-pop-panel{direction:rtl}
.tb-rtl .tb-pop-kick{letter-spacing:0;text-indent:0;text-transform:none;font-size:12.5px}
.tb-rtl .tb-pop-title{font-family:'PlexAr';font-weight:500;line-height:1.4;font-size:23px}
.tb-rtl .tb-pop-body{font-family:'PlexAr'}
.tb-rtl .tb-pop-cta,.tb-rtl .tb-pop-sec{font-family:'PlexAr';letter-spacing:0;
  text-indent:0;text-transform:none;font-size:13.5px}

@media (max-width:520px){
  .tb-pop{padding:14px}
  .tb-pop-panel{padding:32px 24px 26px}
  .tb-pop-title{font-size:22px}
  .tb-corner{align-items:flex-end;justify-content:center;padding:14px}
  .tb-corner .tb-pop-panel{width:100%}
  .tb-bar .tb-pop-panel{flex-direction:column;gap:14px;padding:18px}
}

/* Someone who has asked their system to reduce motion gets no slide or fade. */
@media (prefers-reduced-motion:reduce){
  .tb-pop,.tb-pop-panel{transition:none}
  .tb-pop-panel{transform:none}
}