/* ==========================================================================
   Insights: the /insights/ index and each article, rendered by article_page.py from
   content/insights/*.md. A full-bleed cover photo with the title over it, then one centred
   reading column (byline, lede, body), then the shared "Start with clarity" section at the end.
   Built on push by .github/workflows/build.yml (see PUBLISHING.md).
   ========================================================================== */

  /* The cover: the article's photo full bleed, the title set over it, centred. The page
     takes has-dark-hero, so the top bar sits transparent over the photo until scroll.
     One even scrim, heavier at the bottom where the title sits, keeps white type
     readable whatever the photo does behind it. */
  .article-cover {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 78vh;
    min-height: 78svh;
    overflow: hidden;
    background: var(--ink);
    color: var(--on-dark);
  }
  .article-cover__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .article-cover__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,16,43,0.45) 0%, rgba(5,16,43,0.35) 35%, rgba(5,16,43,0.82) 100%);
  }
  .article-cover__inner { position: relative; width: 100%; padding-top: 140px; padding-bottom: clamp(48px, 7vw, 96px); }
  .article-cover__title {
    max-width: 22ch;
    margin: 0 auto;
    text-align: center;
    color: var(--on-dark);
    font-size: min(clamp(2.2rem, 5vw, 4.25rem), calc((min(100vw, 1240px) - 64px) * 0.115));
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  /* Jay's rule: centred text stops at three lines. site.js counts the title's lines and
     adds is-long past three, which is most titles on a phone. */
  .article-cover__title.is-long { margin: 0; text-align: left; }

  /* Byline, lede and body share one centred column, all left aligned. Centring stops at
     three lines, and the column reads as one edge from byline to body. */
  .article__column { max-width: calc(68ch + 64px); }
  .article__byline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: clamp(40px, 5vw, 56px) 0 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--muted);
    text-align: left;
  }
  .article__author { flex: none; width: 56px; height: 56px; object-fit: cover; }  /* square: the one-shape rule */
  .article__byline a { color: var(--ink); font-weight: 600; text-decoration: none; }
  .article__byline a:hover { color: var(--blue); }
  .article__byline a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
  .article__lede {
    margin: 32px 0 0;
    font-size: clamp(1.25rem, 1.9vw, 1.45rem);
    line-height: 1.55;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  /* A short rule between the lede and the body, the one blue accent, left with the text. */
  .article__body::before { content: ""; display: block; width: 48px; height: 3px; margin: 0 0 clamp(40px, 5vw, 56px); background: var(--blue); }

  .article__body { padding: clamp(40px, 5vw, 56px) 0 clamp(72px, 9vw, 120px); }
  .article__body > :first-child { margin-top: 0; }
  .article__body h2 {
    margin-top: clamp(40px, 5vw, 56px);
    font-family: var(--f-display);
    font-variation-settings: 'wdth' 108;
    font-weight: 700;
    font-size: clamp(1.45rem, 2.3vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .article__body h3 {
    margin-top: 32px;
    font-family: var(--f-display);
    font-variation-settings: 'wdth' 108;
    font-weight: 700;
    font-size: clamp(1.2rem, 1.7vw, 1.4rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
  .article__body p,
  .article__body li { font-size: 1.125rem; line-height: 1.75; }
  .article__body p { margin-top: 16px; }
  .article__body h2 + p, .article__body h3 + p { margin-top: 12px; }
  .article__body ul, .article__body ol { margin: 16px 0 0; padding-left: 1.25em; }
  .article__body li + li { margin-top: 8px; }
  .article__body strong { font-weight: 600; }
  .article__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
  .article__body a:hover { text-decoration-thickness: 2px; }
  /* A click-to-play YouTube example: the site's video slot, notched like the photos. */
  .article__video { margin: 24px 0 0; }
  .article__video .video-slot { clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, 0 100%); }

  /* The /insights/ index heading: plain, on paper. */
  .article-hero { padding: clamp(56px, 7vw, 104px) 0 clamp(32px, 4vw, 48px); }
  .article-hero__title {
    font-size: min(clamp(2.2rem, 4.6vw, 3.75rem), calc((min(100vw, 1240px) - 64px) * 0.12));
    line-height: 1.04;
    letter-spacing: -0.03em;
  }

  /* The index: one row per article, the whole row a link, newest first. */
  .insights { padding-top: 0; }
  .insights__list { border-top: 1px solid var(--ink); }
  .insight {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
  }
  .insight__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .insight__date { display: block; font-size: 0.9375rem; color: var(--muted); }
  .insight__title {
    margin-top: 6px;
    font-family: var(--f-display);
    font-variation-settings: 'wdth' 108;
    font-weight: 700;
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    transition: color 0.2s var(--ease);
  }
  .insight__desc { display: block; margin-top: 10px; max-width: 62ch; color: var(--ink-2); }
  .insight:hover .insight__title { color: var(--blue); }
  .insight:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

  @media (max-width: 640px) {
    .insight { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .insight__title { transition: none; }
  }