/* ===========================================================
   BLACK BORDER — Design Kit
   Add these class names to Elementor Sections/Containers and
   Widgets via "Advanced > CSS Classes". See the build guide
   for exactly which class goes where.
=========================================================== */

:root{
  --bb-ink:#12161a;
  --bb-ink-2:#1b2126;
  --bb-olive:#5c6349;
  --bb-olive-dark:#3d4234;
  --bb-paper:#e9e2cb;
  --bb-paper-dim:#d8cfae;
  --bb-red:#a92a26;
  --bb-red-bright:#c9342f;
  --bb-amber:#dfa23c;
  --bb-blue:#28394a;
  --bb-line: rgba(233,226,203,0.16);
}

/* Base type, applied only within elements carrying bb- classes so the
   rest of your site is untouched. */
.bb-display{ font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:0.01em; font-weight:400; }
.bb-mono{ font-family:'Courier Prime', monospace; }
.bb-body-text{ font-family:'Archivo Narrow', sans-serif; color:var(--bb-paper-dim); font-size:17.5px; }

/* Section backgrounds */
.bb-dark-section{ background:var(--bb-ink); color:var(--bb-paper); }
.bb-dark-section-alt{ background:var(--bb-ink-2); color:var(--bb-paper); border-top:1px solid var(--bb-line); border-bottom:1px solid var(--bb-line); }

