/* Corner-bracket nav: every nav cell carries a small corner bracket tucked into its bottom-right corner. Point at a
   cell (or mark it current) and that bracket slides out diagonally through the bottom-right corner while a twin
   slides in diagonally from beyond the top-right corner, so the mark seems to hop up the cell's right edge; the
   label darkens on the same beat. CSS only, no extra markup (the brackets are the cell's ::before / ::after).

   <nav class="cbn">
     <a class="cbn-item" href="/work">Work</a>
     <a class="cbn-item" href="/about" aria-current="page">About</a>
   </nav>

   Hover is gated to (hover: hover) so a tap doesn't leave it stuck; aria-current, .is-active and :focus-visible
   hold the "in" state. Numbers are Heron's .header-menu-item-ic (1rem = 10px at 1728 wide). */
.cbn-item {
  --cbn-ink: rgba(40, 40, 40, .72);        /* resting label (source --content--terriary #282828b8) */
  --cbn-ink-on: #282828;                   /* label while in */
  --cbn-mark: currentColor;                /* bracket colour */
  --cbn-size: 7px;                         /* bracket arm length (.6rem box, 7-unit icon) */
  --cbn-stroke: 1px;
  --cbn-inset: 6px;                        /* gap from the cell's corner (.6rem) */
  --cbn-travel: 12px;                      /* extra distance past the corner when hidden (1.2rem) */
  --cbn-dur: .5s;
  --cbn-ease: cubic-bezier(.23, 1, .32, 1);
  --cbn-ink-dur: .4s;
  --cbn-pad: 14px 16px;

  --_off: calc(var(--cbn-size) + var(--cbn-travel));   /* = 100% + 1.2rem of the bracket box */
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  box-sizing: border-box; padding: var(--cbn-pad);
  color: var(--cbn-ink); text-decoration: none;
  transition: color var(--cbn-ink-dur) ease;
}
.cbn-item::before, .cbn-item::after {
  content: ""; position: absolute; right: var(--cbn-inset);
  width: var(--cbn-size); height: var(--cbn-size); box-sizing: border-box;
  border: 0 solid var(--cbn-mark); border-right-width: var(--cbn-stroke);
  pointer-events: none;
  transition: transform var(--cbn-dur) var(--cbn-ease);
}
.cbn-item::before {                        /* top bracket: waits up-right, outside the corner */
  top: var(--cbn-inset); border-top-width: var(--cbn-stroke);
  transform: translate(var(--_off), calc(-1 * var(--_off)));
}
.cbn-item::after {                         /* bottom bracket: shown at rest */
  bottom: var(--cbn-inset); border-bottom-width: var(--cbn-stroke);
  transform: none;
}
/* in: top bracket home, bottom bracket out through the bottom-right corner */
.cbn-item:is([aria-current="page"], .is-active, .is-hover, :focus-visible) { color: var(--cbn-ink-on); }
.cbn-item:is([aria-current="page"], .is-active, .is-hover, :focus-visible)::before { transform: none; }
.cbn-item:is([aria-current="page"], .is-active, .is-hover, :focus-visible)::after { transform: translate(var(--_off), var(--_off)); }
@media (hover: hover) {
  .cbn-item:hover { color: var(--cbn-ink-on); }
  .cbn-item:hover::before { transform: none; }
  .cbn-item:hover::after { transform: translate(var(--_off), var(--_off)); }
}
.cbn-item:focus-visible { outline: 2px solid var(--cbn-ink-on); outline-offset: -4px; }
/* .cbn--top-only: no resting mark; only the top bracket arrives (quieter bars) */
.cbn--top-only .cbn-item::after { display: none; }
@media (prefers-reduced-motion: reduce) { .cbn-item::before, .cbn-item::after { transition-duration: .01s; } }