/* ==============================================================
   Mass Distractions — Shared long-form article / pillar styles
   --------------------------------------------------------------
   Loaded AFTER /css/site.css by the cornerstone page, the guides
   hub, and the six topic pillars.

   These rules were previously copy-pasted inline into every blog
   post and into why-it-works.html. New pages load them from here
   instead, so the markup ships smaller and the CSS is cacheable
   across the whole content section.

   Existing pages keep their inline copies untouched on purpose —
   changing them is a visual-regression risk with no SEO upside.
   ============================================================== */

/* ── Breadcrumbs ────────────────────────────────────────────── */
.breadcrumbs {
  max-width: 720px; margin: 0 auto; padding: 20px 24px 0;
  font-size: 13px; color: var(--gray-400);
}
.breadcrumbs a { color: var(--gray-600); text-decoration: none; }
.breadcrumbs a:hover { color: var(--z1); text-decoration: underline; }
.breadcrumbs span[aria-current] { color: var(--gray-400); }
.breadcrumbs .sep { margin: 0 6px; opacity: .6; }
.breadcrumbs-wide { max-width: 1100px; }

/* ── Article hero ───────────────────────────────────────────── */
.article-hero { padding: 40px 0 32px; text-align: center; }
.eyebrow {
  display: inline-block; background: var(--z1-bg); color: var(--z1);
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 20px;
  margin-bottom: 24px;
}
.eyebrow-blue { background: var(--z5-bg); color: var(--z5); }
.eyebrow-green { background: var(--z4-bg); color: var(--z4); }
.eyebrow-yellow { background: var(--z3-bg); color: var(--z3); }
.article-hero h1 {
  font-size: clamp(32px, 5vw, 52px); font-weight: 800;
  color: var(--gray-900); line-height: 1.1; letter-spacing: -.02em;
  margin-bottom: 20px; max-width: 800px; margin-left: auto; margin-right: auto;
}
.article-hero .lede {
  font-size: clamp(17px, 2vw, 20px); color: var(--gray-600);
  line-height: 1.6; max-width: 680px; margin: 0 auto;
}
.article-meta {
  max-width: 720px; margin: 32px auto 0; padding-bottom: 32px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-400); font-size: 14px; text-align: center;
}

/* ── Article body ───────────────────────────────────────────── */
article.content { max-width: 720px; margin: 0 auto; padding: 48px 24px 64px; }
article.content h2 {
  font-size: clamp(24px, 3.5vw, 32px); color: var(--gray-900);
  font-weight: 800; margin: 56px 0 20px; letter-spacing: -.01em; line-height: 1.2;
}
article.content h2:first-child { margin-top: 0; }
article.content h3 {
  font-size: 20px; color: var(--gray-900); font-weight: 700;
  margin: 32px 0 12px; line-height: 1.3;
}
article.content p { margin-bottom: 18px; font-size: 17px; color: var(--gray-700); line-height: 1.7; }
article.content ul, article.content ol { margin: 0 0 22px 0; padding-left: 22px; }
article.content li { margin-bottom: 8px; font-size: 17px; color: var(--gray-700); line-height: 1.7; }
article.content strong { color: var(--gray-900); font-weight: 700; }
/* Prose links only.
   This was once a bare `article.content a`, which was a bug: that selector
   scores 0-1-2 and beats `.btn-primary` (0-1-0), so it repainted the CTA
   button's label var(--z1) red ON the red button — the text vanished. It also
   overrode .toc a, .related a and .references a, which are components with
   their own colours. Scoping to direct-child prose plus the inline callout
   boxes keeps components out of range. Do NOT flatten this back to
   `article.content a`. */
article.content > p a,
article.content > ul a,
article.content > ol a,
article.content .callout a,
article.content .takeaways a,
article.content .definition a { color: var(--z1); text-decoration: underline; text-underline-offset: 2px; }
article.content > p a:hover,
article.content > ul a:hover,
article.content > ol a:hover,
article.content .callout a:hover,
article.content .takeaways a:hover,
article.content .definition a:hover { text-decoration: none; }

