/* Agile Labs — Insights article template.
   One template for both types. The page is a wide canvas; the writing runs in a narrow
   column, and figures, pull quotes and the hero are the only things allowed out of it. */

.artx-page{background:#fff}

/* --- Header ------------------------------------------------------------- */
.artx-head{padding:clamp(40px,5vw,72px) var(--gutter) 0}
.artx-head__in{max-width:1180px;margin:0 auto}
.artx-kicker{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oxblood);margin:0}
.artx-title{font-size:clamp(34px,4.6vw,60px);font-weight:600;letter-spacing:-.022em;
  line-height:1.06;margin:18px 0 0;max-width:20ch}
.artx-sub{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--muted);
  margin:20px 0 0;max-width:62ch}
.artx-meta{margin:22px 0 0;font-size:14px;color:var(--muted-2);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.artx-meta i{font-style:normal;color:var(--rule)}

/* --- Hero and the summary beside it -------------------------------------- */
.artx-hero{padding:clamp(28px,3.4vw,44px) var(--gutter) 0}
.artx-hero__in{max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,68fr) minmax(0,30fr);gap:clamp(24px,3vw,44px)}
.artx-hero__shot{border-radius:4px;overflow:hidden;background:#F1EEE9;aspect-ratio:16/9}
.artx-hero__shot img{width:100%;height:100%;object-fit:cover;display:block}
.artx-tldr{background:#F7F5F1;padding:24px 24px 26px;border-radius:4px}
.artx-tldr h2{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 14px}
.artx-tldr ul{margin:0;padding-left:18px}
.artx-tldr li{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0 0 11px}
.artx-tldr li:last-child{margin-bottom:0}

/* --- The body grid -------------------------------------------------------
   Three named tracks: the reading column, a breakout for figures, and full width. */
.artx{padding:clamp(38px,4.6vw,64px) var(--gutter) 0}
/* The reading column starts where the hero starts. Figures and pull quotes run right,
   into the margin the column leaves behind. */
.artx__in{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:[body-start] minmax(0,730px) [body-end] minmax(0,1fr) [break-end]}
.artx__in > *{grid-column:body-start/body-end}
.artx__in > .artx-break{grid-column:body-start/break-end}
.artx__in > .artx-full{grid-column:body-start/break-end}

.artx p{font-size:18px;line-height:1.62;color:#1D1A19;margin:0 0 20px}
.artx a{color:var(--oxblood);text-decoration:underline;text-underline-offset:3px}
.artx h2{font-size:clamp(23px,2vw,27px);font-weight:600;letter-spacing:-.015em;
  line-height:1.22;margin:44px 0 16px}
/* A heading that asks the reader's own question carries more weight than one that labels. */
.artx h2.q{font-size:clamp(26px,2.4vw,32px);margin-top:52px}
.artx h3{font-size:19px;font-weight:600;line-height:1.3;margin:30px 0 12px}
.artx ul,.artx ol{margin:0 0 22px;padding-left:24px}
.artx li{font-size:18px;line-height:1.6;color:#1D1A19;margin:0 0 12px}
.artx ol li b,.artx ul li b{font-weight:600}
.artx ol li p{font-size:16.5px;color:var(--muted);margin:6px 0 0}
.artx blockquote{margin:26px 0;padding-left:22px;border-left:2px solid var(--oxblood)}
.artx blockquote p{font-size:19px;line-height:1.55;color:var(--ink-2);margin:0}

/* --- Pull quote: out of the column, into the right margin ----------------- */
.artx__in > .artx-pull{grid-column:body-start/break-end;margin:34px 0 38px;
  padding:22px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:end}
.artx-pull p{font-size:clamp(22px,2.2vw,29px);line-height:1.28;font-weight:500;
  letter-spacing:-.015em;margin:0;max-width:22ch;text-align:right}
.artx-pull cite{display:block;margin-top:12px;font-style:normal;font-size:13px;
  color:var(--muted-2);text-align:right}

/* --- Figures -------------------------------------------------------------- */
.artx-fig{margin:34px 0 38px}
.artx-fig img{width:100%;display:block;border-radius:4px;background:#F1EEE9}
.artx-fig figcaption{margin-top:12px;font-size:13px;color:var(--muted-2);
  padding-top:10px;border-top:1px solid var(--rule)}
.artx-fig figcaption b{font-weight:600;color:var(--ink-2)}
/* A figure drawn in HTML rather than supplied as an image. */
.artx-panel{background:#F7F5F1;border-radius:4px;padding:clamp(18px,2vw,26px)}
.artx-panel__k{font-size:15px;font-weight:600;margin:0 0 16px}
.artx-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0 10px;align-items:stretch}
.artx-step{background:#fff;border:1px solid var(--rule);border-radius:3px;padding:14px 14px 16px;position:relative}
.artx-step b{display:block;font-size:13.5px;font-weight:600;margin:0 0 8px}
.artx-step span{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
.artx-step + .artx-step::before{content:"";position:absolute;left:-11px;top:calc(50% - 5px);
  width:8px;height:8px;border-top:1.4px solid var(--faint);border-right:1.4px solid var(--faint);
  transform:rotate(45deg)}
.artx-table{width:100%;border-collapse:collapse;font-size:16px}
.artx-table th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:2px 28px 12px 0;border-bottom:2px solid var(--ink);
  vertical-align:bottom}
.artx-table td{padding:15px 28px 15px 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;
  line-height:1.55;vertical-align:top}
.artx-table th:last-child,.artx-table td:last-child{padding-right:0}
.artx-table tr:last-child td{border-bottom:0}
.artx-code{background:#221C1B;color:#F3EFE7;border-radius:4px;padding:20px 22px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.6}

/* --- Article information and sources -------------------------------------- */
.artx__in > .artx-end{grid-column:body-start/break-end}
.artx-end{margin-top:56px;padding-top:26px;border-top:1px solid var(--ink);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.artx-end h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 14px}
.artx-end p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 6px}
.artx-end b{color:var(--ink-2);font-weight:600}
.artx-end ol{margin:0;padding-left:18px}
.artx-end li{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 7px}

/* --- Related --------------------------------------------------------------- */
.artx-rel{margin-top:64px;padding:clamp(34px,4vw,54px) var(--gutter) clamp(50px,6vw,80px);
  border-top:1px solid var(--rule)}
.artx-rel__in{max-width:1180px;margin:0 auto}
.artx-rel__bar{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.artx-rel__bar h2{font-size:21px;font-weight:600;margin:0}
.artx-rel__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px);margin-top:26px}
.artx-rel__grid a{color:inherit;text-decoration:none;display:block}
.artx-rel__shot{aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:#F1EEE9;margin-bottom:14px}
.artx-rel__shot img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.artx-rel__k{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin:0}
.artx-rel__grid h3{font-size:16.5px;font-weight:600;line-height:1.3;margin:8px 0 0}
.artx-rel__grid a:hover h3{color:var(--oxblood)}
.artx-rel__d{font-size:12.5px;color:var(--muted-2);margin:10px 0 0}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width:1100px){
  .artx__in{grid-template-columns:[body-start] minmax(0,660px) [body-end] minmax(0,1fr) [break-end]}
  .artx-rel__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .artx-hero__in{grid-template-columns:1fr}
  .artx__in{grid-template-columns:[body-start] minmax(0,1fr) [body-end] 0 [break-end]}
  .artx-pull{justify-items:start}
  .artx-pull p,.artx-pull cite{text-align:left}
  .artx-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .artx-step + .artx-step::before{display:none}
  .artx-end{grid-template-columns:1fr}
}
@media (max-width:620px){
  .artx-steps{grid-template-columns:1fr}
  .artx-rel__grid{grid-template-columns:1fr}
}

/* A table wider than the reading column scrolls inside itself rather than the page. */
.artx-tablewrap{overflow-x:auto;margin:26px 0 10px;border:1px solid var(--rule);
  padding:18px clamp(18px,2.4vw,26px) 8px}
.artx-tablewrap .artx-table{min-width:520px;margin:0}
.artx-table td:first-child{font-weight:500}
.artx-fig--table figcaption{margin-top:12px}