/* ==========================================================================
   BLOG LAYER — generated article, index and archive pages
   --------------------------------------------------------------------------
   Loads after style.css and brand-layer.css, so it only adds what those two
   do not already define. It inherits the four brand tokens (Deep Navy, Clinical
   Blue, Cyan Beam, Clean Silver) and the IBM Plex Sans stack; no new colours
   are introduced. Mobile-first: base rules are the narrow layout, and
   min-width queries add columns.
   ========================================================================== */

/* The generated index toggles the `hidden` attribute on cards and blocks.
   Author-level `display` declarations would otherwise defeat it. */
[hidden] {
  display: none !important;
}

/* --- Reading measure -----------------------------------------------------
   brand-layer sets 72ch with 1rem side padding. 68ch is a better line length
   for the long clinical sentences in these articles, and the extra padding
   keeps text off the screen edge at 320px. */
.blog-full-article {
  max-width: 68ch;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}

.blog-full-article .article-body > *:last-child {
  margin-bottom: 0;
}

.blog-full-article .article-body h2 {
  scroll-margin-top: 96px;
}

.blog-full-article .article-body h3 {
  font-size: 1.25rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--dark-color);
}

.blog-full-article .article-body a {
  color: var(--link-on-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.blog-full-article .article-body a:hover {
  color: var(--navy);
}

/* Long DOI and reference URLs must not push the page sideways. */
.blog-full-article .article-body li,
.blog-full-article .article-body p {
  overflow-wrap: anywhere;
}

.blog-full-article .article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--spacing-md);
  font-size: 0.95rem;
}

.blog-full-article .article-body caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gray-color);
}

.blog-full-article .article-body th,
.blog-full-article .article-body td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--light-gray);
  vertical-align: top;
}

.blog-full-article .article-body thead th {
  background-color: var(--silver);
  color: var(--navy);
  font-weight: 600;
}

.table-scroll:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: 2px;
}

/* --- Breadcrumbs --------------------------------------------------------- */
.breadcrumbs {
  max-width: 68ch;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 1.5rem) 0;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--gray-color);
}

.breadcrumbs li + li::before {
  content: '/';
  margin-right: 0.35rem;
  color: var(--light-gray);
}

.breadcrumbs a {
  color: var(--link-on-light);
  text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  text-decoration: underline;
}

.breadcrumbs [aria-current='page'] {
  color: var(--dark-color);
}

/* --- Article header and byline ------------------------------------------ */
.blog-full-article .section-subtitle a {
  color: var(--link-on-light);
  text-decoration: none;
  font-weight: 600;
}

.blog-full-article .section-subtitle a:hover {
  text-decoration: underline;
}

.blog-full-article .blog-meta {
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: flex-start;
}

.blog-full-article .blog-meta a {
  color: var(--link-on-light);
  text-decoration: none;
}

.blog-full-article .blog-meta a:hover {
  text-decoration: underline;
}

.article-updated,
.article-review {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-color);
}

.article-review {
  padding: 0.65rem 0.9rem;
  border-left: 3px solid var(--cyan);
  background-color: var(--silver);
  color: var(--dark-color);
}

.article-review a {
  color: var(--link-on-light);
}

/* --- Article footer: topics + attribution ------------------------------- */
.article-footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--light-gray);
}

.article-footer h2 {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-color);
}

/* Only the topics heading sits on the navy band. "About this article" uses the
 * same h2 rule on a light panel, so the on-navy tint is scoped to this block
 * rather than applied to the shared heading. */
/* This label sits on the page background, not on navy. It was set to the
 * on-navy tone (#b0c4d6), which measures about 2.2:1 against silver — the label
 * was legible only if you already knew what it said. Gray gives 4.6:1. The
 * on-navy tone is restored below for the dark theme, where it is correct. */.n.article-topics h2 {
  color: var(--gray-color);
}

html.theme-dark .article-topics h2 {
  color: var(--body-on-navy);
}

.article-topics {
  margin-bottom: var(--spacing-md);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tag-list a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--light-gray);
  border-radius: 999px;
  background-color: var(--silver);
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.tag-list a:hover,
.tag-list a:focus-visible {
  border-color: var(--clinical-blue);
  color: var(--link-on-light);
  text-decoration: underline;
}

.tag-list--large a {
  min-height: 44px;
  padding: 0.45rem 0.95rem;
  font-size: 0.875rem;
}

.article-attribution {
  padding: 1rem 1.15rem;
  border: 1px solid var(--light-gray);
  border-radius: var(--border-radius-md);
  background-color: var(--silver);
}

