/* Tramps — Black Friday takes over November (3.15.276).
   On every page while it runs (inc/class-tramps-bf.php): the bar above the header, the tile in the
   product grids, the band on the home page, the badge on product pages, the menu item.
   Black and brass; on Black Friday (to the end of Cyber Monday) the brass leads. */

/* ---- the bar ---- */
.bfbar{position:relative;z-index:91;display:grid;background:var(--ink,#0B0B0B);color:#F4F1EA}
.bfbar--extra{background:var(--acc-lift,#CDB58A);color:var(--ink,#0B0B0B)}
.bfb-slide{grid-area:1/1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 16px;min-height:40px;padding:8px 16px;
  color:inherit;text-decoration:none;font:600 .75rem/1.35 var(--sans);letter-spacing:.08em;text-align:center;
  transition:opacity .5s var(--ease,ease),transform .5s var(--ease,ease),visibility .5s}
.bfb-slide:hover,.bfb-slide:focus-visible{color:inherit}
.bfbar[data-bf-turns] .bfb-slide:not(.is-on){opacity:0;transform:translateY(6px);visibility:hidden;pointer-events:none}
.bfb-slide i{font:italic 400 .9rem/1 var(--serif);letter-spacing:0;color:var(--acc-lift,#CDB58A)}
.bfbar--extra .bfb-slide{font-weight:700}
.bfbar--extra .bfb-slide b{font-weight:800}
.bfbar--reveal .bfb-slide b{font-weight:800;color:var(--acc-lift,#CDB58A)}
.bfb-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--acc-lift,#CDB58A)}
.bfbar--extra .bfb-dot{background:var(--ink,#0B0B0B)}
.bfb-sep{color:#8E8B85}
.bfbar--extra .bfb-sep{color:inherit;opacity:.55}
.bfb-go{text-decoration:underline;text-underline-offset:3px}
.bfb-p{display:none}
@media (max-width:760px){
  .bfb-d{display:none}
  .bfb-p{display:inline}
  .bfb-slide{gap:4px 9px;padding:9px 14px;font-size:.72rem;letter-spacing:.03em}
}
@media (prefers-reduced-motion:reduce){.bfb-slide{transition:none}}

/* ---- the menu ---- */
.dock .dk-bf{display:inline-flex;align-items:center;gap:8px}
.dock .dk-bf::before,.mnav .mn-bf::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--brass,#B08D57)}
.mnav .mn-bf{display:flex;align-items:center;gap:10px}
/* room for it on one row: on smaller computers The Vault and Journal step out of the row (they stay in the menu) */
@media (max-width:1300px){.bf-on .dock li:has(> a[href*="/the-vault"]),.bf-on .dock li:has(> a[href*="/journal"]){display:none}}
.bf-extra .dock .dk-bf::before,.bf-extra .mnav .mn-bf::before{background:var(--acc-lift,#CDB58A);box-shadow:0 0 0 3px rgba(205,181,138,.28)}

/* ---- the tile in the grids: one place, as tall as the pieces beside it ---- */
.gtile.bft{display:flex;min-width:0}
.bft-in{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:100%;
  padding:clamp(18px,1.8vw,26px) clamp(16px,1.5vw,22px);border-radius:var(--r,14px);background:var(--ink,#0B0B0B);color:#F4F1EA;
  text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .25s var(--ease,ease),box-shadow .25s}
.bft-in::after{content:"";position:absolute;inset:auto -30% -40% auto;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(205,181,138,.22),rgba(205,181,138,0));z-index:-1}
.bft-in:hover{color:#F4F1EA;transform:translateY(-3px);box-shadow:0 24px 44px -26px rgba(0,0,0,.6)}
.bft-seal{width:clamp(64px,5.6vw,86px);height:auto;transform:rotate(-10deg)}
.bft-cap{display:flex;flex-direction:column;gap:10px}
.bft-t{font:400 clamp(1.2rem,1.75vw,1.65rem)/1.12 var(--serif)}
.bft-t em{color:var(--acc-lift,#CDB58A)}
.bft-s{font-size:.82rem;line-height:1.5;color:#D9D4CA}
.bft-go{font:800 .66rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-lift,#CDB58A)}
.bft-in:hover .bft-go{text-decoration:underline;text-underline-offset:4px}
.bft--extra .bft-in{background:var(--acc-lift,#CDB58A);color:var(--ink,#0B0B0B)}
.bft--extra .bft-in:hover{color:var(--ink,#0B0B0B)}
.bft--extra .bft-in::after{background:radial-gradient(closest-side,rgba(255,255,255,.35),rgba(255,255,255,0))}
.bft--extra .bft-t em,.bft--extra .bft-go{color:var(--ink,#0B0B0B)}
.bft--extra .bft-s{color:#3B342A}
.bft--extra .bft-seal{transform:rotate(8deg)}
@media (max-width:560px){
  .bft-in{gap:12px;padding:16px 14px}
  .bft-t{font-size:1.12rem}
  .bft-s{display:none}
}

/* ---- the band on the home page ---- */
.bfband-in{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:clamp(360px,30vw,440px);border-radius:var(--r-lg,26px);overflow:hidden;background:var(--ink,#0B0B0B);color:#F4F1EA;isolation:isolate}
.bfband-ph{position:relative;margin:0;min-height:100%;background-size:cover;background-repeat:no-repeat}
.bfband-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#0B0B0B 0%,rgba(11,11,11,0) 42%)}
.bfband-c{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;padding:clamp(28px,4vw,56px)}
.bfband-k{font:700 .7rem/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--acc-lift,#CDB58A)}
.bfband h2{margin:0;font:400 clamp(2rem,3.7vw,3.35rem)/1.03 var(--serif);letter-spacing:-.01em;color:#F4F1EA}
.bfband h2 em{color:var(--acc-lift,#CDB58A)}
.bfband p{margin:0;max-width:460px;font-size:1rem;line-height:1.6;color:#D9D4CA}
.bfband-chips{display:flex;flex-wrap:wrap;gap:10px}
.bfband-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(244,241,234,.35);color:#F4F1EA;font:600 .82rem/1 var(--sans);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.bfband-chips a:hover{background:#F4F1EA;border-color:#F4F1EA;color:var(--ink,#0B0B0B)}
.bfband-go{display:inline-flex;align-items:center;min-height:50px;margin-top:4px;padding:0 28px;border-radius:999px;background:var(--acc-lift,#CDB58A);color:var(--ink,#0B0B0B);font:800 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:transform .2s var(--ease,ease),box-shadow .2s}
.bfband-go:hover{color:var(--ink,#0B0B0B);transform:translateY(-2px);box-shadow:0 18px 36px -18px rgba(205,181,138,.7)}
.bfband--extra .bfband-in{background:#14120F}
.bfband--extra h2{color:var(--acc-lift,#CDB58A)}
.bfband--extra h2 em{color:#F4F1EA}
@media (max-width:760px){
  .bfband-in{grid-template-columns:1fr;min-height:0}
  .bfband-ph{min-height:220px}
  .bfband-ph::after{background:linear-gradient(0deg,#0B0B0B 0%,rgba(11,11,11,0) 55%)}
  .bfband-c{padding:6px 22px 26px;gap:14px}
  .bfband-chips a{min-height:42px;padding:0 15px}
  .bfband-go{align-self:stretch;justify-content:center}
}

/* ---- the badge on a product page ---- */
.bfbadge{display:inline-flex;align-items:center;gap:10px;margin:12px 0 2px;padding:9px 15px;border-radius:999px;background:var(--ink,#0B0B0B);color:#F4F1EA;font:600 .75rem/1.25 var(--sans);text-decoration:none;transition:transform .2s var(--ease,ease)}
.bfbadge:hover{color:#F4F1EA;transform:translateY(-1px)}
.bfbadge i{font:italic 400 .84rem/1 var(--serif);color:var(--acc-lift,#CDB58A)}
.bfbadge--extra{background:var(--acc-lift,#CDB58A);color:var(--ink,#0B0B0B);font-weight:700}
.bfbadge--extra:hover{color:var(--ink,#0B0B0B)}
.bfbadge--extra .bfb-dot{background:var(--ink,#0B0B0B)}