/* ============================================================
   Fresh Web — Blog prose stylesheet (shared, per-site themed)
   ------------------------------------------------------------
   Everything a customer authors renders inside .blog-prose.
   Themed via --blog-* tokens each site defines (token-contract.md).
   Every token has a neutral OKLCH fallback: a missing alias
   degrades to readable, never broken.

   Design gate: impeccable + emil-design-eng + taste-skill.
   - No side-stripe borders (Ban 1): blockquote uses a display
     treatment + hanging quote mark, never border-left.
   - No gradient text (Ban 2): solid colours only.
   - OKLCH throughout; tinted neutrals; single accent; no #000/#fff.
   - Measure ~68ch. Motion: opacity/transform only, hover gated,
     reduced-motion honoured.
   ============================================================ */

.blog-article {
  --_measure: var(--blog-measure, 70ch);
  max-width: var(--blog-container, 72rem);
  margin-inline: auto;
}

/* Page wrap — matches the site container's inline padding, and adds
   generous space below the article so it never butts the footer.
   The renderer wraps the article in this. */
.blog-wrap {
  padding-inline: clamp(1rem, 5vw, 2rem);
  padding-block: var(--blog-space-2xl, 4rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

/* ---- Post header (title + meta) ---------------------------- */
.blog-article__header {
  padding-block: 0 var(--blog-space-lg, 2rem);
}
.blog-article__eyebrow {
  margin: 0 0 var(--blog-space-sm, 1rem);
  font-family: var(--blog-font-body, system-ui, sans-serif);
  font-size: var(--blog-fs-eyebrow, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blog-accent-strong, oklch(56% 0.12 73));
}
.blog-article__title {
  margin: 0;
  font-family: var(--blog-font-display, Georgia, "Times New Roman", serif);
  font-weight: var(--blog-display-weight, 700);
  font-size: var(--blog-fs-h1, clamp(2rem, 1.4rem + 2.6vw, 3rem));
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--blog-ink, oklch(24% 0.02 75));
  max-width: 24ch;
  text-wrap: balance;
}

/* Body: sticky meta rail + prose. Fills the container width on desktop;
   keeps the text at a readable measure. Single column on mobile, where
   the rail collapses to an inline byline above the prose. */
/* Rail is a desktop-only left sidebar; on mobile the inline byline is used. */
.blog-article__rail { display: none; }
.blog-article__byline { margin: var(--blog-space-xs, 0.75rem) 0 var(--blog-space-lg, 2rem); }

.blog-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  font-family: var(--blog-font-body, system-ui, sans-serif);
}
.blog-meta__k { display: none; }               /* labels hidden in the mobile byline */
.blog-meta__v {
  font-size: var(--blog-fs-sm, 0.9375rem);
  color: var(--blog-ink-soft, oklch(44% 0.02 78));
}
.blog-meta li:not(:last-child) .blog-meta__v::after {
  content: "·";
  margin-left: 1rem;
  color: var(--blog-ink-soft, oklch(70% 0.02 78));
}
.blog-meta .blog-article__tag {
  font-weight: 600;
  color: var(--blog-accent-strong, oklch(52% 0.12 73));
}

