/* additional styles (can be extended) */

/* === Professional article heading palette === */
#content h1, #content h2, #content h3{
  color: color-mix(in oklab, var(--fg), var(--accent) 18%);
  letter-spacing: .2px;
}
#content h2{
  padding-bottom:.2rem;
  background-image: linear-gradient(to right, color-mix(in oklab, var(--accent), transparent 60%), transparent);
  background-repeat:no-repeat;
  background-size:100% 2px;
  background-position:0 100%;
}
#content h3{ opacity:.95 }


/* Responsive images inside article content */
#content img{ max-width:100%; height:auto; }
#content figure{ margin:0 0 1rem 0; }


/* === Premium heading & link palette (site‑wide) === */
:root{
  --heading-color: color-mix(in oklab, var(--fg), var(--accent) 18%);
  --link-color: color-mix(in oklab, var(--accent), var(--fg) 20%);
  --link-hover: color-mix(in oklab, var(--accent-2), var(--accent) 35%);
}
/* Headings */
h1, h2, h3, .card h1, .card h2, .card h3{
  color: var(--heading-color);
  letter-spacing:.2px;
}
/* Article headings inside content */
#content h1, #content h2, #content h3{
  color: var(--heading-color);
}
#content h2{
  padding-bottom:.25rem;
  background-image: linear-gradient(to right, color-mix(in oklab, var(--accent), transparent 60%), transparent);
  background-repeat:no-repeat;
  background-size:100% 2px;
  background-position:0 100%;
}
/* Links (no default purple for :visited) */
a, a:visited{
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--accent), transparent 45%);
}
a:hover{
  color: var(--link-hover);
  text-decoration-color: currentColor;
}
/* Article list links stronger */
.card ul li a{ font-weight:700; }
/* Breadcrumb/inline navs can stay lighter */
.nav a{ text-decoration:none; }


/* === Button readability upgrade === */
.btn{
  color: #f8fbff !important;            /* high contrast text */
  font-weight: 800;                     /* stronger weight */
  text-shadow: 0 1px 0 rgba(0,0,0,.35); /* readability on gradient */
}
.btn:hover{
  filter: brightness(1.05);
}
.btn:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}


/* === Articles index grid layout === */
.articles-hero{margin:1.25rem auto 1.25rem;max-width:72ch}
.articles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin:1rem 0 2rem;
}
.articles-grid .card{
  background:rgba(8,12,20,.45);
  border-radius:20px;
  padding:14px;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}
.articles-grid .thumb img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 2px 16px rgba(0,0,0,.25);
}
.articles-grid h2{font-size:1.1rem;margin:.6rem 0 .35rem}
.articles-grid .excerpt{color:var(--muted);font-size:.95rem;margin:.1rem 0 .6rem}
.btn.btn--ghost{
  background:transparent;border:1px solid color-mix(in oklab,var(--accent),transparent 40%);
  color:color-mix(in oklab,var(--fg),var(--accent) 12%);
  font-weight:700;border-radius:999px;padding:.5rem .9rem;text-decoration:none
}
.btn.btn--ghost:hover{border-color:var(--accent);color:#f8fbff;background:color-mix(in oklab,var(--accent),transparent 80%)}
@media (min-width: 1100px){
  .articles-grid{grid-template-columns:repeat(3,1fr)}
}


/* === Articles page sizing constraints === */
.page-articles .articles-hero,
.page-articles .articles-grid{ max-width:min(1200px,94vw); margin-left:auto; margin-right:auto; }
.page-articles .articles-grid{ padding-left:1rem; padding-right:1rem; }
.page-articles .articles-grid .thumb img{
  aspect-ratio:16/9;
  max-height:clamp(160px,22vw,280px);
  object-fit:cover;
}
@media (min-width:1280px){
  .page-articles .articles-grid{ grid-template-columns:repeat(3,1fr); }
}


/* === Article image sizing (smaller, elegant) === */
.page-article #content>figure:first-child img{
  width:100%;
  max-width:min(860px,92vw);
  max-height:clamp(220px,45vh,460px);
  object-fit:cover;
  display:block;
  margin:0 auto 1rem;
  border-radius:16px;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}
/* Thumbnails on /articles/ grid a bit smaller */
.page-articles .articles-grid .thumb img{
  max-height:clamp(140px,18vw,220px);
}


