.workspace { display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap); width: 100%; }
.grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.grid-post { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gap); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.sticky { position: sticky; top: calc(var(--bar-h) + var(--gap)); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.hero { --hero-pad-x: 44px; justify-content: space-between; gap: 40px; padding: 40px var(--hero-pad-x); }
/* Topic hub intro: title bar, optional tag feature image, then the padded body. Padding sits on
   the children (not the section) so the title bar and image reach the window edges. */
.hub-grid { align-items: start; }
.hero.hub-intro { padding: 0; gap: 0; justify-content: flex-start; } /* .hero.x outranks the responsive .hero padding rule */
.hub-intro .hub-img { height: 240px; border-bottom: 1px solid var(--border); }
.hub-intro .hero-body { padding: 32px var(--hero-pad-x) 0; }
.hub-intro .pills { padding: 28px var(--hero-pad-x) 36px; }
.hero-body { display: flex; flex-direction: column; gap: 22px; }
.hero-name { margin: 0; font-size: 62px; line-height: 1; color: var(--brand); font-weight: 400; }
.hero-tagline { margin: 0; font-size: 20px; font-style: italic; color: var(--accent); line-height: 1.5; max-width: 700px; }
.hero-text { margin: 0; font-size: 16px; color: var(--fg-2); line-height: 1.7; max-width: 720px; }
.status-tile { flex: 1; }
.status-tile .window-body { gap: 14px; font-size: 13px; flex: 1; }
.status-tile .swatches { margin-top: auto; }
.status-list { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; margin: 0; line-height: 1.6; }
.status-list dt { color: var(--accent); }
.status-list dd { margin: 0; }
.swatches { display: flex; gap: 6px; }
.swatches span { width: 18px; height: 10px; border-radius: 2px; }
.topic .window-body { gap: 12px; height: 100%; }
.topic-name { font-size: 20px; font-weight: 700; line-height: 1.25; }
.topic-tagline { font-size: 14px; font-style: italic; color: var(--fg-2); line-height: 1.55; }
.topic-count { font-size: 12px; color: var(--accent); margin-top: auto; }
.project .window-body { gap: 12px; height: 100%; }
.project-name { font-size: 20px; }
.project-text { font-size: 14px; color: var(--fg-2); line-height: 1.6; }
.project-links { font-size: 12px; color: var(--accent); margin-top: auto; display: flex; gap: 12px; align-items: center; }
.project-links .ico { width: 11px; height: 11px; color: var(--amber); }
.dot.is-studio { background: var(--purple); }
.hub-title { margin: 0; font-size: 40px; line-height: 1.1; color: var(--brand); font-weight: 400; }
.btn-pill.is-active { border-color: var(--focus); color: var(--fg); }