.article-attribution p {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.article-attribution p:last-child {
  margin-bottom: 0;
}

.article-attribution .citation {
  display: block;
  margin-top: 0.25rem;
  color: var(--gray-color);
  overflow-wrap: anywhere;
}

.article-attribution a {
  color: var(--link-on-light);
}

/* --- Cards: featured variant, monogram fallback, byline ------------------ */
.blog-card--featured {
  display: grid;
  grid-template-columns: 1fr;
}

.blog-image--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, var(--navy), var(--clinical-blue));
}

.blog-monogram {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
}

.blog-byline {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--gray-color);
}

.blog-byline a {
  color: var(--link-on-light);
  text-decoration: none;
}

.blog-byline a:hover {
  text-decoration: underline;
}

.blog-category a {
  color: inherit;
  text-decoration: none;
}

/* --- Index controls ------------------------------------------------------ */
.category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--spacing-sm);
}

.category-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--light-gray);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  background-color: var(--silver);
}

.category-links a:hover,
.category-links a:focus-visible {
  border-color: var(--clinical-blue);
  color: var(--link-on-light);
  text-decoration: underline;
}

.category-links a[aria-current='page'] {
  border-color: var(--clinical-blue);
  background-color: var(--clinical-blue);
  color: #ffffff;
}

.blog-count {
  margin: 0 0 var(--spacing-md);
  font-size: 0.875rem;
  color: var(--gray-color);
}

.blog-featured {
  display: grid;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.blog-featured .blog-image {
  height: 240px;
}

/* --- Topic and author index --------------------------------------------- */
.topic-index,
.related-posts,
.author-card-band {
  padding: var(--spacing-lg) 0;
}

.topic-index {
  background-color: var(--silver);
  border-top: 1px solid var(--light-gray);
}

.section-title--spaced {
  margin-top: var(--spacing-lg);
}

.author-list {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.author-list a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 44px;
  padding: 0.9rem;
  border: 1px solid var(--light-gray);
  border-radius: var(--border-radius-md);
  background-color: #ffffff;
  color: var(--navy);
  text-decoration: none;
}

.author-list a:hover,
.author-list a:focus-visible {
  border-color: var(--clinical-blue);
}

.author-role {
  font-size: 0.8125rem;
  color: var(--gray-color);
}

.author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--navy), var(--clinical-blue));
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.author-avatar--small {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  font-size: 0.8125rem;
}

.author-avatar--large {
  width: 88px;
  height: 88px;
  flex-basis: 88px;
  font-size: 1.35rem;
}

/* --- Related / author card ---------------------------------------------- */
.related-all {
  margin-top: var(--spacing-md);
  font-weight: 500;
}

.related-all a {
  color: var(--link-on-light);
}

.author-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--light-gray);
  border-radius: var(--border-radius-lg);
  background-color: var(--silver);
}

.author-card-name {
  margin: 0 0 0.15rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.author-card-name a {
  color: var(--navy);
  text-decoration: none;
}

.author-card-name a:hover {
  text-decoration: underline;
}

.author-card-role {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-color);
}

.author-card-bio {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* --- Author profile page ------------------------------------------------- */
.author-profile {
  padding: var(--spacing-lg) 0 var(--spacing-md);
}

.author-profile-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.archive-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--link-on-light);
}

.author-profile h1 {
  margin-bottom: 0.35rem;
}

.author-bio {
  max-width: 65ch;
  margin: 0 0 0.75rem;
  line-height: 1.7;
}

.author-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

.author-links a {
  color: var(--link-on-light);
}

/* --- Homepage insight highlights ---------------------------------------- */
.insights-highlights {
  padding: var(--spacing-lg) 0;
  background-color: var(--silver);
  border-top: 1px solid var(--light-gray);
}

.insights-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.insights-head .section-title {
  margin-bottom: 0;
}

.insights-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-weight: 500;
  color: var(--link-on-light);
}

.insights-lede {
  max-width: 62ch;
  margin: 0.75rem 0 var(--spacing-md);
  color: var(--body-on-light-gray);
}

.insights-grid {
  display: grid;
  gap: var(--spacing-md);
}

.insight-highlight {
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--light-gray);
  border-top: 3px solid var(--clinical-blue);
  border-radius: var(--border-radius-md);
  background-color: #ffffff;
}

.insight-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.insight-kicker a {
  color: var(--link-on-light);
  text-decoration: none;
}

.insight-highlight h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  line-height: 1.35;
}

.insight-highlight h3 a {
  color: var(--navy);
  text-decoration: none;
}