/* === Force-hide legacy decorative blocks on /articles/ === */
.page-articles figure:not(.articles-grid figure),
.page-articles main>figure,
.page-articles main>section:not(.articles-hero),
.page-articles .container>figure{
  display:none !important;
  max-height:0 !important;
  overflow:hidden !important;
  padding:0 !important; margin:0 !important;
}

/* === Balance article content width and image/text harmony === */
.page-article #content{ max-width:72ch; margin-left:auto; margin-right:auto; }
@media (min-width:1100px){
  .page-article #content>figure:first-child img{ max-height:380px; }
  .page-article #content{ font-size:1.05rem; }
}


/* === Kill any legacy big visuals on /articles/ === */
.page-articles main .container>*:not(.articles-hero):not(.articles-grid){display:none !important}
.page-articles .card::before,.page-articles .card::after{content:none !important}
.page-articles .articles-hero.card{background:rgba(8,12,20,.55)!important;box-shadow:0 6px 22px rgba(0,0,0,.28)!important}


/* === Pro Article Layout === */
.breadcrumb ul{list-style:none;padding:0;margin:.25rem 0;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.breadcrumb li{color:var(--muted);font-size:.9rem}
.breadcrumb a{color:color-mix(in oklab,var(--accent),var(--fg) 15%);text-decoration:none}
.breadcrumb li+li::before{content:'›';opacity:.6;margin:0 .25rem}

.pro-meta{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.6rem 0;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.06);}
.pro-meta .author{font-weight:700;color:color-mix(in oklab,var(--fg),var(--accent) 12%)}
.pro-meta .meta-actions a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,.06);text-decoration:none}
.pro-meta .meta-actions a:hover{background:rgba(255,255,255,.12)}

.article-shell{display:grid;grid-template-columns:1fr;gap:28px;margin-top:.6rem}
@media (min-width: 1100px){
  .article-shell{grid-template-columns:minmax(0,1fr) 260px}
  .pro-toc{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px);overflow:auto}
}
.pro-toc h3{font-size:1rem;margin:.25rem 0 .25rem;color:var(--muted)}
.pro-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.pro-toc a{text-decoration:none;color:color-mix(in oklab,var(--accent),var(--fg) 10%);}
.pro-toc a:hover{color:var(--fg)}

.page-article #content{max-width:72ch}
.page-article #content>figure:first-child{margin:0 0 .5rem 0}
.page-article #content>figure:first-child img{
  width:100%;max-width:min(760px,92vw);
  max-height:clamp(220px,38vh,360px);
  object-fit:cover;display:block;margin:0 auto;border-radius:16px;box-shadow:0 6px 22px rgba(0,0,0,.28)
}
.page-article #content p{line-height:1.75;margin:.75rem 0}
.page-article #content blockquote{margin:1rem 0;padding:.75rem 1rem;border-left:3px solid color-mix(in oklab,var(--accent),transparent 30%);background:rgba(255,255,255,.04);border-radius:8px}
.page-article #content pre, .page-article #content code{background:rgba(255,255,255,.06);border-radius:8px;padding:.15rem .35rem}
.page-article #content pre{padding:.75rem 1rem;overflow:auto}

.pro-pagination{display:flex;justify-content:space-between;gap:12px;margin:1.5rem 0}
.pro-pagination .btn{font-weight:700}


/* === FINAL OVERRIDE: remove big visuals on /articles/ === */
.page-articles figure, .page-articles canvas, .page-articles svg { display:none !important; }
.page-articles, .page-articles body, .page-articles main, .page-articles .container, .page-articles .card {
  background-image: none !important;
}


/* === HARD KILL for legacy visuals on /articles/ === */
.page-articles main .container > *:not(.articles-hero):not(.articles-grid){display:none !important;margin:0 !important;padding:0 !important;max-height:0 !important;overflow:hidden !important}
.page-articles main figure,.page-articles main canvas,.page-articles main svg{display:none !important}
.page-articles main [style*="background-image"]:not(.articles-hero):not(.articles-grid){background-image:none !important}
.page-articles .card::before,.page-articles .card::after{content:none !important}
/* preserve thumbnails in cards */
.page-articles .articles-grid img{display:block !important;visibility:visible !important;opacity:1 !important}