/* Shared styles for prodct insight detail pages */
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); }
*::selection { background: var(--prodct-500); color: #fff; }
body.dark { --bg: #0A0907; --bg-elevated: #141210; --bg-muted: #1A1814; --fg: #E7E2D5; --fg-strong: #FAF8F4; --fg-muted: #9C9585; --fg-subtle: #6E6858; --border: #2A2620; --border-strong: #3A352D; }
a { color: inherit; }

/* BREADCRUMB */
.crumbWrap { padding: 24px 40px 0; }
.crumb { max-width: 820px; margin: 0 auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.02em; text-transform: uppercase; }
.crumb a { color: var(--fg-muted); text-decoration: none; }
.crumb a:hover { color: var(--fg-strong); }
.crumb .sep { color: var(--fg-subtle); margin: 0 8px; }

/* ARTICLE HEADER */
.artHead { padding: 32px 40px 0; }
.artHeadInner { max-width: 820px; margin: 0 auto; }
.artBadgeRow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.typeBadge { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; border-radius: 3px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.typeBadge.blog { background: var(--prodct-100); color: var(--prodct-700); }
.typeBadge.news { background: var(--bone-200); color: var(--bone-700); }
.typeBadge.event { background: var(--labs-100); color: var(--labs-700); }
.typeBadge.press { background: var(--bone-100); color: var(--bone-600); border: 1px solid var(--bone-300); }
.typeBadge.report { background: var(--elements-100); color: var(--elements-700); }
.typeBadge.case { background: var(--cx-100); color: var(--cx-700); }
.typeBadge.cxTag { background: var(--cx-100); color: var(--cx-700); border: 1px solid var(--cx-300); }
.typeBadge.labsTag { background: var(--labs-100); color: var(--labs-700); border: 1px solid var(--labs-300); }
.typeBadge.elementsTag { background: var(--elements-100); color: var(--elements-700); border: 1px solid var(--elements-300); }
.typeBadge.skillsTag { background: var(--bone-200); color: var(--bone-700); border: 1px solid var(--bone-400); }
.eventStatus { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.eventStatus .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--prodct-500); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.artTitle { font-size: clamp(44px, 6vw, 84px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; margin: 22px 0 0; color: var(--fg-strong); }
.artTitle em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--prodct-500); }
.artLede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--fg-muted); margin: 24px 0 32px; max-width: 720px; font-weight: 300; letter-spacing: -0.005em; }
.byline { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-subtle); letter-spacing: 0.02em; flex-wrap: wrap; }
.bylineAuthor { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.bylineAvatar { width: 28px; height: 28px; border-radius: 50%; background: var(--prodct-700); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.02em; }
.byline span.dot { color: var(--fg-subtle); }

/* HERO IMAGE */
.heroImg { padding: 40px 40px 0; }
.heroImgInner { max-width: 1100px; margin: 0 auto; aspect-ratio: 16/9; position: relative; overflow: hidden; border-radius: 8px; background: var(--bg-muted); }
.heroImgInner img { width: 100%; height: 100%; object-fit: cover; filter: url(#duotone-prodct); display: block; }
.heroImgInner::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); mix-blend-mode: multiply; opacity: 0.4; }
.heroCaption { max-width: 1100px; margin: 12px auto 0; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); text-align: right; letter-spacing: 0.02em; }

/* BODY */
.artBody { padding: 56px 40px 64px; }
.artBodyInner { max-width: 720px; margin: 0 auto; font-size: 18.5px; line-height: 1.65; color: var(--fg); }
.artBodyInner > p { margin: 0 0 22px; }
.artBodyInner > p:first-child::first-letter {
  font-family: var(--font-serif); font-size: 5.4em; line-height: 0.85; float: left; padding: 8px 12px 0 0; color: var(--fg-strong); font-weight: 500;
}
.artBodyInner h2 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: var(--fg-strong); margin: 56px 0 18px; }
.artBodyInner h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--prodct-500); }
.artBodyInner h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--fg-strong); margin: 36px 0 12px; }
.artBodyInner ul, .artBodyInner ol { padding-left: 22px; margin: 0 0 22px; }
.artBodyInner ul li, .artBodyInner ol li { margin: 0 0 10px; }
.artBodyInner strong { color: var(--fg-strong); font-weight: 600; }
.artBodyInner a { color: var(--prodct-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.dark .artBodyInner a { color: var(--prodct-300); }

/* PULL QUOTE */
.pullQuote { margin: 40px -40px; padding: 36px 40px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-muted); }
.pullQuote .qm { font-family: var(--font-serif); font-size: 64px; line-height: 0.5; color: var(--prodct-500); display: block; }
.pullQuote .qBody { font-family: var(--font-serif); font-style: italic; font-size: 28px; line-height: 1.3; color: var(--fg-strong); margin: 4px 0 14px; letter-spacing: -0.015em; font-weight: 400; }
.pullQuote .qAttr { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted); letter-spacing: 0.02em; text-transform: uppercase; }

