/* ===========================================================================
   THE FRAME - Bright Blade LLC chrome. Constant on every page, every line.
   ---------------------------------------------------------------------------
   THE GOVERNING RULE: the parent supplies the FRAME, the line supplies the
   VOICE. Everything in this file is the frame. Nothing in this file belongs
   to a product line, and no line's palette or typeface may be added here.

   The test: cover the header and footer and you should not be able to tell
   two line pages came from the same company. They are supposed to look like
   strangers.

   ⚠ If you find yourself adding a colour here to make one page look right,
   that colour belongs in that page, not in the frame.
   =========================================================================== */

:root{
  --bb-black:#0B0D0E;
  --bb-black-2:#191E21;
  --bb-white:#FFFFFF;
  --bb-dim:rgba(255,255,255,.52);
  --bb-dimmer:rgba(255,255,255,.34);
  --bb-line:rgba(255,255,255,.14);
  --bb-chrome:Archivo,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
              Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* --- header ---------------------------------------------------------- */
.bb-head{
  background:var(--bb-black);
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px clamp(18px,4vw,32px);
}
.bb-brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.bb-brand img{height:30px;width:auto;display:block}
.bb-word{
  font-family:var(--bb-chrome);color:var(--bb-white);line-height:1;
  font-size:.8125rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
}
.bb-word span{
  display:block;font-size:.625rem;letter-spacing:.34em;
  color:var(--bb-dim);margin-top:3px;
}
.bb-head nav{display:flex;gap:22px;flex-wrap:wrap}
.bb-head nav a{
  font-family:var(--bb-chrome);font-size:.6875rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--bb-dim);text-decoration:none;
}
.bb-head nav a:hover,.bb-head nav a[aria-current="page"]{color:var(--bb-white)}

/* --- footer ---------------------------------------------------------- */
.bb-foot{
  background:var(--bb-black);color:var(--bb-dim);
  padding:34px clamp(18px,4vw,32px) 30px;
  font-family:var(--bb-chrome);
}
.bb-foot-in{
  max-width:900px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;
  align-items:flex-start;
}
.bb-foot img{height:44px;width:auto;display:block;margin-bottom:10px}
.bb-foot .nm{
  color:var(--bb-white);font-size:.75rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
}
/* The footer copy sets its own line breaks with <br>, so the measure only
   needs to be wide enough not to fight them. ⚠ The footer TEXT is duplicated
   in every page: a static site cannot include markup. Change one, change all. */
.bb-foot p{margin:8px 0 0;font-size:.75rem;line-height:1.65;max-width:62ch}
.bb-foot a{color:var(--bb-dim)}

/* --- focus ----------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid #F2CE3E;outline-offset:3px;border-radius:2px;
}