/* The writing spaces banner on the home page and the dashboard. Flat blue on white. */
.sp-banner { max-width: 1240px; margin: clamp(32px, 6vh, 64px) auto 0; padding: 0 clamp(16px, 3vw, 32px); }
.sp-banner-box { background: var(--accent); color: var(--accent-fg); border-radius: 16px; }
.sp-banner-head { padding: 1.4rem 1.5rem .4rem; }
.sp-banner-kicker { display: flex; align-items: center; margin: 0; font: 700 .78rem/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.sp-banner h2 { margin: .55rem 0 0; font: 800 clamp(1.4rem, 3vw, 2rem)/1.15 var(--display); letter-spacing: -.02em; color: inherit; }
.sp-banner-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; padding: 1rem 1.5rem 1.5rem; }
.sp-banner-card { display: grid; gap: .35rem; align-content: start; padding: 1rem 1.1rem; border-radius: 12px; background: var(--card); color: var(--fg); text-decoration: none; border: 2px solid transparent; transition: border-color .18s cubic-bezier(.23, 1, .32, 1), transform .18s cubic-bezier(.23, 1, .32, 1); }
.sp-banner-card:hover { border-color: var(--hero-1); transform: translateY(-2px); }
.sp-banner-card:focus-visible { outline: 3px solid var(--accent-fg); outline-offset: 3px; }
.sp-banner-title { font: 800 1.2rem/1.2 var(--display); color: var(--accent); }
.sp-banner-line { color: var(--fg); line-height: 1.5; }
.sp-banner-meta { font-size: .85rem; color: var(--muted); }
.sp-banner-go { margin-top: .3rem; font-weight: 700; color: var(--accent); }
.sp-banner.compact { margin: 0; padding: 0; max-width: none; }
.sp-banner.compact .sp-banner-head { padding: 1.1rem 1.2rem .2rem; }
.sp-banner.compact .sp-banner-list { padding: .8rem 1.2rem 1.2rem; }
@media (prefers-reduced-motion: reduce) { .sp-banner-card { transition: none; } .sp-banner-card:hover { transform: none; } }