/* Public news (blog) pages. brand.css loads first; this layer styles
 * the article index + single-post views. Mirrors the legal-prose
 * approach: the body markdown emits Tailwind class names from
 * StyledMarkdownRenderer (inert on marketing) and we style the raw
 * h1/h2/p/etc. via .news-prose.
 */

  body {
    background: var(--bone);
    color: var(--ink);
  }

  main.news-page {
    max-width: var(--grid-max);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(64px, 7vw, 112px);
    width: 100%;
  }

  /* ── Header ── */
  .news-header {
    padding-bottom: clamp(28px, 3vw, 40px);
    margin-bottom: clamp(40px, 5vw, 64px);
    border-bottom: 1px solid var(--hairline-light);
  }
  .news-header .eyebrow {
    color: var(--mute-light);
    margin-bottom: 16px;
  }
  .news-header-title {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--ink);
    max-width: 22ch;
    margin-bottom: 12px;
  }
  .news-header-lede {
    font-family: var(--sans);
    font-size: clamp(15px, 1.2vw, 18px);
    color: var(--mute-light);
    max-width: 56ch;
  }

  /* ── Chip ── */
  .news-chip {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--bone-warm);
    color: var(--ink);
    display: inline-block;
  }
  .news-chip-product     { background: rgba(34, 197, 94, 0.14);  color: #166534; }
  .news-chip-engineering { background: rgba(14, 165, 233, 0.14); color: #0c4a6e; }
  .news-chip-company     { background: rgba(245, 158, 11, 0.14); color: #92400e; }
  .news-chip-industry    { background: rgba(139, 92, 246, 0.14); color: #5b21b6; }
  .news-chip-guide       { background: rgba(244, 63, 94, 0.14);  color: #9f1239; }
  .news-chip-case_study  { background: rgba(15, 23, 42, 0.10);   color: #1e293b; }

  .news-meta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--mute-light);
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .news-meta-dot::before { content: "·"; margin-right: 12px; color: var(--mute-light); }

  /* ── Avatars ── */
  .news-avatar {
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
  }
  .news-avatar-sm { width: 28px; height: 28px; }
  .news-avatar-md { width: 40px; height: 40px; }
  .news-avatar-initials {
    background: var(--ink);
    color: var(--bone);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .news-avatar-md.news-avatar-initials { font-size: 14px; }

  /* ── Featured (top of /news) ── */
  .news-featured {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    margin-bottom: clamp(48px, 5vw, 72px);
  }
  .news-featured-image {
    aspect-ratio: 16 / 9;
    background: var(--bone-warm);
    border-radius: 14px;
    overflow: hidden;
  }
  .news-featured-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .news-featured-body { display: flex; flex-direction: column; gap: 16px; align-self: center; }
  .news-featured-title {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.022em;
    color: var(--ink);
  }
  .news-featured-title a { text-decoration: none; color: inherit; }
  .news-featured-title a:hover { color: var(--signal); }
  .news-featured-summary {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.55;
    color: var(--mute-light);
  }
  .news-byline { display: inline-flex; align-items: center; gap: 10px; }
  .news-byline-name {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    font-weight: 600;
  }
  @media (max-width: 720px) {
    .news-featured { grid-template-columns: 1fr; }
  }

  /* ── Card grid ── */
  .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(24px, 2.4vw, 36px);
  }
  .news-card { display: flex; flex-direction: column; gap: 12px; }
  .news-card-image {
    aspect-ratio: 16 / 9;
    background: var(--bone-warm);
    border-radius: 12px;
    overflow: hidden;
  }
  .news-card-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.3s ease-out;
  }
  .news-card:hover .news-card-image img { transform: scale(1.02); }
  .news-card-title {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: var(--ink);
  }
  .news-card-title a { text-decoration: none; color: inherit; }
  .news-card-title a:hover { color: var(--signal); }
  .news-card-summary {
    font-size: 14px;
    line-height: 1.55;
    color: var(--mute-light);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .news-empty {
    font-family: var(--sans);
    color: var(--mute-light);
    font-size: 15px;
    padding: 24px 0;
  }

  /* ── Single article ── */
  .news-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mute-light);
    text-decoration: none;
    margin-bottom: 24px;
  }
  .news-back::before { content: "←"; color: var(--signal); }
  .news-back:hover { color: var(--ink); }

  .news-show-header { margin-bottom: clamp(28px, 3vw, 40px); }
  .news-show-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
  .news-show-title {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(32px, 4.4vw, 54px);
    line-height: 1.06;
    letter-spacing: -0.028em;
    color: var(--ink);
    max-width: 24ch;
    margin-bottom: 16px;
  }
  .news-show-summary {
    font-family: var(--sans);
    font-size: clamp(17px, 1.4vw, 22px);
    line-height: 1.45;
    color: var(--mute-light);
    max-width: 64ch;
    margin-bottom: 24px;
  }
  .news-show-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--hairline-light);
    border-bottom: 1px solid var(--hairline-light);
  }
  .news-show-byline-text { display: flex; flex-direction: column; gap: 2px; }
  .news-show-byline-avatars {
    display: inline-flex; align-items: center;
  }
  .news-show-byline-avatars > * + * {
    margin-left: -12px;
    box-shadow: 0 0 0 2px var(--bone);
    border-radius: 50%;
  }

  .news-show-byline-name {
    display: inline-flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    font-weight: 600; color: var(--ink);
  }
  .news-show-byline-sep { color: var(--mute-light); font-weight: 400; }
  .news-show-byline-linkedin {
    display: inline-flex; align-items: center;
    color: var(--mute-light);
    transition: color 0.15s;
  }
  .news-show-byline-linkedin:hover { color: #0a66c2; }
  .news-show-byline-date {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--mute-light);
  }

  .news-show-image {
    aspect-ratio: 16 / 9;
    background: var(--bone-warm);
    border-radius: 16px;
    overflow: hidden;
    margin: clamp(28px, 3vw, 40px) 0;
  }
  .news-show-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }

  /* Prose (StyledMarkdownRenderer output). Style raw elements; the
   * inline Tailwind classes from the renderer are inert on this page. */
  .news-prose {
    font-family: var(--sans);
    color: var(--ink);
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.68;
    max-width: 64ch;
  }
  .news-prose h1, .news-prose h2, .news-prose h3 {
    font-family: var(--sans); color: var(--ink);
    letter-spacing: -0.022em; line-height: 1.18;
  }
  .news-prose h1 { font-weight: 800; font-size: clamp(24px, 2.4vw, 30px); margin: clamp(36px, 4vw, 48px) 0 14px; }
  .news-prose h2 { font-weight: 700; font-size: clamp(20px, 1.9vw, 24px); margin: clamp(32px, 3.2vw, 40px) 0 12px; }
  .news-prose h3 { font-weight: 700; font-size: clamp(17px, 1.5vw, 20px); margin: clamp(24px, 2.6vw, 32px) 0 10px; }
  .news-prose p { margin: 0 0 16px; color: rgba(10, 24, 50, 0.84); }
  .news-prose ul, .news-prose ol { margin: 0 0 18px; padding-left: 24px; }
  .news-prose ul { list-style: disc; }
  .news-prose ol { list-style: decimal; }
  .news-prose li { margin: 6px 0; padding-left: 4px; }
  .news-prose li::marker { color: var(--signal); }
  .news-prose strong { color: var(--ink); font-weight: 600; }
  .news-prose em { font-style: italic; }
  .news-prose a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px dotted var(--signal);
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
  }
  .news-prose a:hover { color: var(--signal); border-bottom-color: var(--signal); }
  .news-prose blockquote {
    margin: 24px 0; padding: 4px 0 4px 20px;
    border-left: 2px solid var(--signal);
    color: var(--mute-light); font-style: italic;
  }
  .news-prose hr {
    margin: clamp(32px, 3.6vw, 48px) 0; border: none;
    border-top: 1px solid var(--hairline-light);
  }
  .news-prose code {
    font-family: var(--mono); font-size: 0.9em;
    background: rgba(10, 24, 50, 0.06);
    padding: 0.12em 0.4em; border-radius: 3px;
  }
  .news-prose pre {
    font-family: var(--mono);
    background: rgba(10, 24, 50, 0.04);
    border: 1px solid var(--hairline-light);
    padding: 16px 20px; overflow-x: auto;
    font-size: 13px; line-height: 1.5; margin: 20px 0;
  }
  .news-prose img {
    max-width: 100%; height: auto;
    border-radius: 12px; margin: 24px 0;
  }

  /* ── Press strip (on /news) + /press page ──────────────────────── */
  .press-strip {
    margin-bottom: clamp(48px, 5vw, 72px);
  }
  .press-strip-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(16px, 1.6vw, 24px);
  }
  .press-strip-see-all {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
  }
  .press-strip-see-all:hover { color: var(--signal); }

  /* Press cards are <a> elements (the whole card is the link).
   * Strip the default anchor styling so they line up with the
   * blog cards beside them. */
  .press-card,
  a.press-card,
  a.press-card:visited {
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
  }
  .press-card:hover .press-card-title { color: var(--signal); }
  .press-card:hover .press-card-thumb img { transform: scale(1.02); }

  /* Fallback background per media type when no thumbnail URL is set —
   * gives the card a recognisable shape rather than an empty box. */
  .press-card-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .press-card-thumb-article { background: color-mix(in oklch, var(--ink) 4%, var(--bone-warm)); }
  .press-card-thumb-podcast { background: color-mix(in oklch, var(--signal) 8%, var(--bone-warm)); }
  .press-card-thumb-video   { background: color-mix(in oklch, #2563eb 8%, var(--bone-warm)); }
  .press-card-thumb-fallback {
    width: 32px; height: 32px;
    color: var(--mute-light);
  }
  .press-card-title { transition: color 0.15s; }

  /* Media-type chips. Same shape as .news-chip-{category} above. */
  .news-chip.press-chip-article {
    background: color-mix(in oklch, var(--ink) 10%, transparent);
    color: var(--ink);
  }
  .news-chip.press-chip-podcast {
    background: color-mix(in oklch, var(--signal) 18%, transparent);
    color: var(--signal);
  }
  .news-chip.press-chip-video {
    background: color-mix(in oklch, #2563eb 18%, transparent);
    color: #2563eb;
  }

  /* /press pagination — series_nav comes through with class "pagy" */
  .news-pagination {
    margin-top: clamp(40px, 4vw, 64px);
    display: flex;
    justify-content: center;
  }