/* Base rules carried from the exports' own <style> blocks. Both pages ship the
   same sheet; the details/keyframe rules are only used by the Albert page. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #06080D; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: #8CC5F5; }
html { scroll-behavior: smooth; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .dsign { transform: rotate(45deg); }
@keyframes livepulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* Anchor offset. These are the export's declared fallbacks and apply only until
   site.js measures the real bar — see the comment there for why measuring won. */
:root { --barpad: 72px; }
@media (max-width: 1039px) { :root { --barpad: 116px; } }

/* The exports express hover with a style-hover attribute their own runtime reads.
   These reproduce those declarations exactly; no state is invented. */
.nav-link:hover   { color: #E6EDF6 }
.btn-primary:hover{ background: #B4DBFF; color: #06080D }
.btn-outline:hover{ border-color: #8CC5F5; color: #8CC5F5 }
.btn-ghost:hover  { border-color: #8CC5F5; color: #E6EDF6 }
.btn-submit:hover { background: #B4DBFF }
.btn-discord:hover{ background: rgba(140, 197, 245, .12); color: #B4DBFF }
.vidcard:hover    { border-color: #8CC5F5; color: #E6EDF6 }
.vidrow:hover     { background: #0C1119; color: #E6EDF6 }
.cap:hover        { background: #0E141E }

/* INTERIM, at Ed's instruction — the proper tiling is an open backlog item.
   The export lets the browser fit as many 280px tracks as it can, and six cards
   orphan one with four empty cells beside it wherever five fit (roughly 1500px to
   1750px). Three tracks divide six evenly, so the grid is pinned there once three
   fit, and auto-fit still handles everything narrower. */
@media (min-width: 940px) {
  [data-component="capabilities"] > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* The exports switch the site bar with matchMedia at 1040px. A page does the same
   thing with a media query — same breakpoint, same two arrangements.
   !important on both sides: the exports carry display in an inline style. */
.nav-narrow { display: none !important; }
@media (max-width: 1039px) {
  .nav-wide { display: none !important; }
  .nav-narrow { display: flex !important; }
}