/* Hub styles. All values come from tokens.css (Claude Design). */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin: 0; background: var(--surface-page); color: var(--text-primary); font: var(--type-body); font-variant-numeric: var(--type-numeric); }
a { color: inherit; }
a:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
img { display: block; }

.hdr { background: var(--surface-header); color: var(--text-on-header); border-bottom: var(--stroke-hairline) solid var(--border-header); }
.hdr .in { max-width: 960px; margin: 0 auto; padding: 0 var(--space-4); height: var(--header-h); display: flex; align-items: center; gap: var(--space-5); }
.hdr .brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; font: var(--type-h3); margin-right: auto; }
.hdr nav { display: flex; gap: var(--space-4); font: var(--type-small); }
.hdr a { color: var(--text-on-header); }
.hdr a:focus-visible { outline-color: var(--text-on-header); }

main { max-width: 960px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12); }
h1 { font: var(--type-h1); letter-spacing: var(--type-h1-tracking); margin: 0 0 var(--space-2); }
h2 { font: var(--type-h2); margin: var(--space-10) 0 var(--space-3); }
.hero { margin-bottom: var(--space-8); }
.hero h1 { font: var(--type-display); letter-spacing: var(--type-display-tracking); }
.slogan { font: var(--type-h3); margin: 0; }
.by { margin: var(--space-1) 0 0; color: var(--text-secondary); font: var(--type-small); }
.lead { color: var(--text-secondary); max-width: 62ch; margin: 0 0 var(--space-6); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.tc { --edge: var(--site-tint); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-switcher-card); color: var(--midnight); border: var(--stroke-hairline) solid var(--border-subtle); border-left: var(--stroke-indicator) solid var(--edge); border-radius: var(--radius-ui); text-decoration: none; transition: background var(--duration-fast) var(--ease); }
.tc:hover { background: color-mix(in srgb, var(--edge) 14%, var(--surface-switcher-card)); }
.tc:focus-visible { outline-color: var(--midnight); }
.lt { flex: none; width: var(--tile-logo); height: var(--tile-logo); border-radius: var(--radius-ui); background: var(--surface-logo); }
.tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tx b { font: 600 17px/22px var(--font-ui); }
.tx .d2 { font: var(--type-small); font-style: normal; color: var(--slate); }
.tx small { font: var(--type-small); color: var(--slate); }

.chs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chs a { display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--space-4); border: var(--stroke-hairline) solid var(--border-strong); border-radius: var(--radius-ui); text-decoration: none; font: 600 15px/20px var(--font-ui); transition: background var(--duration-fast) var(--ease); }
.chs a:hover { background: var(--surface-raised); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-top: var(--stroke-hairline) solid var(--border-subtle); vertical-align: top; }
th { font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.prose { max-width: 70ch; }
.prose li { margin: var(--space-1) 0; }
footer { max-width: 960px; margin: 0 auto; padding: var(--space-4); border-top: var(--stroke-hairline) solid var(--border-subtle); color: var(--text-secondary); font: var(--type-small); }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } .hero h1 { font: var(--type-h1); } }