@media (min-width: 60rem) {
  .blog-article {
    display: grid;
    grid-template-columns: var(--blog-rail, 14rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  /* header + cover + body live in one content column (natural flow, no gaps) */
  .blog-article__main { grid-column: 2; min-width: 0; }
  .blog-article__rail {
    display: block;
    grid-column: 1;
    position: sticky;
    top: 5.5rem;
  }
  .blog-article__byline { display: none; }
  .blog-meta {
    flex-direction: column;
    gap: var(--blog-space-md, 1.5rem);
  }
  .blog-meta__k {
    display: block;
    margin-bottom: 0.15rem;
    font-size: var(--blog-fs-eyebrow, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blog-ink-soft, oklch(52% 0.02 78));
  }
  .blog-meta__v { color: var(--blog-ink, oklch(30% 0.02 75)); }
  .blog-meta li:not(:last-child) .blog-meta__v::after { content: none; }
}

/* Cover image breaks out to the full container width for impact */
.blog-article__cover {
  margin-block: 0 var(--blog-space-xl, 2.5rem);
}
.blog-article__cover img {
  display: block;
  width: 100%;
  aspect-ratio: var(--blog-cover-ratio, 5 / 2);   /* banner crop, not the full photo height */
  object-fit: cover;
  border-radius: var(--blog-radius, 14px);
  box-shadow: var(--blog-shadow, 0 6px 18px oklch(24% 0.03 75 / 0.10), 0 2px 6px oklch(24% 0.03 75 / 0.06));
}
@media (max-width: 48rem) {
  .blog-article__cover img { aspect-ratio: 3 / 2; }  /* a little taller on phones so it isn't a sliver */
}

/* ---- Prose body ------------------------------------------- */
.blog-prose {
  max-width: var(--_measure);
  font-family: var(--blog-font-body, system-ui, -apple-system, sans-serif);
  font-size: var(--blog-fs-body, 1.0625rem);
  line-height: 1.72;
  color: var(--blog-ink, oklch(24% 0.02 75));
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* Flow rhythm: consistent spacing, larger space ABOVE headings
   so hierarchy reads without extra sizes. */
.blog-prose > * { margin-block: 0; }
.blog-prose > * + * { margin-block-start: var(--blog-space-md, 1.5rem); }

.blog-prose h2,
.blog-prose h3 {
  font-family: var(--blog-font-display, Georgia, "Times New Roman", serif);
  font-weight: var(--blog-display-weight, 700);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--blog-ink, oklch(22% 0.02 75));
  text-wrap: balance;
}
.blog-prose h2 {
  font-size: var(--blog-fs-h2, clamp(1.55rem, 1.2rem + 1.5vw, 2.1rem));
  margin-block-start: var(--blog-space-2xl, 3.25rem);
}
.blog-prose h3 {
  font-size: var(--blog-fs-h3, clamp(1.2rem, 1.05rem + 0.6vw, 1.42rem));
  margin-block-start: var(--blog-space-xl, 2.5rem);
}
.blog-prose h2 + h3 { margin-block-start: var(--blog-space-md, 1.5rem); }

.blog-prose p { text-wrap: pretty; }

/* Lead paragraph — slightly larger, sets the voice */
.blog-prose > p:first-of-type {
  font-size: var(--blog-fs-lead, 1.2rem);
  line-height: 1.6;
  color: var(--blog-ink, oklch(30% 0.02 75));
}

/* Links — offset underline, accent colour, hover gated */
.blog-prose a {
  color: var(--blog-accent-strong, oklch(50% 0.13 73));
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in oklch, currentColor 38%, transparent);
  transition: text-decoration-color 180ms var(--blog-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
  .blog-prose a:hover { text-decoration-color: currentColor; }
}

.blog-prose strong { font-weight: 700; color: var(--blog-ink, oklch(20% 0.02 75)); }
.blog-prose em { font-style: italic; }

/* Lists — accent markers, comfortable indent */
.blog-prose ul,
.blog-prose ol { padding-inline-start: 1.4em; }
.blog-prose ul { list-style: disc; }
.blog-prose ol { list-style: decimal; }
.blog-prose li + li { margin-block-start: var(--blog-space-2xs, 0.5rem); }
.blog-prose li::marker { color: var(--blog-accent-strong, oklch(56% 0.12 73)); }
.blog-prose li p { margin: 0; }

/* Blockquote — NO side stripe (Ban 1). Display font + hanging mark. */
.blog-prose blockquote {
  position: relative;
  margin-block: var(--blog-space-xl, 2.5rem);
  padding-inline-start: 1.4em;
  font-family: var(--blog-font-display, Georgia, "Times New Roman", serif);
  font-size: var(--blog-fs-quote, 1.35rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--blog-ink-soft, oklch(40% 0.02 78));
}
.blog-prose blockquote::before {
  content: "\201C";
  position: absolute;
  left: -0.04em;
  top: -0.18em;
  font-size: 2.6em;
  line-height: 1;
  color: var(--blog-accent, oklch(72% 0.13 75));
  opacity: 0.35;
}
.blog-prose blockquote p { margin: 0; }
.blog-prose blockquote cite {
  display: block;
  margin-top: var(--blog-space-sm, 1rem);
  font-family: var(--blog-font-body, system-ui, sans-serif);
  font-size: var(--blog-fs-sm, 0.9375rem);
  font-style: normal;
  color: var(--blog-ink-soft, oklch(46% 0.02 78));
}

/* Figures & inline images — full measure, brand-tinted shadow */
.blog-prose figure { margin-block: var(--blog-space-xl, 2.5rem); }
.blog-prose :is(img, figure img) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--blog-radius, 14px);
  box-shadow: var(--blog-shadow, 0 6px 18px oklch(24% 0.03 75 / 0.10), 0 2px 6px oklch(24% 0.03 75 / 0.06));
}
.blog-prose figcaption {
  margin-top: var(--blog-space-sm, 1rem);
  font-family: var(--blog-font-body, system-ui, sans-serif);
  font-size: var(--blog-fs-sm, 0.9375rem);
  color: var(--blog-ink-soft, oklch(46% 0.02 78));
  text-align: center;
}

