/* eventanalytics.ai /blog

   The blog layer. Loads third, after /assets/nocturne.css (the design system's
   tokens and components) and /assets/site.css (the marketing chrome: header,
   rails, footer, page ground, buttons). Everything the two of them already do
   is deliberately absent here.

   Written against the tokens, never against literal colour. The only literals
   are the measures and sizes this publication needs and the marketing pages
   have no use for, because nothing over there is 2,000 words long. */

/* ------------------------------------------------------------------ page --- */

/* site.css sets scroll-padding-top for a 53px sticky header. An article has
   anchored H2s and a table of contents that jumps to them, so it wants more
   room than a marketing page's occasional #start. */
html { scroll-padding-top: 84px; }

.blog-main { display: block; }

/* One measure for the whole publication. The reading column is narrower than
   the page, and both are centred inside the rails. */
.blog-sheet { max-width: var(--ea-max); margin: 0 auto; }
.blog-col { max-width: 74ch; }

/* -------------------------------------------------------------- page head --- */

.blog-head { position: relative; overflow: hidden; }
.blog-head-inner {
  position: relative; max-width: var(--ea-max); margin: 0 auto;
  padding-top: clamp(40px, 5.5vw, 76px); padding-bottom: clamp(26px, 3vw, 40px);
}

/* The crumb trail doubles as the article's subject label, so it is a link to
   the subject page rather than decoration. */
.blog-crumbs {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 18px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-500);
}
.blog-crumbs a { color: var(--color-neutral-400); text-decoration: none; }
.blog-crumbs a:hover { color: var(--color-accent-300); }
.blog-crumbs span[aria-hidden] { color: var(--color-neutral-700); }

.blog-h1 {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(33px, 4.4vw, 56px); line-height: 1.04;
  letter-spacing: -0.028em; margin: 0; max-width: 21ch;
}
.blog-h1-wide { max-width: 26ch; }

.blog-lede {
  margin: 22px 0 0; font-size: 17px; line-height: 1.7; max-width: 58ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.blog-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 0; font-size: 12px;
  color: var(--color-neutral-500);
}
.blog-meta span[aria-hidden] { color: var(--color-neutral-700); }

/* --------------------------------------------------------------- article --- */

.blog-body { max-width: var(--ea-max); margin: 0 auto; padding-bottom: 76px; }

.blog-prose { max-width: 72ch; }
.blog-prose p {
  margin: 0 0 1.15em; font-size: 17px; line-height: 1.72;
  color: color-mix(in srgb, var(--color-text) 87%, transparent);
}
.blog-prose h2 {
  font-size: clamp(23px, 2.3vw, 30px); line-height: 1.22; letter-spacing: -0.018em;
  margin: 2.3em 0 0.62em; scroll-margin-top: 84px;
}
.blog-prose h3 {
  font-size: 19px; line-height: 1.3; letter-spacing: -0.01em;
  margin: 2em 0 0.5em; scroll-margin-top: 84px;
}
.blog-prose h4 { font-size: 16px; margin: 1.7em 0 0.45em; }
.blog-prose > :first-child { margin-top: 0; }

.blog-prose ul, .blog-prose ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.blog-prose li {
  margin-bottom: 0.55em; font-size: 17px; line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 87%, transparent);
}
.blog-prose li::marker { color: var(--color-neutral-600); }

.blog-prose strong { font-weight: 600; color: var(--color-text); }
.blog-prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.blog-prose a:hover { color: var(--color-accent-300); text-decoration-color: currentColor; }

.blog-prose blockquote {
  margin: 0 0 1.3em; padding: 2px 0 2px 20px;
  border-left: 2px solid var(--color-accent-700);
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.blog-prose blockquote p:last-child { margin-bottom: 0; }

.blog-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em; padding: 0.12em 0.38em;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 85%, var(--color-bg));
  color: var(--color-accent-200);
}
.blog-prose pre {
  margin: 0 0 1.35em; padding: 16px 18px; overflow-x: auto;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 78%, var(--color-bg));
  box-shadow: var(--shadow-sm);
}
.blog-prose pre code { background: none; padding: 0; color: var(--color-text); font-size: 13px; line-height: 1.6; }

