/* ============================================================================
   ENDURO — INSIGHTS ARTICLE styles (shared by every insights/<slug>/ post).
   Pairs with assets/footer.css. Article pages sit TWO folders deep, so they
   link this file as ../../assets/insights-article.css and use ../../ links.
   Lean by design: nav + a clean editorial reading column. No page choreography.
============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --red: #E43338;
  --yellow: #e3ff17;
  --black: #191A1C;
  --white: #ffffff;
  --w70: rgba(255,255,255,0.7);
  --w50: rgba(255,255,255,0.5);
  --ink: #191A1C;
  --ink70: rgba(16,24,32,0.7);
  --ink55: rgba(16,24,32,0.55);
  --ink40: rgba(16,24,32,0.4);
  --hair: rgba(16,24,32,0.10);
  --max: 1440px;
  --gutter: 80px;
}
html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 104px; }   /* anchors (jump-nav) clear the fixed nav */
body {
  font-family: "Inter", sans-serif;
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.65;
  padding-top: 87px;   /* clears the fixed nav */
  /* clip (not hidden — these pages have no sticky) so a stray transform/sub-pixel
     layer can never add a phantom horizontal scroll at narrow widths */
  overflow-x: clip;
}
img { display: block; max-width: 100%; }

/* ─── ARTICLE ─── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.art-head { padding: 14px 0 0; }   /* pulled up so the breadcrumb row lines up with the back arrow (2026-06-18) */
/* BREADCRUMBS — visible trail (Home › Insights › topic) + a matching
   BreadcrumbList JSON-LD per page for SEO / rich-result eligibility. */
.art-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink40); margin-bottom: 30px;
}
.art-crumbs a { color: var(--ink40); text-decoration: none; transition: color 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .art-crumbs a:hover { color: var(--red); } }
.art-crumbs .sep { opacity: 0.5; }
.art-crumbs [aria-current="page"] { color: var(--ink70); }
/* (2026-07-22) The fixed floating BACK BUTTON was removed from every insights article —
   markup, its inline history.back() script, and all of these styles. It was the last
   floating back control on the site; the portfolio detail pages dropped theirs on
   2026-07-15. Nav + breadcrumbs carry the way back. */
/* EYEBROW — the red rule sits ABOVE the label so both align flush-left with the
   title (2026-06-18: the old inline handle pushed the text out of line). */
.art-eyebrow {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--red); line-height: 1;
}
.art-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--red); }
.art-title {
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.98;
  font-size: clamp(32px, 5vw, 64px); color: var(--black); margin: 28px 0 26px; max-width: 22ch;   /* 18→22ch: the tight measure was manufacturing lone-word title tails ("Demystified", "Lab") even where text-wrap:balance couldn't rescue them (2026-07-10 orphan pass) */
}
.art-dek {
  font-size: clamp(17px, 2vw, 21px); font-weight: 300; line-height: 1.55; color: var(--ink70); max-width: 60ch;
}
.art-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--hair); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink55);
}
.art-meta b { color: var(--black); font-weight: 600; }
.art-hero { margin: 56px 0 64px; aspect-ratio: 21 / 9; overflow: hidden; background: #e9eaec; }
.art-hero img { width: 100%; height: 100%; object-fit: cover; }
/* ─── BODY + SEO SIDEBAR (2026-06-18) — reading column anchored to the LEFT
   gutter (kept narrow for readability) with a sticky SEO rail in the right gutter:
   key takeaways, on-this-page jump nav, relevant topic keywords, a slim CTA. ─── */
.art-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 340px);
  gap: clamp(48px, 5vw, 84px);
  align-items: start;
}
/* widened a touch + roomier rail so the text↔rail gutter reads intentional, not empty (2026-06-18) */
.art-body { max-width: 820px; margin: 0; padding-bottom: 24px; }
.art-body > p { font-size: 17px; line-height: 1.74; color: #23303a; margin: 0 0 26px; }
.art-body h2 {
  font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05;
  font-size: clamp(22px, 2.6vw, 30px); color: var(--black); margin: 64px 0 18px;
}
.art-body h3 { font-weight: 700; font-size: 18px; color: var(--black); margin: 40px 0 12px; }
.art-body ul, .art-body ol { margin: 0 0 22px; padding-left: 22px; }
.art-body li { font-size: 17px; line-height: 1.62; color: #23303a; margin-bottom: 9px; }
.art-body strong { color: var(--black); font-weight: 600; }
.art-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.art-lead { font-size: 19px !important; line-height: 1.6 !important; color: var(--black) !important; }
.art-pull {
  border-left: 3px solid var(--red); padding: 4px 0 4px 26px; margin: 52px 0;
  font-size: 22px; font-weight: 600; line-height: 1.35; color: var(--black);
}
.art-note {
  margin-top: 44px; padding: 22px 24px; background: #f5f6f7; border: 1px solid var(--hair);
  font-size: 13px; line-height: 1.6; color: var(--ink55);
}

/* ─── SEO SIDEBAR RAIL ─── */
.art-aside {
  position: sticky; top: 110px; align-self: start;
  display: flex; flex-direction: column; gap: 36px;
  padding-top: 4px;
}
.aside-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink40); margin-bottom: 16px;
}
.aside-label::before { content: ""; width: 16px; height: 2px; background: var(--red); flex-shrink: 0; }
/* key takeaways */
.aside-takeaways { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.aside-takeaways li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: #23303a; }
.aside-takeaways li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--red); }
/* on-this-page jump nav */
.aside-toc { list-style: none; display: flex; flex-direction: column; gap: 11px; counter-reset: toc; }
.aside-toc a { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--ink70); text-decoration: none; transition: color 0.2s ease; }
.aside-toc a::before { counter-increment: toc; content: "0" counter(toc); color: var(--ink40); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
.aside-toc a:hover { color: var(--red); }
.aside-toc a:hover::before { color: var(--red); }
}
/* topic keyword chips */
.aside-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.aside-tags span { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink55); border: 1px solid var(--hair); border-radius:0; padding: 5px 11px; }
/* slim CTA */
.aside-cta { border-top: 1px solid var(--hair); padding-top: 22px; }
.aside-cta p { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--black); margin-bottom: 12px; }
.aside-cta a { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); text-decoration: none; transition: gap 0.25s ease; }
@media (hover: hover) and (pointer: fine) { .aside-cta a:hover { gap: 13px; } }

