/* Shared hub styles.
   Previously duplicated inline in all 4 hub pages - 2585 bytes copied 4 times.
   One file means one place to fix a bug, and the browser caches it once. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/barlow-condensed-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/share-tech-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-mono);line-height:1.8}
.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;top:0;left:0;z-index:100;background:var(--accent);color:#04121a;padding:.6rem 1rem;font-weight:700;text-decoration:none}
.skip-link:focus{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wr-header{background:var(--bg2);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:100}
.wr-back{color:var(--accent-strong);text-decoration:none;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.wr-back:hover{color:var(--text)}
.wr-header-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text2)}
.hub{max-width:var(--page-max);margin:0 auto;padding:3rem 2rem 4rem}
.hub-title{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.8rem);font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.hub-sub{font-size:.85rem;color:var(--text2);max-width:680px;margin-bottom:.6rem}
.hub-count{font-size:.72rem;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2.2rem}
.wr-footer{text-align:center;padding:2rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--text3)}
.wr-footer a{color:var(--accent);text-decoration:none}

/* Reduced motion. The four hub pages each repeat this inline, independently,
   which is exactly how one of them ends up forgotten. In the shared file it is
   structural: any page that loads hub.css is covered. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* sr-only: for the grid headings below. Each hub jumped <h1> straight to the
   cards' <h3>, so heading navigation saw an unexplained level skip repeated
   once per card. The card titles cannot simply become <h2> - .project-card h3
   is an element selector in site.css and restyling it would shift the visual
   design - so each grid gets its true <h2> parent, present for assistive tech
   and invisible on screen. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Sibling section links at the foot of each hub. The four hubs linked home and
   nowhere else - zero links between them, in all twelve directions - so someone
   arriving on one from a search result saw a quarter of the work and had no way
   to the rest. Generated from HUB_ORDER in tools/ssot.mjs, so a fifth section
   page appears in this row on every other hub without a hand edit. */
.hub-siblings{max-width:var(--page-max);margin:0 auto;padding:0 2rem 2.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.hub-siblings a{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1rem;border:1px solid var(--border);border-radius:2px;background:var(--surface);color:var(--text2);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.hub-siblings a:hover{border-color:var(--accent);color:var(--text);background:var(--surface-2)}
.hub-sib-n{font-size:.68rem;color:var(--accent);letter-spacing:.06em}
@media (max-width:560px){
  .hub-siblings{padding:0 1rem 2rem;gap:.45rem}
  .hub-siblings a{padding:.7rem .85rem;font-size:.7rem}
}