/* Video facade — click-to-load, 16:9, no cookie until play.
   Renderer emits: <button class="blog-embed__play"><span></span></button> */
.blog-embed {
  position: relative;
  margin-block: var(--blog-space-xl, 2.5rem);
  aspect-ratio: 16 / 9;
  border-radius: var(--blog-radius, 14px);
  overflow: hidden;
  background: var(--blog-surface-2, oklch(94% 0.01 82));
}
.blog-embed__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-embed__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: color-mix(in oklch, var(--blog-ink, oklch(24% 0.02 75)) 22%, transparent);
  transition: background 200ms var(--blog-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.blog-embed__play > span {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: var(--blog-surface, oklch(98% 0.006 85));
  box-shadow: var(--blog-shadow, 0 6px 18px oklch(24% 0.03 75 / 0.14));
  transition: transform 160ms var(--blog-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.blog-embed__play > span::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.22rem; /* optical centring of the triangle */
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent var(--blog-accent-strong, oklch(48% 0.13 73));
}
@media (hover: hover) and (pointer: fine) {
  .blog-embed__play:hover { background: color-mix(in oklch, var(--blog-ink, oklch(24% 0.02 75)) 12%, transparent); }
  .blog-embed__play:hover > span { transform: scale(1.06); }
}
.blog-embed__play:active > span { transform: scale(0.97); }
.blog-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Inline code / preformatted (if the editor emits them) */
.blog-prose code {
  font-family: var(--blog-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: 6px;
  background: var(--blog-surface-2, oklch(95% 0.01 82));
}
.blog-prose pre {
  overflow-x: auto;
  padding: var(--blog-space-md, 1.5rem);
  border-radius: var(--blog-radius, 14px);
  background: var(--blog-surface-2, oklch(96% 0.008 82));
}
.blog-prose pre code { padding: 0; background: none; }

/* Horizontal rule — hairline, not a heavy bar */
.blog-prose hr {
  border: 0;
  height: 1px;
  margin-block: var(--blog-space-2xl, 3.25rem);
  background: var(--blog-line, oklch(88% 0.012 82));
}

/* Reduced motion — drop transitions, keep everything legible */
@media (prefers-reduced-motion: reduce) {
  .blog-prose a,
  .blog-embed__play,
  .blog-embed__play > span { transition: none; }
}

/* ============================================================
   Blog index / archive — the /blog landing and category/tag pages.
   Editorial: a featured lead + a hairline-separated list. NOT a grid
   of three identical cards.
   ============================================================ */
.blog-index {
  max-width: var(--blog-container, 72rem);
  margin-inline: auto;
}
.blog-index__head {
  max-width: 44ch;
  padding-block: var(--blog-space-2xl, 4rem) var(--blog-space-lg, 2rem);
}
.blog-index__eyebrow,
.blog-lead__eyebrow,
.blog-item__cat {
  margin: 0 0 var(--blog-space-2xs, 0.5rem);
  font-family: var(--blog-font-body, system-ui, sans-serif);
  font-size: var(--blog-fs-eyebrow, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blog-accent-strong, oklch(56% 0.12 73));
}
.blog-index__title {
  margin: 0;
  font-family: var(--blog-font-display, Georgia, "Times New Roman", serif);
  font-weight: var(--blog-display-weight, 700);
  font-size: var(--blog-fs-h1, clamp(2rem, 1.4rem + 2.6vw, 3rem));
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--blog-ink, oklch(24% 0.02 75));
  text-wrap: balance;
}
.blog-index__intro {
  margin: var(--blog-space-md, 1.5rem) 0 0;
  font-family: var(--blog-font-body, system-ui, sans-serif);
  font-size: var(--blog-fs-lead, 1.2rem);
  line-height: 1.6;
  color: var(--blog-ink-soft, oklch(44% 0.02 78));
}

/* Title links reveal the accent on hover (links, not buttons) */
.blog-lead__title a,
.blog-item__title a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms var(--blog-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
  .blog-lead__title a:hover,
  .blog-item__title a:hover { color: var(--blog-accent-strong, oklch(50% 0.13 73)); }
}

/* Featured lead post — asymmetric split */
.blog-lead {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-block-end: var(--blog-space-2xl, 4rem);
}
@media (min-width: 60rem) {
  .blog-lead { grid-template-columns: 1.15fr 1fr; align-items: center; }
}
.blog-lead__media { display: block; }
.blog-lead__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--blog-radius, 14px);
  box-shadow: var(--blog-shadow, 0 6px 18px oklch(24% 0.03 75 / 0.10), 0 2px 6px oklch(24% 0.03 75 / 0.06));
}
.blog-lead__title {
  margin: 0;
  font-family: var(--blog-font-display, Georgia, "Times New Roman", serif);
  font-weight: var(--blog-display-weight, 700);
  font-size: var(--blog-fs-h2, clamp(1.55rem, 1.2rem + 1.5vw, 2.1rem));
  line-height: 1.15;
  color: var(--blog-ink, oklch(24% 0.02 75));
  text-wrap: balance;
}
.blog-lead__meta,
.blog-item__meta {
  margin: var(--blog-space-sm, 1rem) 0 0;
  font-family: var(--blog-font-body, system-ui, sans-serif);
  font-size: var(--blog-fs-sm, 0.9375rem);
  color: var(--blog-ink-soft, oklch(46% 0.02 78));
}
.blog-lead__excerpt,
.blog-item__excerpt {
  margin: var(--blog-space-sm, 1rem) 0 0;
  max-width: 60ch;
  font-family: var(--blog-font-body, system-ui, sans-serif);
  font-size: var(--blog-fs-body, 1.0625rem);
  line-height: 1.65;
  color: var(--blog-ink-soft, oklch(42% 0.02 78));
}
.blog-lead__more {
  display: inline-block;
  margin-top: var(--blog-space-md, 1.5rem);
  font-family: var(--blog-font-body, system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--blog-fs-sm, 0.9375rem);
  color: var(--blog-accent-strong, oklch(50% 0.13 73));
  text-decoration: none;
}
.blog-lead__more::after { content: " \2192"; }
@media (hover: hover) and (pointer: fine) {
  .blog-lead__more:hover { text-decoration: underline; text-underline-offset: 0.15em; }
}

