/* ==========================================================================
   Kimi Tsion Consulting · Articles
   Liste des articles, page d'article et corps de texte (.prose).
   Complète styles.css, qui pose les variables, la nav et le pied de page.
   .prose est aussi utilisé par l'aperçu du backoffice.
   ========================================================================== */

.nav__link.is-current { color: var(--cream); border-bottom-color: var(--sage); }

/* ---------------------------------------------------------------- liste --- */

.articles { padding: 190px 0 150px; }

.articles__head { max-width: 780px; margin-bottom: 84px; }

.articles__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 26px 0 0;
  text-wrap: balance;
}
.articles__title em { font-style: italic; color: var(--mist); }

.articles__lede {
  font-size: 15.5px;
  line-height: 1.9;
  color: rgba(239, 235, 227, .66);
  margin: 30px 0 0;
  max-width: 54ch;
  text-wrap: pretty;
}

.articles__empty {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 24px;
  color: rgba(239, 235, 227, .55);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1px;
  background: rgba(239, 235, 227, .13);
  border: 1px solid rgba(239, 235, 227, .13);
}

.card { background: var(--ink); }

.card__link { display: flex; flex-direction: column; height: 100%; color: var(--cream); }
.card__link:hover { color: var(--cream); }

.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-alt); }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) contrast(1.03);
  transition: transform .9s cubic-bezier(.16, .84, .3, 1);
}
.card__link:hover .card__media img { transform: scale(1.03); }

.card__body { padding: 34px 34px 38px; display: flex; flex-direction: column; flex: 1; }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(143, 187, 166, .85);
}

.card__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.22;
  margin: 18px 0 0;
  text-wrap: pretty;
}

.card__summary {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(239, 235, 227, .72);
  margin: 16px 0 0;
}

.card__more {
  margin-top: auto;
  padding-top: 30px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .55);
  transition: color .25s ease;
}
.card__more::after { content: "  →"; }
.card__link:hover .card__more { color: var(--sage); }

/* -------------------------------------------------------------- article --- */

.article { padding: 170px 0 150px; }

.article__head,
.article__body,
.article__end {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 44px;
}

.article__draft {
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mist);
  background: rgba(143, 187, 166, .1);
  border: 1px solid rgba(143, 187, 166, .35);
}
.article__draft a { color: var(--sage); margin-left: 8px; border-bottom: 1px solid rgba(143, 187, 166, .45); }

.article__meta { display: flex; flex-wrap: wrap; gap: 12px; }
.article__meta a { color: var(--sage); border-bottom: 1px solid transparent; }
.article__meta a:hover { border-bottom-color: var(--sage); }

.article__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.08;
  letter-spacing: -.012em;
  margin: 26px 0 0;
  text-wrap: balance;
}

.article__lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.5;
  color: var(--mist);
  margin: 30px 0 0;
  text-wrap: pretty;
}

.article__cover { max-width: 1000px; margin: 64px auto 0; padding: 0 44px; }
.article__cover img { width: 100%; height: auto; filter: saturate(.8); }

.article__body { margin-top: 64px; }

/* --------------------------------------------------------------- prose --- */

.prose { font-size: 17px; line-height: 1.85; color: rgba(239, 235, 227, .82); }

.prose p { margin: 0 0 1.5em; }
.prose > :last-child { margin-bottom: 0; }

.prose h1,
.prose h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 2.6vw, 38px);
  line-height: 1.2;
  color: var(--cream);
  margin: 2.2em 0 .7em;
  text-wrap: pretty;
}
.prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2vw, 28px);
  line-height: 1.3;
  color: var(--cream);
  margin: 1.8em 0 .6em;
}
.prose h4,
.prose h5,
.prose h6 {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--sage);
  margin: 2.2em 0 .9em;
}
.prose > h1:first-child,
.prose > h2:first-child,
.prose > h3:first-child { margin-top: 0; }

.prose a {
  color: var(--sage);
  border-bottom: 1px solid rgba(143, 187, 166, .45);
  transition: color .25s ease, border-color .25s ease;
}
.prose a:hover { color: var(--cream); border-bottom-color: var(--cream); }

.prose strong { color: var(--cream); font-weight: 600; }

.prose ul,
.prose ol { margin: 0 0 1.5em; padding-left: 1.5em; }
.prose li { margin: .45em 0; padding-left: .2em; }
.prose li::marker { color: var(--sage); }
.prose li > p { margin-bottom: .6em; }

.prose blockquote {
  margin: 2.2em 0;
  padding: .2em 0 .2em 28px;
  border-left: 1px solid var(--sage);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.5;
  color: var(--mist);
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: .8em; }

.prose img { max-width: 100%; height: auto; margin: 2.2em 0; filter: saturate(.85); }

.prose hr { border: 0; border-top: 1px solid rgba(239, 235, 227, .14); margin: 3em 0; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: rgba(239, 235, 227, .07);
  padding: .15em .4em;
  border-radius: 2px;
}
.prose pre {
  background: var(--ink-alt);
  border: 1px solid rgba(239, 235, 227, .1);
  padding: 20px 24px;
  overflow-x: auto;
  margin: 0 0 1.6em;
  font-size: 14px;
  line-height: 1.6;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }

.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: 15px; }
.prose th,
.prose td {
  text-align: left;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid rgba(239, 235, 227, .12);
  vertical-align: top;
}
.prose th {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(239, 235, 227, .5);
}

/* ------------------------------------------------------------ fin d'article --- */

.article__end {
  margin-top: 96px;
  padding-top: 44px;
  border-top: 1px solid rgba(239, 235, 227, .12);
}

.article__back {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .72);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(239, 235, 227, .22);
  transition: color .25s ease, border-color .25s ease;
}
.article__back::before { content: "←  "; }
.article__back:hover { color: var(--cream); border-bottom-color: var(--sage); }

.article__cta {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
}

.article__cta-text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.4;
  color: var(--pale);
  max-width: 22ch;
  text-wrap: pretty;
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 760px) {
  .articles { padding: 140px 0 100px; }
  .articles__head { margin-bottom: 56px; }
  .article { padding: 130px 0 100px; }
  .article__head,
  .article__body,
  .article__end,
  .article__cover { padding-left: 24px; padding-right: 24px; }
  .article__draft { margin-left: 24px; margin-right: 24px; }
  .article__cover { margin-top: 48px; }
  .article__body { margin-top: 48px; }
  .card__body { padding: 26px 24px 30px; }
  .prose { font-size: 16px; }
  .prose blockquote { padding-left: 20px; }
}