/* =====================================================================
   The house mark grown into a 3 × 3: every power-up's logo as a tile, and
   the blue plus tile in the top-right cell, raised and turned as the logo
   has it: the one power-up a board was missing. On the blog index, where
   each tile jumps to that power-up's row. Written by scripts/blog-hub.js.
   ===================================================================== */
.bh-mark { --t: 70px; --g: 14px; position: relative; display: grid; grid-template-columns: repeat(3, var(--t)); grid-auto-rows: var(--t); gap: var(--g); padding: 16px 12px 0 0; }
.bh-tile { display: block; border-radius: 18px; }
/* The logos are rounded squares already: they are the tiles. In the house
   mark's slate, so the blue plus is the one colour; a tile under the pointer
   takes its own colour back and lifts. */
.bh-tile img { width: 100%; height: 100%; border-radius: 18px; display: block; filter: url(#bh-slate); box-shadow: 0 14px 26px -16px rgba(12, 40, 100, .5); transition: transform .25s cubic-bezier(.2, .8, .3, 1.2); }
.bh-tile:hover img, .bh-tile:focus-visible img { filter: none; transform: translateY(-4px) scale(1.05); }
.bh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bh-tile:focus-visible { outline: 3px solid var(--primary-2); outline-offset: 3px; }
/* The blue tile with the plus takes the top-right cell and sits as it does
   in the logo: raised, nudged right and turned 12°, still. */
.bh-plus { position: relative; border-radius: 18px; background: linear-gradient(135deg, #2F7CF7, #246EF0); box-shadow: 0 18px 30px -14px rgba(36, 110, 240, .7); transform: translate(10%, -14%) rotate(12deg); }
.bh-plus::before, .bh-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 38%; height: 10%; border-radius: 99px; background: #fff; transform: translate(-50%, -50%); }
.bh-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
/* The plus is a link: "Missing a power-up?", by email. The link holds the
   cell; the tile turns inside it, and the note opens under it, unturned. */
.bh-plus-link { position: relative; display: block; border-radius: 18px; }
.bh-plus-link .bh-plus { position: absolute; inset: 0; transition: transform .35s cubic-bezier(.2, .8, .3, 1.1), box-shadow .2s ease; }
/* Under the pointer the missing piece clicks into its slot, square and level. */
.bh-plus-link:hover .bh-plus, .bh-plus-link:focus-visible .bh-plus { transform: none; box-shadow: 0 12px 24px -14px rgba(36, 110, 240, .7); }
.bh-plus-link:focus-visible { outline: 3px solid var(--primary-2); outline-offset: 6px; }
.bh-plus-tip {
  position: absolute; z-index: 10; top: calc(100% + 14px); right: -12px; width: 236px;
  display: grid; gap: 2px; padding: 12px 14px;
  font: 500 13.5px/1.45 'Inter', sans-serif; color: #C9D3E3; text-align: left;
  background: var(--ink); border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(12, 40, 100, .6);
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.bh-plus-tip b { font: 700 14.5px 'Space Grotesk', sans-serif; color: #fff; }
.bh-plus-mail { margin-top: 6px; font-weight: 600; color: #93C5FD; user-select: all; }
.bh-plus-link:hover .bh-plus-tip, .bh-plus-link:focus-visible .bh-plus-tip { opacity: 1; visibility: visible; transform: none; }

@media (prefers-reduced-motion: reduce) { .bh-tile img, .bh-plus-link .bh-plus, .bh-plus-tip { transition: none; } }