.insight-highlight h3 a:hover {
  color: var(--link-on-light);
  text-decoration: underline;
}

.insight-excerpt {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--body-on-light-gray);
}

.insight-meta {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  color: var(--gray-color);
}

.insight-highlight .read-more {
  margin-top: auto;
  color: var(--link-on-light);
  font-size: 0.9rem;
  text-decoration: none;
}

.insight-highlight .read-more:hover {
  text-decoration: underline;
}

/* --- Founder portfolio rail ----------------------------------------------
   Sections that list articles canonical on founder.hakimerad.com. They reuse
   the .insights-grid / .insight-highlight card pair so the two surfaces cannot
   drift apart; only the section frame is new. */
.founder-writing {
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--light-gray);
}

.founder-writing .insights-grid {
  margin-top: var(--spacing-md);
}

.founder-writing .insight-meta a {
  color: var(--link-on-light);
  text-decoration: none;
}

.founder-writing .insight-meta a:hover,
.founder-writing .insight-meta a:focus-visible {
  text-decoration: underline;
}

/* --- Dark theme ---------------------------------------------------------- */
html.theme-dark .breadcrumbs a,
html.theme-dark .blog-full-article .article-body a,
html.theme-dark .blog-full-article .blog-meta a,
html.theme-dark .article-review a,
html.theme-dark .article-attribution a,
html.theme-dark .blog-byline a,
html.theme-dark .related-all a,
html.theme-dark .category-links a,
html.theme-dark .insights-all,
html.theme-dark .insight-kicker a,
html.theme-dark .insight-highlight .read-more,
html.theme-dark .author-links a,
html.theme-dark .author-card-name a {
  color: var(--cyan);
}

html.theme-dark .article-review,
html.theme-dark .article-attribution,
html.theme-dark .author-card,
html.theme-dark .insights-highlights,
html.theme-dark .topic-index {
  background-color: var(--light-gray);
  border-color: rgba(255, 255, 255, 0.14);
}

html.theme-dark .founder-writing {
  border-top-color: rgba(255, 255, 255, 0.14);
}

html.theme-dark .founder-writing .insight-meta a {
  color: var(--cyan);
}

html.theme-dark .insight-highlight,
html.theme-dark .author-list a {
  background-color: #0e2a45;
  border-color: rgba(255, 255, 255, 0.14);
}

html.theme-dark .insight-highlight h3 a,
html.theme-dark .breadcrumbs [aria-current='page'],
/* These pills keep a light field in both themes, so their text has to stay
 * dark in both. Setting the text to silver made it silver on silver, and the
 * link colour that then showed through measured 2.25:1. */
html.theme-dark .tag-list a:not(.btn),
html.theme-dark .category-links a:not(.btn) {
  color: var(--navy);
}

/* The category badge is a solid blue chip: white is the only readable choice
 * on it (4.8:1), where the accent text measured 1.97:1. */
html.theme-dark .blog-category,
html.theme-dark .blog-category a:not(.btn) {
  color: #ffffff;
}

html.theme-dark .blog-full-article .article-body thead th {
  background-color: #0e2a45;
  color: var(--silver);
}

html.theme-dark .insights-lede,
html.theme-dark .insight-excerpt,
html.theme-dark .author-role,
html.theme-dark .author-card-role,
html.theme-dark .blog-byline,
html.theme-dark .blog-count,
html.theme-dark .article-updated {
  color: var(--body-on-navy);
}

html.theme-dark .category-links a[aria-current='page'] {
  background-color: var(--cyan);
  border-color: var(--cyan);
  color: var(--navy);
}

/* --- Wider screens ------------------------------------------------------- */
@media (min-width: 640px) {
  .author-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .author-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 1.5rem;
  }

  .author-profile-inner {
    flex-direction: row;
    gap: 1.75rem;
  }
}

@media (min-width: 768px) {
  .blog-card--featured {
    grid-template-columns: 18rem 1fr;
  }

  .blog-card--featured .blog-image {
    height: 100%;
  }

  .insights-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .insight-highlight {
    padding: 1.4rem 1.5rem;
  }
}

/* --- Motion preference --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .blog-card:hover {
    transform: none;
  }
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .header,
  .footer,
  .state-banner,
  .theme-float,
  .breadcrumbs,
  .article-actions,
  .related-posts,
  .author-card-band,
  .cta,
  .newsletter,
  .insights-highlights {
    display: none !important;
  }

  .blog-full-article {
    max-width: none;
    padding: 0;
  }

  .blog-full-article .article-body a::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #444;
  }
}