/* Cobalt & Paper. Presentation only: inherited grids, widths, ordering and
   responsive breakpoints remain in style.css. */
:root {
  --ab-cobalt: #2149ed;
  --ab-cobalt-deep: #1736bb;
  --ab-paper: #dce5fa;
  --ab-ink: #152d65;
  --ab-muted: #495a79;
  --ab-line: #ccd4e2;
  --ab-ice: #b8f0ff;
  --ab-lime: #d9ff73;
  --ab-apricot: #ffd0aa;
  --ab-teal: #076c76;
  --ab-rust: #a74622;
  --ab-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ab-body: 'DM Sans', Arial, sans-serif;
}
body { background: var(--ab-paper); color: var(--ab-ink); font-family: var(--ab-body); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid currentColor; outline-offset: 4px;
}
nav.site-nav, .hero { background: var(--ab-cobalt); }
.nav-logo, .stat-num { font-family: 'Space Grotesk', sans-serif; }
.nav-logo { font-weight: 700; }
.nav-logo span, .nav-sponsor span { color: var(--ab-lime); }
.nav-sponsor { background: transparent; border-color: #ffffff40; color: #e0e6ff; }
.nav-sponsor:hover { border-color: var(--ab-ice); }
.nav-menu { border-color: #ffffff40; }
.nav-menu > li > a { color: #e0e6ff; }
.nav-menu > li.current-menu-item > a { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.nav-menu .sub-menu { background: var(--ab-cobalt-deep); border-color: #ffffff40; border-top-color: var(--ab-lime); box-shadow: 0 8px 24px #152d6526; }
.nav-menu .sub-menu li a { color: #fff; }
.nav-menu .sub-menu li a:hover { background: #ffffff18; }
.nav-menu li:focus-within > .sub-menu { display: block; }
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before, .hero::after { content: ''; position: absolute; pointer-events: none; z-index: -1; }
.hero::before {
  inset: 0;
  background-image: linear-gradient(#ffffff10 1px, transparent 1px), linear-gradient(90deg, #ffffff10 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, #000, transparent 28%, transparent 72%, #000);
}
.hero::after {
  width: 560px; height: 560px; top: -100px; left: -360px;
  border: 1px solid #ffffff50; border-radius: 50%;
  box-shadow: 0 0 0 35px #ffffff08, 0 0 0 70px #ffffff08, 0 0 0 105px #ffffff08;
}
.hero-inner { position: relative; }
.hero-inner::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 650px; height: 650px; right: -430px; top: 100px;
  border: 1px solid #ffffff50; border-radius: 50%;
  box-shadow: 0 0 0 35px #ffffff08, 0 0 0 70px #ffffff08;
}
.hero-tag { color: var(--ab-ice); background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff40; font-family: 'Space Grotesk', sans-serif; font-weight: 500; }
.hero h1 { font-family: var(--ab-display); text-transform: uppercase; font-weight: 700; line-height: .98; letter-spacing: -.02em; }
.hero h1 span { color: var(--ab-lime); }
.hero h1 .hero-hard { color: var(--ab-ice); }
.hero h1 .hero-fluff { color: var(--ab-apricot); }
.hero-sub { color: #e0e6ff; }
.hero-sub strong:first-child { color: var(--ab-ice); }
.hero-sub strong:last-child { color: var(--ab-lime); }
.hero-photo { border-color: var(--ab-lime); }
.hero-stats { border-color: #ffffff40; }
.hero-stats > div:nth-child(1) .stat-num { color: var(--ab-ice); }
.hero-stats > div:nth-child(2) .stat-num, .stat-num span { color: var(--ab-lime); }
.hero-stats > div:nth-child(3) .stat-num { color: var(--ab-apricot); }
.stat-desc { color: #e0e6ff; }
.btn-yellow { background: var(--ab-lime); color: var(--ab-ink); }
.btn-yellow:hover { background: #c8ed62; }
.btn-blue, .btn-pink, .btn-outline {
  background: transparent; box-shadow: inset 0 0 0 1px #ffffff66;
  color: var(--ab-ice); border-radius: 3px;
}
.btn-pink { color: var(--ab-apricot); }
.btn-blue:hover, .btn-pink:hover, .btn-outline:hover { background: #ffffff12; }
.btn-outline { border-color: #ffffff66; }
.btn-yellow, .btn-blue, .btn-pink, .btn-black { font-weight: 700; }
.pillars, .posts-section { background: var(--ab-paper); border-color: var(--ab-cobalt); }
.section-tag { color: var(--ab-muted); font-family: 'Space Grotesk', sans-serif; font-weight: 500; }
.section-title, .cta h2 { color: var(--ab-ink); font-family: var(--ab-display); text-transform: uppercase; font-weight: 700; }
.section-accent { color: var(--ab-cobalt); }
.section-intro, .pillar p { color: var(--ab-muted); }
.pillar { background: #cbd9f5; border-color: transparent; border-top-color: var(--ab-cobalt); border-radius: 0; box-shadow: inset 0 2px 0 var(--ab-cobalt); }
.pillar:hover { border-color: transparent; border-top-color: var(--ab-cobalt); box-shadow: inset 0 2px 0 var(--ab-cobalt), 4px 4px 0 var(--ab-cobalt); }
.pillar-num { background: transparent; color: var(--ab-cobalt); font-family: var(--ab-display); border-radius: 0; }
.pillar h3 { color: var(--ab-ink); font-weight: 700; }
.pillar:first-child { background: var(--ab-cobalt); }
.pillar:first-child h3 { color: #fff; }
.pillar:first-child p { color: #e0e6ff; }
.pillar:first-child .pillar-num { color: var(--ab-lime); }
.pillar:nth-child(3n + 2) h3, .pillar:nth-child(3n + 2) .pillar-num { color: var(--ab-teal); }
.pillar:nth-child(3n + 3) h3, .pillar:nth-child(3n + 3) .pillar-num { color: var(--ab-rust); }
.about { background: var(--ab-paper); }
.about-open-source { border-top: 4px solid var(--ab-cobalt); }
.about-box { background: var(--ab-ink); border-radius: 4px; }
.about-box p, .cred { color: #e0e6ff; }
.about-box p strong { color: var(--ab-ice); }
.cred-dot { background: var(--ab-lime); }
.posts-col-title { color: var(--ab-ink); border-color: var(--ab-cobalt); font-weight: 700; }
.posts-col-title.trending-title { color: var(--ab-rust); border-color: var(--ab-rust); }
.post-row, .promo-post-row { border-color: var(--ab-line); }
.post-row-body a, .promo-post-title, .blog-feed-title, .search-result-title { color: var(--ab-ink); }
.post-row-body a:hover, .promo-post-title:hover, .blog-feed-title a:hover, .search-result-title:hover { color: var(--ab-cobalt); }
.post-row-meta, .post-views, .top-post-row-meta, .blog-feed-meta { color: var(--ab-teal); font-weight: 600; }
.promo-post-rank, .top-post-num, .blog-feed-num { background: var(--ab-ink); color: var(--ab-lime); }
.top-posts-promo-link { background: var(--ab-ink); color: var(--ab-apricot); font-weight: 700; }
.top-posts-promo-link:hover { background: var(--ab-cobalt-deep); }
.top-post-row { border-color: var(--ab-line); border-radius: 4px; box-shadow: 0 2px 8px #152d6510; }
.top-post-row:hover { border-color: var(--ab-cobalt); box-shadow: 4px 4px 0 var(--ab-cobalt); }
.top-post-text { background: #cbd9f5; }
.top-post-text > a { color: var(--ab-ink); }
.top-post-text > a:hover { color: var(--ab-cobalt); }
.top-post-excerpt, .blog-feed-excerpt, .blog-feed-intro, .search-result-excerpt { color: var(--ab-muted); }
.blog-feed-item { border-color: var(--ab-line); }
.blog-feed-title { font-weight: 700; }
.blog-feed-read-more { color: var(--ab-cobalt); border-color: var(--ab-cobalt); }
.sort-toggle { background: #e3e8f4; }
.top-tab { color: var(--ab-ink); }
.top-tab--active { color: var(--ab-lime); background: var(--ab-cobalt); }
.top-tab--active:hover { background: var(--ab-cobalt-deep); }
.ab-pagination-label, .ab-pagination .page-numbers:hover { color: var(--ab-ink); }
.ab-pagination .page-numbers { color: var(--ab-muted); }
.ab-pagination .page-numbers.current { background: var(--ab-cobalt) !important; color: var(--ab-lime) !important; }
.content-title { background: var(--ab-cobalt); border-color: var(--ab-lime); font-family: var(--ab-display); font-weight: 700; }
.content-title span { color: var(--ab-lime); }
.content-byline, .content-meta { color: var(--ab-muted); }
.content-byline a { color: var(--ab-cobalt); }
.content-cat { background: var(--ab-ink); color: var(--ab-ice); font-weight: 600; }
.content-cat:hover { background: var(--ab-cobalt); }
.content-body { color: #26364d; }
.content-body h2, .content-body h3, .content-body h4 { color: #fff; background: var(--ab-ink); border-color: var(--ab-lime); font-weight: 700; }
.content-body h3 { border-color: var(--ab-ice); }
.content-body h4 { border-color: var(--ab-apricot); }
.content-body a { color: var(--ab-cobalt-deep); }
.content-body pre, .content-body code { color: var(--ab-ink); background: #cbd9f5; }
.popular-posts-hero h1 { font-family: var(--ab-display); color: var(--ab-ink); }
.popular-posts-page .popular-posts-intro, .pillar-page .pillar-intro { color: var(--ab-muted); }
.search-result-row { border-color: var(--ab-line); }
.ab-listen { background: #cbd9f5; border-color: var(--ab-line); border-left-color: var(--ab-cobalt); border-radius: 4px; box-shadow: 0 2px 6px #152d6510; }
.ab-listen-label, .ab-listen-time { color: var(--ab-ink); }
.ab-listen-play { background: var(--ab-lime); border-color: #b6d954; color: var(--ab-ink); box-shadow: none; }
.ab-listen-play:hover { background: #c8ed62; border-color: #9ebf42; box-shadow: 0 2px 6px #152d6520; }
.ab-listen-pos, .ab-listen-knob { background: var(--ab-cobalt); }
.ab-listen .cspv-plays-icon { color: var(--ab-cobalt); }
.hero .ab-listen { background: var(--ab-cobalt-deep); border-color: #ffffff66; box-shadow: none; }
.hero .ab-listen-label, .hero .ab-listen-time, .hero .ab-listen .cspv-plays-count { color: #e0e6ff; }
.hero .ab-listen .cspv-plays-icon { color: var(--ab-lime); }
.hero .ab-listen-icon path { stroke: var(--ab-ice); }
.hero .ab-listen-icon rect { fill: var(--ab-ice); }
.hero .ab-listen-bar { background: #ffffff40; }
.hero .ab-listen-pos, .hero .ab-listen-knob { background: var(--ab-lime); }
/* House-ad geometry and destination branding stay intact; the finish follows the theme. */
.ad-unit .house-ad { background: var(--ab-ink); border-radius: 3px; box-shadow: inset 6px 0 0 var(--ab-cobalt); }
.ad-unit .house-ad-headline { color: var(--ab-ice); }
.ad-unit .house-ad-headline span { color: var(--ab-lime); }
.ad-unit .house-ad-sub { color: #e0e6ff; }
.ad-unit .house-ad-cta { background: var(--ab-lime); color: var(--ab-ink); border-radius: 3px; }
.ad-unit .house-ad:hover .house-ad-cta { background: #c8ed62; }
.cta { background: var(--ab-cobalt); }
.cta h2 { color: #fff; }
.cta p { color: #e0e6ff; }
.btn-black { background: var(--ab-lime); color: var(--ab-ink); }
.btn-black:hover { background: #c8ed62; }
footer { background: var(--ab-ink); }
.footer-links a, footer p { color: #e0e6ff; }
.footer-links a:hover, footer p a { color: var(--ab-ice); }
.cs-rc-style-3 { background: var(--ab-ink) !important; border-color: #ffffff30 !important; border-top-color: var(--ab-lime) !important; }
.cs-rc-title, .cs-rc-item-title { color: var(--ab-lime) !important; font-family: var(--ab-body) !important; }
.cs-rc-item-content, .cs-rc-link { font-family: var(--ab-body) !important; }
.cs-rc-link, .cs-rc-block li span { color: var(--ab-ink) !important; }
.cs-rc-style-3 .cs-rc-link, .cs-rc-style-3 li span { color: var(--ab-ice) !important; }
@media (max-width: 700px) {
  .nav-menu { background: var(--ab-cobalt); border-color: #ffffff40; left: 0; right: 0; }
  .nav-menu .sub-menu { background: transparent; border-color: #ffffff40; }
  .nav-menu .sub-menu li a { color: #e0e6ff; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar, .top-post-row, .top-post-thumb img, .top-posts-promo-link-arrow { transition: none; }
  .pillar:hover, .top-post-row:hover, .top-post-row:hover .top-post-thumb img, .top-posts-promo-link:hover .top-posts-promo-link-arrow { transform: none; }
}

/* Carry the cobalt identity into reading pages without changing their grids. */
.popular-posts-page .popular-posts-hero {
  background: var(--ab-cobalt);
  border-left: 4px solid var(--ab-lime);
  padding: 1.5rem;
  border-radius: 0 4px 4px 0;
}
.popular-posts-page .popular-posts-hero h1 { color: #fff; }
.popular-posts-hero .section-tag,
.popular-posts-page .popular-posts-hero .popular-posts-intro { color: var(--ab-ice); }
.popular-posts-hero .post-views { color: var(--ab-lime); }
.top-post-row, .top-post-text { background: #cbd9f5; }
.sort-toggle { background: #c2d1f1; }

/* Rounded surfaces and tactile responses retain the existing panel geometry. */
:root {
  --ab-radius-panel: 18px;
  --ab-radius-control: 10px;
  --ab-shadow-rest: 0 2px 3px rgb(25 29 36 / 10%), 0 8px 14px -5px rgb(25 29 36 / 22%);
  --ab-shadow-lift: 0 4px 6px rgb(25 29 36 / 12%), 0 18px 24px -7px rgb(25 29 36 / 30%);
}
.pillar, .top-post-row, .about-box, .ad-unit .house-ad,
.popular-posts-page .popular-posts-hero { border-radius: var(--ab-radius-panel); }
.content-title, .ab-listen, .single-thumbnail,
.blog-feed-thumb, .blog-feed-thumb img { border-radius: 12px; }
.content-body h2, .content-body h3, .content-body h4,
.content-body pre, .content-body img { border-radius: 10px; }
.btn-yellow, .btn-blue, .btn-pink, .btn-outline, .btn-black,
.top-posts-promo-link, .ad-unit .house-ad-cta,
.nav-sponsor, .hero-tag { border-radius: var(--ab-radius-control); }
.nav-menu .sub-menu { border-radius: 0 0 14px 14px; }
.cs-rc-style-3 { border-radius: var(--ab-radius-panel) !important; }
.about-box, .popular-posts-page .popular-posts-hero { box-shadow: var(--ab-shadow-rest); }
.pillar, .top-post-row, .ad-unit .house-ad {
  box-shadow: var(--ab-shadow-rest);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, border-color 220ms ease;
}
.pillar { border-color: #a6b8dc; box-shadow: var(--ab-shadow-rest); }
.btn-yellow, .btn-blue, .btn-pink, .btn-outline, .btn-black,
.top-posts-promo-link, .top-tab, .ab-pagination .page-numbers {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}
.pillar:focus-visible, .top-post-row:focus-within, .ad-unit .house-ad:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--ab-shadow-lift);
  border-color: var(--ab-cobalt);
}
@media (hover: hover) and (pointer: fine) {
  .pillar:hover, .top-post-row:hover, .ad-unit .house-ad:hover {
    transform: translateY(-6px);
    box-shadow: var(--ab-shadow-lift);
    border-color: var(--ab-cobalt);
    opacity: 1;
  }
  .btn-yellow:hover, .btn-blue:hover, .btn-pink:hover, .btn-outline:hover,
  .btn-black:hover, .top-posts-promo-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px -3px rgb(25 29 36 / 20%);
  }
  .top-tab:hover, .ab-pagination .page-numbers:hover { transform: translateY(-2px); }
}
.pillar:active, .ad-unit .house-ad:active,
.btn-yellow:active, .btn-blue:active, .btn-pink:active, .btn-outline:active,
.btn-black:active, .top-posts-promo-link:active, .top-tab:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgb(25 29 36 / 12%);
}
@media (hover: none) {
  .pillar:hover, .top-post-row:hover, .top-post-row:hover .top-post-thumb img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar, .top-post-row, .ad-unit .house-ad,
  .btn-yellow, .btn-blue, .btn-pink, .btn-outline, .btn-black,
  .top-posts-promo-link, .top-tab, .ab-pagination .page-numbers { transition: none; }
  .pillar:is(:hover, :focus-visible, :active), .top-post-row:is(:hover, :focus-within),
  .ad-unit .house-ad:is(:hover, :focus-visible, :active),
  .btn-yellow:is(:hover, :active), .btn-blue:is(:hover, :active),
  .btn-pink:is(:hover, :active), .btn-outline:is(:hover, :active),
  .btn-black:is(:hover, :active), .top-posts-promo-link:is(:hover, :active),
  .top-tab:is(:hover, :active), .ab-pagination .page-numbers:hover { transform: none; }
}

/* Heading links keep sufficient contrast on the navy label surface. */
.content-body :is(h2, h3, h4) a { color: inherit; }