/* ==========================================================================
   Anthēs — Insights article
   No Figma frame exists for this page. Built from the site's own tokens and
   components: light shell like the FAQ hero, DM Sans, one marigold emphasis
   word per section heading, the shared header/footer. Pages are generated
   by tools/insights/build.py from engagements/insights-2026-10/03-production-en.md.
   ========================================================================== */

.article-page { background: var(--shell-bg); }

/* Reading column: ~68 characters at 18px */
.acol {
  width: min(680px, 100% - (2 * var(--gutter)));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- header */
.ahead { padding: 64px 0 40px; }

.ahead__back {
  display: inline-block;
  margin-bottom: 40px;
  font-size: 14px;
  font-weight: var(--w-bold);
  color: var(--ink-70);
}
.ahead__back:hover { color: var(--marigold); }

.ahead__kicker {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--marigold);
}

.ahead__title {
  margin-top: 18px;
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 1.15;
  letter-spacing: -0.62px;
  color: var(--ink);
  text-wrap: balance;
}

.ahead__lede {
  margin-top: 22px;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink-70);
}

.ahead__meta {
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--ink-40);
}

.ahero {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin: 8px auto 0;
}
.ahero img {
  width: 100%;
  height: auto;              /* the height attribute would otherwise win over aspect-ratio */
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: 14px;
}

/* ------------------------------------------------------------------ body */
.abody { padding: 64px 0 24px; }

.abody p,
.abody li {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}
/* One rhythm between every block (paragraph, list, example email);
   headings keep their larger space above. */
.abody .acol > * + * { margin-top: 20px; }
.abody .acol > h2 { margin-top: 56px; }

.abody h2 {
  margin: 56px 0 0;
  font-size: 30px;
  font-weight: var(--w-regular);
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.abody h2 strong { font-weight: var(--w-bold); color: var(--marigold); }

.abody ul,
.abody ol { padding-left: 1.3em; }
.abody ul { list-style: disc; }
.abody ol { list-style: decimal; }
.abody li + li { margin-top: 12px; }
.abody li::marker { color: var(--marigold); font-weight: var(--w-bold); }

.abody blockquote {
  padding: 26px 28px;
  background: var(--paper);
  border: 1px solid var(--ink-15);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(35, 31, 32, 0.06);
}
.abody blockquote p { font-size: 16.5px; line-height: 1.65; }
.abody blockquote p + p { margin-top: 12px; }

/* ------------------------------------------------------------------- FAQ */
.afaq { padding: 48px 0 96px; }

.afaq__title {
  font-size: 30px;
  font-weight: var(--w-regular);
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 16px;
}
.afaq__title strong { font-weight: var(--w-bold); color: var(--marigold); }

.afaq details { border-bottom: 1px solid var(--ink-15); }
.afaq details:first-of-type { border-top: 1px solid var(--ink-15); }

.afaq summary {
  position: relative;
  padding: 22px 44px 22px 0;
  font-size: 18px;
  font-weight: var(--w-bold);
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.afaq summary::-webkit-details-marker { display: none; }
.afaq summary:hover { color: var(--marigold); }
.afaq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 180ms ease;
}
.afaq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.afaq summary:focus-visible { outline: 2px solid var(--marigold); outline-offset: 4px; }

.afaq__answer { padding: 0 0 24px; }
.afaq__answer p { font-size: 17px; line-height: 1.7; color: var(--ink-70); }

/* ------------------------------------------------------------ newsletter */
.anews { background: #000; padding: 96px 0; color: #fff; }

.anews__inner {
  width: min(680px, 100% - (2 * var(--gutter)));
  margin-inline: auto;
  text-align: center;
}

.anews__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--marigold);
}

.anews__title {
  margin-top: 16px;
  font-size: 44px;
  font-weight: var(--w-regular);
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.anews__title strong { font-weight: var(--w-bold); color: var(--marigold); }

.anews__text {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.anews__form {
  margin: 32px auto 0;
  max-width: 520px;
  display: flex;
  gap: 12px;
}
.anews__form label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.anews__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 18px;
  background: transparent;
  border: 1px solid #393939;
  border-radius: var(--radius-pill);
  font-size: 16px;
  color: #fff;
}
.anews__input::placeholder { color: #8f8d8e; }
.anews__input:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
.anews__form .btn { flex: 0 0 auto; }

/* Mailchimp's bot trap: kept out of sight, never focusable */
.anews__trap { position: absolute; left: -5000px; }
.anews__status { margin-top: 14px; min-height: 22px; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, 0.85); }
.anews__status[data-kind="success"] { color: var(--sun-yellow); }
.anews__status[data-kind="error"] { color: #ff8a8a; }

.anews__consent {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------- keep reading */
.amore { padding: 96px 0 112px; }

.amore__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
}

.amore__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--marigold);
}

.amore__grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.rcard {
  background: var(--paper);
  border: 1px solid var(--ink-15);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.rcard:hover,
.rcard:focus-within { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(35, 31, 32, 0.08); }
.rcard > a { display: flex; flex-direction: column; height: 100%; }
.rcard img { width: 100%; height: 200px; object-fit: cover; }
.rcard__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1 1 auto; }
.rcard__kicker {
  font-size: 11.5px;
  font-weight: var(--w-bold);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-40);
}
.rcard__title { font-size: 20px; font-weight: var(--w-bold); line-height: 1.3; color: var(--ink); }
.rcard__read { margin-top: auto; font-size: 13.5px; font-weight: var(--w-bold); color: var(--ink); }
.rcard > a:hover .rcard__read { color: var(--marigold); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .ahead { padding-top: 40px; }
  .ahead__title { font-size: clamp(32px, 6vw, 44px); }
  .ahead__lede { font-size: 19px; }
  .ahero img { aspect-ratio: 16 / 9; }
  .abody h2, .afaq__title { font-size: 25px; }
  .anews { padding: 72px 0; }
  .anews__title { font-size: clamp(30px, 6vw, 40px); }
  .amore { padding: 72px 0 88px; }
}

@media (max-width: 640px) {
  .abody p, .abody li { font-size: 17px; }
  .anews__form { flex-direction: column; }
  .amore__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .rcard, .afaq summary::after { transition: none; }
  .rcard:hover, .rcard:focus-within { transform: none; }
}

/* ---------------------------------------------------------- list page */
.ilist { padding: 72px 0 112px; }
.ilist__inner {
  width: min(760px, 100% - (2 * var(--gutter)));
  margin: 0 auto 0 max(var(--gutter), (100% - var(--content)) / 2);
}
.ilist__title {
  margin-top: 18px;
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 1.15;
  letter-spacing: -0.62px;
  color: var(--ink);
}
.ilist__title strong { font-weight: var(--w-bold); color: var(--marigold); }
.ilist__grid {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.rcard__desc { font-size: 15px; line-height: 1.55; color: var(--ink-70); }
.ilist .rcard__title { font-size: 21px; }

@media (max-width: 1000px) {
  .ilist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ilist { padding: 48px 0 80px; }
  .ilist__title { font-size: clamp(32px, 8vw, 40px); }
  .ilist__grid { grid-template-columns: minmax(0, 1fr); }
}