/* List rows — hairline separators (top/bottom only), not boxed cards */
.blog-list { border-top: 1px solid var(--blog-line, oklch(88% 0.012 82)); }
.blog-item {
  display: grid;
  gap: var(--blog-space-sm, 1rem);
  padding-block: var(--blog-space-xl, 2.5rem);
  border-bottom: 1px solid var(--blog-line, oklch(88% 0.012 82));
}
@media (min-width: 40rem) {
  .blog-item {
    grid-template-columns: 13rem 1fr;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: start;
  }
}
.blog-item__media { display: block; }
.blog-item__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--blog-radius, 14px);
}
.blog-item__title {
  margin: 0;
  font-family: var(--blog-font-display, Georgia, "Times New Roman", serif);
  font-weight: var(--blog-display-weight, 700);
  font-size: var(--blog-fs-h3, clamp(1.2rem, 1.05rem + 0.6vw, 1.42rem));
  line-height: 1.2;
  color: var(--blog-ink, oklch(24% 0.02 75));
}

/* Pager */
.blog-pager {
  display: flex;
  justify-content: space-between;
  gap: var(--blog-space-md, 1.5rem);
  padding-block: var(--blog-space-2xl, 4rem);
}
.blog-pager__link {
  font-family: var(--blog-font-body, system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--blog-fs-sm, 0.9375rem);
  color: var(--blog-accent-strong, oklch(50% 0.13 73));
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .blog-pager__link:hover { text-decoration: underline; text-underline-offset: 0.15em; }
}

/* Empty state — teaches, doesn't just say "nothing here" */
.blog-empty {
  padding-block: var(--blog-space-2xl, 4rem);
  max-width: 48ch;
  font-family: var(--blog-font-body, system-ui, sans-serif);
  font-size: var(--blog-fs-lead, 1.2rem);
  color: var(--blog-ink-soft, oklch(46% 0.02 78));
}

@media (prefers-reduced-motion: reduce) {
  .blog-lead__title a,
  .blog-item__title a { transition: none; }
}