/* Bracket spread button. CSS only. A plain label with four 1px corner brackets sitting on its corners; on hover the
   brackets spread out diagonally (8px each way) while the button fills, all on one .3s ease, like a viewfinder
   opening around the word. Measured from rre.com (.button + .button-corners, 10-03).
   Markup: <a class="bsb" href="...">Our portfolio</a>   (.is-hover holds the hover state)
   The brackets are 8 gradient layers on ::before (no extra markup); the box is grown by the spread so the brackets
   can travel outside the button without clipping. */
.bsb {
  --bsb-ink: currentColor;            /* label colour at rest (source: inherits the section's text colour) */
  --bsb-fill: #6ccfff;                /* hover fill (RRE sky) */
  --bsb-ink-hover: var(--bsb-ink);    /* label on the fill (source base variant keeps it; dark-section variant -> #07020ae6).
                                         Changed with -webkit-text-fill-color, not color, so currentColor (the brackets)
                                         keeps the rest ink: on a dark ground the brackets stay white around a dark label */
  --bsb-bracket-color: var(--bsb-ink);/* brackets keep this colour in both states */
  --bsb-arm: 12px;                    /* bracket arm length (.75rem) */
  --bsb-line: 1px;                    /* bracket line */
  --bsb-spread: 8px;                  /* how far each bracket travels out, per axis */
  --bsb-dur: .3s; --bsb-ease: ease;
  --bsb-pad: 12px 24px;
  --bsb-font: 400 15px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: var(--bsb-pad); font: var(--bsb-font); text-transform: uppercase; text-decoration: none;
  color: var(--bsb-ink); background: transparent; border: 0; border-radius: 0; cursor: pointer;
  -webkit-text-fill-color: var(--bsb-ink);
  transition: background-color var(--bsb-dur) var(--bsb-ease), -webkit-text-fill-color var(--bsb-dur) var(--bsb-ease);
  -webkit-tap-highlight-color: transparent;
}
.bsb::before {
  content: ""; position: absolute; inset: calc(var(--bsb-spread) * -1); pointer-events: none;
  --c: var(--bsb-bracket-color); --a: var(--bsb-arm); --l: var(--bsb-line); --s: var(--bsb-spread);
  background:
    linear-gradient(var(--c) 0 0) left var(--s) top var(--s) / var(--a) var(--l),
    linear-gradient(var(--c) 0 0) left var(--s) top var(--s) / var(--l) var(--a),
    linear-gradient(var(--c) 0 0) right var(--s) top var(--s) / var(--a) var(--l),
    linear-gradient(var(--c) 0 0) right var(--s) top var(--s) / var(--l) var(--a),
    linear-gradient(var(--c) 0 0) left var(--s) bottom var(--s) / var(--a) var(--l),
    linear-gradient(var(--c) 0 0) left var(--s) bottom var(--s) / var(--l) var(--a),
    linear-gradient(var(--c) 0 0) right var(--s) bottom var(--s) / var(--a) var(--l),
    linear-gradient(var(--c) 0 0) right var(--s) bottom var(--s) / var(--l) var(--a);
  background-repeat: no-repeat;
  transition: background-position var(--bsb-dur) var(--bsb-ease);
}
.bsb.is-hover, .bsb:focus-visible { background-color: var(--bsb-fill); -webkit-text-fill-color: var(--bsb-ink-hover); }
.bsb.is-hover::before, .bsb:focus-visible::before { background-position: left 0 top 0, left 0 top 0, right 0 top 0, right 0 top 0, left 0 bottom 0, left 0 bottom 0, right 0 bottom 0, right 0 bottom 0; }
@media (hover: hover) {
  .bsb:hover { background-color: var(--bsb-fill); -webkit-text-fill-color: var(--bsb-ink-hover); }
  .bsb:hover::before { background-position: left 0 top 0, left 0 top 0, right 0 top 0, right 0 top 0, left 0 bottom 0, left 0 bottom 0, right 0 bottom 0, right 0 bottom 0; }
}
.bsb:focus-visible { outline: 2px solid var(--bsb-fill); outline-offset: calc(var(--bsb-spread) + 4px); }
@media (prefers-reduced-motion: reduce) { .bsb, .bsb::before { transition: none; } }