/* ---------- HERO ---------- */
.bb-hero{
  background:
    linear-gradient(180deg, rgba(18,22,26,0.35) 0%, rgba(18,22,26,0.55) 45%, rgba(18,22,26,0.97) 96%),
    var(--bb-hero-bg, none);
  background-size:cover;
  background-position:center 30%;
  box-shadow: inset 0 0 180px 40px rgba(0,0,0,0.75);
  min-height:90vh;
  display:flex !important;
  align-items:flex-end !important;
}
.bb-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Courier Prime', monospace;
  font-size:12.5px; letter-spacing:0.18em;
  color:var(--bb-amber);
  border:1px solid rgba(223,162,60,0.45);
  padding:5px 12px;
}
.bb-eyebrow::before{ content:"\25CF"; color:var(--bb-red-bright); font-size:9px; margin-right:4px; }
.bb-h1{
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:clamp(52px, 9vw, 110px);
  line-height:0.92;
  color:var(--bb-paper);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.bb-h1 .accent{ color:var(--bb-red-bright); }
.bb-hero-sub{ color:var(--bb-paper-dim); font-size:18px; max-width:520px; }

/* ---------- BUTTONS ---------- */
.bb-stamp-btn{
  position:relative;
  display:inline-block;
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:18px;
  color:var(--bb-paper) !important;
  background:var(--bb-red);
  padding:16px 34px;
  border:2px solid var(--bb-paper);
  cursor:pointer;
  transition: transform 0.12s ease;
  text-decoration:none !important;
}
.bb-stamp-btn:hover{ transform: translateY(-2px) rotate(-0.6deg); color:var(--bb-paper) !important; }
.bb-stamp-btn .bb-stampmark{
  position:absolute; top:-14px; right:-16px;
  font-family:'Courier Prime', monospace;
  font-size:11px; letter-spacing:0.05em;
  color:var(--bb-amber);
  background:var(--bb-ink);
  border:1px solid var(--bb-amber);
  padding:2px 7px;
  transform:rotate(9deg);
  opacity:0; transition:opacity 0.2s ease;
}
.bb-stamp-btn:hover .bb-stampmark{ opacity:1; }

.bb-ghost-btn{
  font-family:'Courier Prime', monospace;
  font-size:14px; letter-spacing:0.08em;
  color:var(--bb-paper-dim) !important;
  border-bottom:1px solid var(--bb-paper-dim);
  padding-bottom:3px;
  text-decoration:none !important;
}
.bb-ghost-btn:hover{ color:var(--bb-paper) !important; border-color:var(--bb-paper); }

.bb-dl-btn{
  font-family:'Courier Prime', monospace;
  font-size:12.5px; letter-spacing:0.05em;
  color:var(--bb-ink) !important;
  background:var(--bb-amber);
  padding:9px 14px;
  border:1px solid var(--bb-amber);
  display:inline-block;
  text-decoration:none !important;
  transition:all .15s ease;
}
.bb-dl-btn:hover{ background:var(--bb-red); border-color:var(--bb-red); color:var(--bb-paper) !important; }
.bb-dl-btn.ghost{ background:transparent; color:var(--bb-paper-dim) !important; border-color:var(--bb-line); }

.bb-plat-btn{
  font-family:'Courier Prime', monospace;
  font-size:14px; letter-spacing:0.06em;
  border:1px solid var(--bb-line);
  color:var(--bb-paper-dim) !important;
  padding:12px 22px;
  display:inline-block;
  text-decoration:none !important;
}
.bb-plat-btn:hover{ border-color:var(--bb-paper); color:var(--bb-paper) !important; }

/* ---------- SECTION LABEL / EYEBROW ROW ---------- */
.bb-sec-label{
  font-family:'Courier Prime', monospace;
  font-size:13px; letter-spacing:0.18em;
  color:var(--bb-amber);
}

/* ---------- DOSSIER TAB RAIL (fixed nav) ---------- */
.bb-rail{
  position:fixed; top:0; left:0; height:100vh; z-index:100;
  display:flex; flex-direction:column; justify-content:center;
  gap:2px;
}
.bb-rail a{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background:var(--bb-olive-dark);
  color:var(--bb-paper-dim);
  font-family:'Courier Prime', monospace;
  font-size:12.5px;
  letter-spacing:0.14em;
  padding:22px 9px 22px 11px;
  border-right:2px solid var(--bb-ink);
  border-bottom:1px solid rgba(0,0,0,0.35);
  clip-path: polygon(0 0, 100% 10px, 100% calc(100% - 10px), 0 100%);
  transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
  cursor:pointer;
  text-decoration:none;
  display:block;
}
.bb-rail a:hover, .bb-rail a.bb-active{
  background:var(--bb-red);
  color:var(--bb-paper);
  padding-left:16px;
}
@media (max-width:760px){ .bb-rail{ display:none; } }

/* ---------- OFFICER / MEDIA CARD ---------- */
.bb-officer-card{ background:var(--bb-ink-2); border:1px solid var(--bb-line); padding:14px; }
.bb-officer-card img{ filter: sepia(0.15) contrast(1.05); width:100%; }
.bb-caption{ font-family:'Courier Prime', monospace; font-size:11.5px; color:var(--bb-paper-dim); padding-top:10px; border-top:1px dashed var(--bb-line); margin-top:10px; }

/* ---------- REGULATION ROWS ---------- */
.bb-reg-row{ border-top:1px solid var(--bb-line); padding:30px 0; }
.bb-reg-row:last-of-type{ border-bottom:1px solid var(--bb-line); }
.bb-reg-num{ font-family:'Courier Prime', monospace; font-size:14px; color:var(--bb-amber); letter-spacing:0.08em; }
.bb-reg-title{ font-family:'Anton', sans-serif; text-transform:uppercase; font-size:26px; color:var(--bb-paper); }

/* ---------- POST / GAME CARD ---------- */
.bb-post-card{ background:var(--bb-ink-2); border:1px solid var(--bb-line); transition:border-color .2s ease, transform .2s ease; }
.bb-post-card:hover{ border-color:var(--bb-olive); transform:translateY(-4px); }
.bb-post-tag{
  font-family:'Courier Prime', monospace; font-size:10.5px; letter-spacing:0.1em;
  background:rgba(18,22,26,0.85); border:1px solid var(--bb-amber); color:var(--bb-amber) !important;
  padding:3px 8px; display:inline-block;
}
.bb-post-title{ font-family:'Anton', sans-serif; text-transform:uppercase; font-size:23px; color:var(--bb-paper); }

/* ---------- FIELD REPORT FRAME ---------- */
.bb-field-frame{ background:var(--bb-ink-2); border:1px solid var(--bb-line); padding:10px; }
.bb-field-cap{ text-align:center; margin-top:18px; color:var(--bb-paper-dim); font-family:'Courier Prime', monospace; font-size:13px; }

/* ---------- FOOTER ---------- */
.bb-footer{ border-top:1px solid var(--bb-line); background:var(--bb-ink); color:var(--bb-paper); }
.bb-foot-logo{ font-family:'Anton',sans-serif; font-size:22px; text-transform:uppercase; }
.bb-foot-logo .accent{ color:var(--bb-red-bright); }
.bb-footer a{ font-family:'Courier Prime',monospace; font-size:13px; color:var(--bb-paper-dim) !important; text-decoration:none !important; }
.bb-footer a:hover{ color:var(--bb-paper) !important; }

/* ---------- REVEAL ON SCROLL ---------- */
.bb-reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; }
.bb-reveal.bb-in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .bb-reveal{ opacity:1; transform:none; transition:none; }
}