/* ─── NEXT ARTICLE (Abdera-style toggle, matches the portfolio detail pages) ─── */
.nextrail { margin-top: clamp(36px, 4vw, 52px); padding-bottom: clamp(48px, 6vw, 88px); border-top: 1px solid var(--hair); padding-top: clamp(36px, 4vw, 52px); }
.next-link { display: flex; align-items: center; justify-content: space-between; gap: 32px; text-decoration: none; color: var(--black); }
.next-kicker { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink40); margin-bottom: 12px; }
.next-name { display: inline-block; position: relative; font-size: clamp(24px, 3.2vw, 40px); font-weight: 900; line-height: 1.0; letter-spacing: -0.035em; text-transform: uppercase; max-width: 24ch; }   /* 20→24ch: the 20ch cap manufactured orphans ("ANGUS", "HONESTLY") even with room (2026-07-10 orphan pass) */
.next-name::after { content: ""; position: absolute; left: 0; bottom: 2px; height: 3px; width: 0; background: var(--red); transition: width 0.4s cubic-bezier(0.22,1,0.36,1); }
@media (hover: hover) and (pointer: fine) { .next-link:hover .next-name::after { width: 100%; } }
.next-sub { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink40); }
.next-arrow { flex-shrink: 0; width: 52px; height: 52px; border-radius:0; background: var(--white); box-shadow: 0 6px 20px rgba(16,24,32,0.05); display: grid; place-items: center; color: var(--black); transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.next-arrow svg { width: 22px; height: 22px; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
@media (hover: hover) and (pointer: fine) {
.next-link:hover .next-arrow { background: var(--red); color: var(--white); }
.next-link:hover .next-arrow svg { transform: translateX(4px); }
}

/* mid widths: the gutter (48px) is too thin for the 52px circle → tuck + shrink */
@media (max-width: 1180px) {
  :root { --gutter: 48px; }
}
/* tablet: sidebar narrows but stays alongside */
@media (max-width: 1100px) {
  .art-layout { gap: 40px; grid-template-columns: minmax(0, 1fr) clamp(220px, 28vw, 260px); }
  .art-body { max-width: none; }
}
@media (max-width: 960px) {
  :root { --gutter: 32px; }
  .art-hero { aspect-ratio: 16 / 10; }
  /* no edge margin to clear content → hide; nav + browser-back cover the return */
  /* single column — the SEO rail unsticks and flows under the article */
  .art-layout { grid-template-columns: 1fr; gap: 0; }
  .art-aside {
    position: static; margin-top: 48px; padding-top: 32px;
    border-top: 1px solid var(--hair); gap: 32px;
  }
  .next-link { flex-direction: row; }
}
@media (max-width: 560px) {
  .next-link { flex-direction: column; align-items: flex-start; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Related-project pointer at the end of a case-study article — blended link
   (no underline / no colour shift; only the → cues it). 2026-06-19. */
.art-body .art-related { margin: 30px 0 0; font-size: 14px; color: var(--ink40); }
.art-body a.art-proj-link { color: inherit; text-decoration: none; transition: opacity 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .art-body a.art-proj-link:hover { opacity: 0.6; } }