/* =========================================================
   Engenho de Ideias — Insight (article) — layout compartilhado
   ========================================================= */
.sub-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding-block: 18px;
    border-bottom: 1px solid var(--line-strong);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .sub-nav a { display: inline-flex; align-items: center; gap: 8px; transition: color .4s cubic-bezier(0.32, 0.72, 0, 1); }
  .sub-nav a:hover { color: var(--orange); }
  .sub-nav a svg { transition: transform .5s cubic-bezier(0.16, 1.08, 0.32, 1); }
  .sub-nav a:hover svg { transform: translateX(-4px); }

  .article-hero {
    padding-top: clamp(48px, 6vw, 88px);
    padding-bottom: clamp(40px, 5vw, 64px);
    max-width: 1180px;
    margin-inline: auto;
  }
  .article-hero .meta {
    display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: clamp(28px, 4vw, 44px);
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .article-hero .cat {
    color: var(--orange);
    font-weight: 500;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .article-hero .cat::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
  }
  .article-hero .sep { width: 1px; height: 12px; background: var(--line-strong); }
  .article-hero .date,
  .article-hero .read-time { color: var(--ink-soft); }

  .article-hero h1 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(34px, 4.6vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0;
    text-wrap: balance;
  }
  .article-hero h1 em { color: var(--orange); font-style: italic; font-weight: 300; }

  .article-hero .subtitle {
    margin-top: clamp(24px, 3vw, 40px);
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(20px, 1.9vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.014em;
    color: var(--ink-soft);
    max-width: 42ch;
    text-wrap: balance;
  }

  .article-cover {
    width: 100%;
    margin-bottom: 0;
  }
  .article-cover figure {
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: var(--paper-2);
  }
  .article-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(8%) contrast(1.0);
    transform-origin: center 45%;
    animation: cover-kenburns 32s ease-in-out infinite;
  }
  @keyframes cover-kenburns {
    0%, 100% { transform: scale(1.02) translate3d(0, 0, 0); }
    50%      { transform: scale(1.08) translate3d(-1%, 0.6%, 0); }
  }

  .article-body {
    max-width: 860px;
    margin: 0 auto;
    padding-block: clamp(32px, 4vw, 56px) clamp(64px, 8vw, 120px);
    padding-inline: clamp(20px, 4vw, 32px);
  }

  .prose .lead {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.016em;
    color: var(--ink);
    margin: 0 0 36px;
    text-wrap: balance;
  }
  .prose p {
    font-family: var(--sans);
    font-size: clamp(17px, 1.2vw, 19px);
    line-height: 1.7;
    color: var(--ink);
    margin: 0 0 26px;
  }
  .prose p:last-child { margin-bottom: 0; }
  .prose p strong { font-weight: 600; }
  .prose h2 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.022em;
    margin: clamp(48px, 6vw, 72px) 0 22px;
    text-wrap: balance;
  }
  .prose h2 em { color: var(--orange); font-style: italic; font-weight: 300; }

  .prose .pull {
    margin: clamp(48px, 6vw, 80px) calc(-1 * clamp(0px, 6vw, 100px));
    padding: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 64px);
    border-block: 1px solid var(--line-strong);
    position: relative;
  }
  .prose .pull::before {
    content: "“";
    position: absolute;
    top: clamp(0px, 1vw, 10px);
    left: clamp(20px, 3vw, 48px);
    font-family: var(--serif);
    font-size: clamp(72px, 8vw, 132px);
    line-height: 1;
    color: var(--orange);
    font-weight: 300;
    pointer-events: none;
  }
  .prose .pull q {
    display: block;
    margin-left: clamp(36px, 5vw, 80px);
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(24px, 2.8vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.022em;
    color: var(--ink);
    quotes: none;
    max-width: 26ch;
    text-wrap: balance;
  }
  .prose .pull q::before, .prose .pull q::after { content: none; }
  .prose .pull q em { color: var(--orange); font-style: italic; font-weight: 300; }

  .article-author {
    max-width: 860px;
    margin: clamp(56px, 7vw, 96px) auto 0;
    padding: clamp(28px, 3vw, 36px) clamp(20px, 4vw, 32px);
    padding-inline-start: 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: clamp(20px, 3vw, 32px);
    align-items: center;
  }
  .article-author .photo {
    width: 108px; height: 108px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper-2);
    border: 1px solid var(--line-strong);
  }
  .article-author .photo img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(10%) contrast(1);
  }
  .article-author .body {
    display: flex; flex-direction: column; gap: 2px;
  }
  .article-author .who {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1;
    letter-spacing: -0.018em;
    color: var(--ink);
  }
  .article-author .role {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .article-author .by {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 2px;
  }

  .related {
    padding-block: clamp(80px, 10vw, 140px);
    border-top: 1px solid var(--line-strong);
  }
  .related-head {
    max-width: 1280px;
    margin: 0 auto clamp(36px, 5vw, 56px);
    padding-inline: clamp(20px, 4vw, 32px);
    display: flex; justify-content: space-between; align-items: end;
    gap: 24px; flex-wrap: wrap;
  }
  .related-head h2 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 0;
  }
  .related-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: clamp(20px, 4vw, 32px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .related-card {
    padding-top: 22px;
    display: flex; flex-direction: column; gap: 14px;
    min-height: 220px;
  }
  .related-card:hover h3 { color: var(--orange); }
  .related-card .cat {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .related-card h3 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
    transition: color .4s cubic-bezier(0.32, 0.72, 0, 1);
    text-wrap: balance;
  }
  .related-card p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
  }
  .related-card .more {
    margin-top: auto;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink);
  }
  .related-card .more .arrow { width: 12px; height: 12px; transition: transform .55s cubic-bezier(0.16, 1.08, 0.32, 1); }
  .related-card:hover .more .arrow { transform: translateX(5px); }
  .related-card:hover .more { color: var(--orange); }

  @media (max-width: 720px) {
    .article-author { grid-template-columns: 76px 1fr; }
    .article-author .photo { width: 76px; height: 76px; }
    .prose .pull { margin-inline: 0; }
    .related-grid { grid-template-columns: 1fr; }
  }