/* Tables take Nocturne's own row-rule treatment: the rule fades out at both
   ends of the row instead of stopping square. The wrapper scrolls so a wide
   table never widens the page. */
.tablewrap { overflow-x: auto; position: relative; margin: 0 0 1.5em; }
.blog-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.blog-prose th {
  text-align: left; padding: 9px 12px 9px 0; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.blog-prose thead tr {
  background: linear-gradient(to right, var(--color-divider), var(--color-divider)) no-repeat bottom / 100% 1px;
}
.blog-prose td {
  padding: 11px 12px 11px 0; vertical-align: top; line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.blog-prose tbody tr {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--color-text) 8%, transparent),
    color-mix(in srgb, var(--color-text) 8%, transparent)) no-repeat bottom / 100% 1px;
}
.blog-prose tbody tr:last-child { background: none; }

/* ------------------------------------------------------- answer and index --- */

/* The passage an answer engine lifts. It has to look like the summary it is,
   and it has to be the first thing under the heading. */
.blog-answer {
  margin: 0 0 30px; padding: 18px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-accent-800);
  background: color-mix(in srgb, var(--color-accent-900) 42%, transparent);
  max-width: 68ch;
}
.blog-answer-lab {
  display: block; margin-bottom: 8px;
  font-family: var(--font-heading); font-weight: 500;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-300);
}
.blog-answer p { margin: 0; font-size: 16px; line-height: 1.65; color: color-mix(in srgb, var(--color-text) 92%, transparent); }

.blog-toc {
  margin: 0 0 38px; padding: 16px 20px 18px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 62%, transparent);
  box-shadow: var(--shadow-sm);
  max-width: 68ch;
}
.blog-toc b {
  display: block; margin-bottom: 10px;
  font-family: var(--font-heading); font-weight: 500;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-500);
}
.blog-toc ol { margin: 0; padding-left: 1.25em; }
.blog-toc li { margin-bottom: 6px; font-size: 14px; line-height: 1.5; }
.blog-toc li::marker { color: var(--color-neutral-700); font-size: 12px; }
.blog-toc a { color: color-mix(in srgb, var(--color-text) 80%, transparent); text-decoration: none; }
.blog-toc a:hover { color: var(--color-accent-300); }

/* --------------------------------------------------------- foot sections --- */

.blog-foot { max-width: 72ch; margin-top: 60px; }
.blog-foot-sec { margin-top: 44px; padding-top: 30px;
  background: linear-gradient(to right, var(--color-divider), transparent) no-repeat top / 100% 1px; }
.blog-foot-sec h2 {
  font-size: 20px; line-height: 1.25; letter-spacing: -0.012em; margin: 0 0 4px;
}
.blog-faq dl { margin: 18px 0 0; }
.blog-faq dt {
  margin-top: 22px; font-family: var(--font-heading); font-weight: 500;
  font-size: 16px; line-height: 1.4; color: var(--color-text);
}
.blog-faq dd {
  margin: 8px 0 0; font-size: 15.5px; line-height: 1.68;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}

.blog-rel-list { list-style: none; margin: 16px 0 0; padding: 0; }
.blog-rel-list li { margin: 0; }
.blog-rel-list a {
  display: block; padding: 13px 0;
  font-size: 15.5px; line-height: 1.45; color: var(--color-text); text-decoration: none;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--color-text) 9%, transparent),
    color-mix(in srgb, var(--color-text) 9%, transparent)) no-repeat bottom / 100% 1px;
}
.blog-rel-list li:last-child a { background: none; }
.blog-rel-list a:hover { color: var(--color-accent-300); }

.blog-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 14px; color: var(--color-accent); text-decoration: none;
}
.blog-more:hover { color: var(--color-accent-300); }

/* ----------------------------------------------------------------- index --- */