/* INLINE IMAGE */
.inlineImg { margin: 40px -80px; aspect-ratio: 16/9; position: relative; overflow: hidden; border-radius: 8px; background: var(--bg-muted); }
.inlineImg img { width: 100%; height: 100%; object-fit: cover; filter: url(#duotone-prodct); display: block; }
.inlineImg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); mix-blend-mode: multiply; opacity: 0.4; }
.inlineImgCaption { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); margin: 8px 0 0 4px; letter-spacing: 0.02em; }

/* CALLOUT */
.callout { background: var(--prodct-100); border: 1px solid var(--prodct-300); border-radius: 8px; padding: 24px 28px; margin: 32px 0; }
body.dark .callout { background: rgba(11, 124, 92, 0.12); border-color: rgba(31, 168, 124, 0.4); }
.callout .calloutEy { font-family: var(--font-mono); font-size: 11px; color: var(--prodct-700); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
body.dark .callout .calloutEy { color: var(--prodct-300); }
.callout p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--fg-strong); }

/* DATA TABLE */
.dataTable { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 14.5px; }
.dataTable th, .dataTable td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.dataTable th { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.dataTable td strong { color: var(--fg-strong); }
.dataTable tr:hover td { background: var(--bg-muted); }

/* STAT GRID */
.statGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0; }
.statCard { padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-muted); }
.statN { font-family: var(--font-serif); font-size: 38px; font-weight: 500; color: var(--fg-strong); letter-spacing: -0.03em; line-height: 1; }
.statN em { font-family: var(--font-serif); font-style: italic; color: var(--prodct-500); }
.statL { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 8px; }

/* ARTICLE FOOTER */
.artEnd { padding: 0 40px 64px; }
.artEndInner { max-width: 720px; margin: 0 auto; padding: 32px 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.endTags { display: flex; gap: 8px; flex-wrap: wrap; }
.endTags .tag { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; letter-spacing: 0.02em; }
.shareRow { display: flex; gap: 14px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.02em; }
.shareRow a { text-decoration: none; }
.shareRow a:hover { color: var(--fg-strong); }

/* CTA PANEL */
.ctaPanel { background: var(--prodct-900); color: #fff; padding: 64px 40px; }
.ctaPanelInner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.ctaPanelEy { font-family: var(--font-mono); font-size: 12px; color: var(--prodct-300); letter-spacing: 0.04em; text-transform: uppercase; }
.ctaPanelH { font-size: clamp(28px, 3.4vw, 42px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; margin: 12px 0 14px; color: #fff; }
.ctaPanelH em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--prodct-300); }
.ctaPanelLede { color: rgba(255,255,255,0.78); font-size: 16px; line-height: 1.55; max-width: 540px; margin: 0; }
.ctaPanelBtns { display: flex; gap: 12px; }
.ctaPanelBtn { background: #fff; color: var(--prodct-900); padding: 14px 22px; border-radius: 6px; text-decoration: none; font-weight: 500; font-size: 14px; }
.ctaPanelBtn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }

/* RELATED */
.related { padding: 64px 40px; border-top: 1px solid var(--border); }
.relatedInner { max-width: 1100px; margin: 0 auto; }
.relatedHead { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.relatedH { font-size: 22px; font-weight: 500; color: var(--fg-strong); margin: 0; letter-spacing: -0.015em; }
.relatedMeta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); }
.relGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.relCard { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; padding-bottom: 16px; }
.relCard:hover .relTitle { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.relCard .imgFrame { aspect-ratio: 16/10; overflow: hidden; border-radius: 4px; background: var(--bg-muted); position: relative; }
.relCard .imgFrame img { width: 100%; height: 100%; object-fit: cover; filter: url(#duotone-prodct); display: block; transition: transform 600ms var(--ease-out); }
.relCard:hover .imgFrame img { transform: scale(1.03); }
.relCard .imgFrame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); mix-blend-mode: multiply; opacity: 0.35; }
.relTitle { font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -0.018em; color: var(--fg-strong); margin: 0; }
.relTitle em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--prodct-500); }
.relMeta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.02em; display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }

/* FOOTER */
footer.site { border-top: 1px solid var(--border); padding: 56px 40px 32px; }
footer.site .row { max-width: 1320px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
footer.site .legal { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.02em; }
footer.site .right { display: flex; gap: 20px; }
footer.site .right a { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); text-decoration: none; letter-spacing: 0.02em; }
footer.site .right a:hover { color: var(--fg-strong); }

@media (max-width: 900px) {
  .pullQuote { margin: 32px -20px; padding: 28px 20px; }
  .inlineImg { margin: 32px -20px; }
  .ctaPanelInner { grid-template-columns: 1fr; }
  .relGrid { grid-template-columns: 1fr; }
  .topNav { display: none; }
  .artBodyInner > p:first-child::first-letter { font-size: 4.4em; }
  .statGrid { grid-template-columns: 1fr; }
  .dataTable { font-size: 13px; }
  .dataTable th, .dataTable td { padding: 10px 8px; }
}