/* ═══════════════════════════════════════════════════════════════
   IGNIFY:HR — shared article (blog) styles
   Loaded by blog-*.html AFTER assets/site.css.
   Per-article visual modules (kanban boards, process flows, stats)
   stay inline in each blog file.
   ═══════════════════════════════════════════════════════════════ */

/* ─── ARTICLE HEADER ─────────────────────────────────────────── */
.article-header {
  padding-top: 64px;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  border-bottom: var(--bw) solid var(--line-strong);
  position: relative;
  overflow: hidden;
}

.article-header::before {
  content: '';
  position: absolute;
  top: -180px; left: -180px;
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(237,98,199,0.09) 0%, transparent 68%);
  pointer-events: none;
}

.article-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.article-back {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  text-decoration: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  transition: color 0.15s ease;
}
.article-back:hover { color: #fff; }
.article-back svg { transition: transform 0.2s ease; }
.article-back:hover svg { transform: translateX(-3px); }

.article-meta-right { display: flex; align-items: center; gap: 20px; }

.article-tag {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #000;
  background: var(--pink); padding: 6px 10px;
  border: var(--bw) solid var(--pink);
  line-height: 1;
}
.article-date {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--label);
}

.article-title-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px var(--pad) 52px;
  position: relative;
  z-index: 1;
}

.article-kicker {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pink);
  margin-bottom: 24px;
  border: var(--bw) solid rgba(237,98,199,0.4);
  width: fit-content; padding: 7px 11px; line-height: 1.4;
}
html.js-anim .article-kicker { opacity: 0; transform: translateY(16px); }

.article-h1 {
  font-size: clamp(40px, 5vw, 80px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: #fff;
  text-transform: uppercase;
  max-width: 900px;
}
.article-h1 em { font-style: normal; color: var(--pink); }

.article-h1-line { display: block; overflow: hidden; }
.article-h1-line span { display: block; }
html.js-anim .article-h1-line span { transform: translateY(110%); }

.article-subtitle {
  margin-top: 28px;
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.65;
  max-width: 560px;
}
html.js-anim .article-subtitle { opacity: 0; transform: translateY(16px); }

/* ─── ARTICLE BODY / LAYOUT ──────────────────────────────────── */
.article-body {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0 80px;
  padding: 80px 0 120px;
  align-items: start;
}

@media (max-width: 960px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { display: none; }
}

/* ─── CONTENT COLUMN ─────────────────────────────────────────── */
.article-content p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.78;
  color: var(--text);
  margin-bottom: 26px;
  max-width: 68ch; /* readable measure */
}

.article-content h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin: 64px 0 24px;
  max-width: 24ch;
}

.article-content h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 44px 0 16px;
}
/* card/module titles converted from <p> to <h3>/<h4> keep their
   in-card layout: any classed h3/h4 loses prose margins */
.article-content h3[class],
.article-content h4[class] { margin: 0; font-size: inherit; }

.article-content em {
  font-style: normal;
  color: var(--pink);
}

/* pull quote */
.pull-quote {
  border: var(--bw) solid var(--line);
  border-left: 4px solid var(--pink);
  padding: 24px 32px;
  margin: 48px 0;
  background: rgba(237,98,199,0.04);
  position: relative;
}
.pull-quote::before {
  content: 'QUOTE';
  position: absolute;
  top: -8px; right: 12px;
  font-family: var(--mono);
  font-size: 9px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--label);
  background: var(--bg);
  padding: 2px 6px;
}
.pull-quote p {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.45 !important;
  color: var(--text-hi) !important;
  margin-bottom: 0 !important;
  max-width: none !important;
}

/* closing statement */
.article-closing {
  margin-top: 72px;
  padding: 48px;
  border: var(--bw) solid var(--line-strong);
  position: relative;
  overflow: hidden;
}
.article-closing::before {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(237,98,199,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.article-closing-label {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--label); margin-bottom: 20px;
}
.article-closing-text {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 32px;
  position: relative; z-index: 1;
  max-width: none !important;
}
.article-closing-text em { font-style: normal; color: var(--pink); }
/* .article-closing-cta button spec lives in site.css */

/* ─── SIDEBAR (technical panel) ──────────────────────────────── */
.article-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  border: var(--bw) solid var(--line-strong);
}
/* internal blocks: hairline dividers only; outer 2px frame above */
.article-sidebar > * {
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
}
.article-sidebar > *:last-child { border-bottom: none !important; }

.sidebar-brand-shape {
  position: relative;
  background: #000;
  padding: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sidebar-brand-shape img {
  width: 100%;
  max-width: 220px;
  display: block;
  opacity: 0.9;
  animation: shapeFloat 6s ease-in-out infinite alternate;
}
@keyframes shapeFloat {
  0%   { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1.03) rotate(1deg); }
}
.sidebar-brand-label {
  position: absolute;
  bottom: 20px; left: 20px;
  font-family: var(--mono);
  font-size: 9px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--label);
}

.sidebar-service { padding: 28px; }
.sidebar-service-tag {
  font-family: var(--mono);
  font-size: 9px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pink); margin-bottom: 12px;
}
.sidebar-service-name {
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
  color: #fff; line-height: 1.2; margin-bottom: 14px;
}
.sidebar-service-name em { font-style: normal; color: var(--pink); }
.sidebar-service-body {
  font-size: 13px; font-weight: 400; color: var(--muted);
  line-height: 1.6; margin-bottom: 20px;
}
/* .sidebar-cta button spec lives in site.css; compact variant here */
.sidebar-cta { padding: 10px 20px; min-height: 40px; font-size: 10px; }

.sidebar-related { padding: 24px 28px; }
.sidebar-related-label,
.sidebar-timeline-label,
.sidebar-formula-label {
  font-family: var(--mono) !important;
  font-size: 9px !important; font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--label) !important;
  margin-bottom: 16px !important;
}
.sidebar-related a p:first-child { color: var(--text) !important; }
.sidebar-related a:hover p:first-child { color: var(--pink) !important; }
.sidebar-related a p:last-child { color: var(--label) !important; }

.sidebar-timeline { padding: 24px 28px; }
.timeline-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.timeline-row:last-child { border-bottom: none; }
.timeline-dot {
  width: 6px; height: 6px;
  background: var(--pink); flex-shrink: 0;
}
.timeline-text {
  font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.4;
}
.timeline-text strong { color: var(--text-hi); font-weight: 600; }

/* formula block used by several blogs */
.sidebar-formula { padding: 24px 28px; }
.sidebar-formula-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.sidebar-formula-row:last-child { border-bottom: none; }
.sidebar-formula-row strong { color: var(--text-hi); }
.sidebar-formula-num {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; color: var(--pink);
  flex-shrink: 0;
}

/* sidebar icon block (pulsing brand image) used by some blogs */
.sidebar-icon-block {
  position: relative;
  background: #000;
  padding: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sidebar-icon-block img {
  width: 100%; max-width: 220px; display: block; opacity: 0.9;
  animation: shapeFloat 6s ease-in-out infinite alternate;
}