/* Novice Links — generated by tools/hub/build-static.js. Do not edit in place. */
:root{
  --sbl-accent:#047857;--sbl-accent-deep:#065f46;--sbl-accent-hover:#064e3b;
  --sbl-accent-soft:#d1fae5;--sbl-accent-glow:#a7f3d0;--sbl-hero-bg:#f8fafc;
  --sbl-page-bg:#ffffff;--sbl-surface:#ffffff;--sbl-border:#e2e8f0;
  --sbl-heading:#0f172a;--sbl-heading-accent:#065f46;--sbl-subheading:#334155;
  --sbl-body:#1e293b;--sbl-body-mid:#334155;--sbl-muted:#475569;
  --sbl-container:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sbl-page-bg);color:var(--sbl-body);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem;line-height:1.78}
.sbl-skip{position:absolute;left:-9999px}
.sbl-skip:focus{left:1rem;top:1rem;background:var(--sbl-accent-deep);color:#fff;padding:.6rem 1rem;border-radius:6px;z-index:10}
.sbl-bar{max-width:var(--sbl-container);margin:0 auto;padding:0 1.5rem}

.sbl-header{border-bottom:1px solid var(--sbl-border);background:var(--sbl-surface)}
.sbl-header .sbl-bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem}
.sbl-brand{display:inline-flex;line-height:0}
.sbl-brand img{height:40px;width:auto;max-width:100%}
.sbl-nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.sbl-nav a{color:var(--sbl-body-mid);text-decoration:none;font-size:.9375rem;font-weight:600}
.sbl-nav a:hover{color:var(--sbl-accent-deep)}
.sbl-nav a[aria-current=page]{color:var(--sbl-accent-deep);text-decoration:underline;text-underline-offset:5px}

.page-content{max-width:var(--sbl-container);margin:0 auto;padding:2.5rem 1.5rem 3.5rem;background:var(--sbl-surface)}
.page-content h1{font-size:1.875rem;font-weight:800;color:var(--sbl-heading);margin:0 0 .625rem;line-height:1.28}
.page-content h2{font-size:1.375rem;font-weight:700;color:var(--sbl-heading-accent);margin:2.75rem 0 .875rem;
  padding-bottom:.4rem;border-bottom:2px solid var(--sbl-accent-glow);line-height:1.35}
.page-content h3{font-size:1.125rem;font-weight:600;color:var(--sbl-subheading);margin:1.875rem 0 .5rem}
/* Body text runs to the container, not to 78ch.
   The h2 rules are a border-bottom on a full-width element, so they always spanned the whole
   1120px container while paragraphs stopped ~300px short of them — the text looked indented
   against its own headings. Matching the two is what the page reads as "aligned". */
.page-content p{margin:0 0 1.125rem}
.page-content ul{padding-left:1.25rem}
.page-content li{margin:0 0 .625rem}
.page-content a{color:var(--sbl-accent-deep);text-underline-offset:2px}
.page-content a:hover{color:var(--sbl-accent-hover)}
.sbl-lede{font-size:1.1875rem;line-height:1.65;color:var(--sbl-body-mid);
  border-left:3px solid var(--sbl-accent-glow);padding-left:1rem;margin:0 0 2rem}

/* The network cards on the home page. auto-fit + minmax rather than a fixed column count, so
   seven cards reflow to 3/2/1 across without a breakpoint per step. */
/* Scoped to .page-content ul so it outranks that rule's padding-left, which would otherwise
   indent the whole grid by 1.25rem against the paragraphs above it. */
.page-content ul.sbl-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1rem;margin:0 0 1.5rem;padding:0;max-width:none}
.page-content ul.sbl-grid li{margin:0}
.sbl-card{margin:0;background:var(--sbl-surface);border:1px solid var(--sbl-border);border-radius:10px;
  padding:1.125rem 1.25rem 1.25rem;transition:border-color .13s,box-shadow .13s}
.sbl-card:hover{border-color:var(--sbl-accent-mid,var(--sbl-accent-glow));box-shadow:0 2px 10px rgba(15,23,42,.07)}
.sbl-card-link{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.sbl-card-mark{width:44px;height:44px;flex:0 0 44px;border-radius:8px;display:block}
/* --sbl-heading, not --sbl-heading-accent: this palette is monochrome slate and
   heading-accent resolves to the same #334155 as body-mid, so the card title and its blurb
   came out identical and the hierarchy rested on weight alone. */
.sbl-card-name{font-weight:700;font-size:1.0625rem;color:var(--sbl-heading);line-height:1.3}
.sbl-card-link:hover .sbl-card-name{color:var(--sbl-accent-hover);text-decoration:underline;text-underline-offset:3px}
/* SCOPED, for the same reason ul.sbl-grid is above. A bare .sbl-card-blurb is (0,1,0) and loses to
   .page-content p at (0,1,1), which sets margin:0 0 1.125rem — so the new gap silently did not
   apply at all. The same specificity trap, two rules apart in the same stylesheet. */
.page-content p.sbl-card-blurb{margin:1.125rem 0 0;font-size:.9375rem;line-height:1.55;
  color:var(--sbl-body-mid);max-width:none}
/* The card is the tap target on touch, not just the 44px mark and the name. */
.sbl-card-link::after{content:"";position:absolute;inset:0}
.sbl-card{position:relative}

.sbl-footer{border-top:1px solid var(--sbl-border);background:var(--sbl-hero-bg);margin-top:3rem;
  padding:2.5rem 0 2rem;font-size:.9375rem}
.sbl-bar--stack{display:grid;grid-template-columns:2fr 1fr;gap:2.5rem}
.sbl-footer h2{font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--sbl-muted);margin:0 0 .75rem;font-weight:700}
.sbl-footer ul{list-style:none;margin:0;padding:0}
.sbl-footer li{margin:0 0 .5rem;line-height:1.5}
.sbl-footer a{color:var(--sbl-accent-deep);text-decoration:none;font-weight:600}
.sbl-footer a:hover{text-decoration:underline}
.sbl-sites span{display:block;color:var(--sbl-muted);font-weight:400;font-size:.875rem}
.sbl-fineprint{max-width:var(--sbl-container);margin:2rem auto 0;padding:1.25rem 1.5rem 0;
  border-top:1px solid var(--sbl-border);color:var(--sbl-muted);font-size:.8125rem;line-height:1.6}
@media (max-width:640px){
  .sbl-bar--stack{grid-template-columns:1fr;gap:1.75rem}
  .sbl-header .sbl-bar{align-items:flex-start}
  .page-content{padding-top:1.75rem}
}