.blog-count {
  margin: 26px 0 0; font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-neutral-500); font-feature-settings: 'tnum' 1;
}

/* The filter. It ships `hidden` and blog.js reveals it, so a browser with no
   scripting is never shown a search box that cannot search. */
.blog-find { margin: 30px 0 0; max-width: 460px; }
.blog-find[hidden] { display: none; }
.blog-find-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-radius: 11px;
  border: 1px solid var(--color-neutral-700);
  background: color-mix(in srgb, var(--color-surface) 78%, var(--color-bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-800) 34%, transparent);
}
.blog-find-row:focus-within { border-color: var(--color-accent-600); }
.blog-find-row svg { flex: none; fill: var(--color-accent-400); }
.blog-find input {
  flex: 1; min-width: 0; padding: 0; border: 0; background: transparent;
  font: inherit; font-size: 14.5px; color: var(--color-text);
  caret-color: var(--color-accent);
}
.blog-find input::placeholder { color: var(--color-neutral-600); }
.blog-find input:focus { outline: none; }

.blog-results { margin: 14px 0 0; }
.blog-results:empty { display: none; }
.blog-results-note {
  margin: 0 0 6px; font-size: 12px; color: var(--color-neutral-500);
  font-feature-settings: 'tnum' 1;
}

.blog-section { max-width: var(--ea-max); margin: 0 auto; padding-bottom: 64px; }
.blog-section-head { margin-bottom: 26px; }
.blog-section-head h2 {
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.18; letter-spacing: -0.02em; margin: 0;
}
.blog-section-head p {
  margin: 10px 0 0; font-size: 15px; line-height: 1.6; max-width: 56ch;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

/* Subject cards. One per cluster, and the whole card is the link. */
.blog-topics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  list-style: none; margin: 0; padding: 0;
}
.blog-topic {
  display: flex; flex-direction: column; gap: 9px; height: 100%;
  padding: 18px 20px 20px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 62%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--color-text); text-decoration: none;
}
.blog-topic:hover {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: var(--shadow-md);
}
.blog-topic-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.blog-topic-name { font-family: var(--font-heading); font-weight: 500; font-size: 16.5px; line-height: 1.25; }
.blog-topic:hover .blog-topic-name { color: var(--color-accent-200); }
.blog-topic-n {
  flex: none; font-size: 11px; letter-spacing: 0.04em;
  color: var(--color-neutral-500); font-feature-settings: 'tnum' 1;
}
.blog-topic-sub {
  margin: 0; font-size: 13.5px; line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

/* Article rows. Used by the index, the subject pages and the filter results,
   so all three read as the same list. */
.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-list li { margin: 0; }
.blog-row {
  display: grid; grid-template-columns: minmax(0, 1fr) max-content;
  gap: 6px 28px; align-items: baseline; padding: 20px 0;
  color: var(--color-text); text-decoration: none;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--color-text) 9%, transparent) 0,
    color-mix(in srgb, var(--color-text) 9%, transparent) calc(100% - 48px),
    transparent) no-repeat bottom / 100% 1px;
}
.blog-list li:last-child .blog-row { background: none; }
.blog-row:hover .blog-row-title { color: var(--color-accent-200); }
.blog-row-title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 17px; line-height: 1.35;
}
.blog-row-sub {
  grid-column: 1; margin: 0; font-size: 14px; line-height: 1.6; max-width: 68ch;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.blog-row-tag {
  grid-row: 1; grid-column: 2; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap; color: var(--color-neutral-600);
}

.blog-backlink {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 40px;
  font-size: 14px; color: var(--color-accent); text-decoration: none;
}
.blog-backlink:hover { color: var(--color-accent-300); }

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 900px) {
  .blog-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .blog-topics { grid-template-columns: 1fr; }
  .blog-row { grid-template-columns: 1fr; }
  .blog-row-tag { grid-row: auto; grid-column: 1; }
  .blog-prose p, .blog-prose li { font-size: 16.5px; }
}