/* Belt and braces: buttons keep their own colour wherever they appear. */
article.content a.btn-primary   { color: #fff; text-decoration: none; }
article.content a.btn-secondary { color: var(--gray-700); text-decoration: none; }

.pullquote {
  border-left: 4px solid var(--z1); padding: 8px 0 8px 24px;
  margin: 36px 0; font-size: 22px; line-height: 1.4;
  color: var(--gray-900); font-weight: 600;
}
.callout { background: var(--z1-bg); border-radius: 12px; padding: 24px 28px; margin: 32px 0; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: #9a1f2a; }
.callout-blue { background: var(--z5-bg); }
.callout-blue strong { color: #1e3a8a; }
/* Callouts can carry a short list when the point is a set rather than a
   sentence. The end-of-article summary is always .takeaways, never this. */
.callout ul { margin: 10px 0 0; padding-left: 20px; }
.callout li { font-size: 15px; color: var(--gray-700); line-height: 1.65; margin-bottom: 7px; }
.callout li:last-child { margin-bottom: 0; }

/* ── On-this-page table of contents ─────────────────────────── */
.toc {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 22px 26px; margin: 0 0 40px;
}
.toc h2 {
  font-size: 12px !important; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gray-400);
  margin: 0 0 12px !important;
}
.toc ol { margin: 0; padding-left: 20px; }
.toc li { font-size: 15px; margin-bottom: 7px; line-height: 1.5; }
.toc a { color: var(--gray-700); text-decoration: none; }
.toc a:hover { color: var(--z1); text-decoration: underline; }

/* ── Definition block (the "what is X" answer target) ───────── */
.definition {
  border-left: 4px solid var(--z5); background: var(--z5-bg);
  border-radius: 0 12px 12px 0; padding: 22px 26px; margin: 0 0 32px;
}
.definition p { margin-bottom: 0; font-size: 18px; color: var(--gray-900); line-height: 1.65; }

/* ── CTA box ────────────────────────────────────────────────── */
.cta-box {
  background: #fff; border: 2px solid var(--z1); border-radius: 16px;
  padding: 36px 32px; margin: 48px 0; text-align: center;
  box-shadow: 0 4px 20px rgba(220,38,38,.08);
}
.cta-box h3 { color: var(--gray-900); font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.cta-box p { color: var(--gray-700); margin-bottom: 20px; }
.cta-box .small { font-size: 13px; color: var(--gray-400); margin-top: 12px; margin-bottom: 0; }

/* ── References ─────────────────────────────────────────────── */
.references { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--gray-200); }
.references h2 { font-size: 20px; margin-top: 0; }
.references ol { padding-left: 22px; }
.references li { font-size: 14px; color: var(--gray-600); margin-bottom: 12px; line-height: 1.6; }
.references a { color: var(--gray-600); text-decoration: underline; }
.references a:hover { color: var(--z1); }

/* ── Related reading ────────────────────────────────────────── */
.related { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--gray-200); }
.related h3 {
  font-size: 14px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 16px;
}
.related a {
  display: block; padding: 14px 0; color: var(--gray-900);
  font-weight: 600; font-size: 17px; border-bottom: 1px solid var(--gray-100);
  text-decoration: none;
}
.related a:hover { color: var(--z1); text-decoration: none; }
.related a:last-child { border-bottom: none; }
.related a small {
  display: block; font-weight: 400; font-size: 13px;
  color: var(--gray-400); margin-top: 3px;
}

/* ── Topic / pillar cards (guides hub, blog hub, pillar pages) ── */
.topic-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin: 32px 0 0;
}
.topic-card {
  display: block; padding: 24px 24px; background: #fff;
  border: 1.5px solid var(--gray-200); border-radius: 14px;
  text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.topic-card:hover {
  border-color: var(--z1); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06); text-decoration: none;
}
.topic-card-tag {
  display: inline-block; padding: 3px 10px; background: var(--z1-bg);
  color: var(--z1); border-radius: 12px; font-size: 11px;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 12px;
}
.topic-card h3 {
  font-size: 19px; font-weight: 800; color: var(--gray-900);
  line-height: 1.25; margin-bottom: 8px; letter-spacing: -.01em;
}
.topic-card p { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin: 0; }

/* Cluster color variants, mapped to the zone palette so the
   content clusters read the same way the task zones do. */
.topic-card.c-attention  .topic-card-tag { background: var(--z1-bg); color: var(--z1); }
.topic-card.c-digital    .topic-card-tag { background: var(--z2-bg); color: var(--z2); }
.topic-card.c-adhd       .topic-card-tag { background: var(--z3-bg); color: #8a5a00; }
.topic-card.c-psychology .topic-card-tag { background: var(--z4-bg); color: var(--z4); }
.topic-card.c-method     .topic-card-tag { background: var(--z5-bg); color: var(--z5); }

/* ── Cluster section headers ────────────────────────────────── */
.cluster { margin-top: 56px; }
.cluster:first-of-type { margin-top: 0; }
.cluster-head { border-bottom: 2px solid var(--gray-200); padding-bottom: 12px; margin-bottom: 24px; }
.cluster-head h2 {
  font-size: 22px; font-weight: 800; color: var(--gray-900);
  letter-spacing: -.01em; margin-bottom: 4px;
}
.cluster-head p { font-size: 14px; color: var(--gray-600); margin: 0; }

/* ── Key-takeaways summary box ──────────────────────────────── */
.takeaways {
  background: var(--gray-50); border-radius: 12px;
  padding: 24px 28px; margin: 40px 0;
}
.takeaways h3 {
  font-size: 13px !important; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gray-400); margin: 0 0 14px !important;
}
.takeaways ul { margin: 0; padding-left: 20px; }
.takeaways li { font-size: 15px; color: var(--gray-700); line-height: 1.65; margin-bottom: 9px; }
.takeaways li:last-child { margin-bottom: 0; }

/* ── Zone strip (reused from why-it-works) ──────────────────── */
.zone-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 24px 0 32px; }
.zone-strip > div {
  padding: 18px 10px; text-align: center; color: #fff;
  font-weight: 700; font-size: 13px; border-radius: 8px;
}
.zone-strip > div small { display: block; font-weight: 400; font-size: 10px; opacity: .9; margin-top: 3px; letter-spacing: .04em; }
.zone-strip .z1 { background: var(--z1); }
.zone-strip .z2 { background: var(--z2); }
.zone-strip .z3 { background: var(--z3); color: #3a2e00; }
.zone-strip .z4 { background: var(--z4); }
.zone-strip .z5 { background: var(--z5); }
@media (max-width: 640px) { .zone-strip { grid-template-columns: 1fr; gap: 6px; } }