/* ==========================================================================
   Field Notes — blog styles
   Loaded AFTER style.css. Leans on the site's own components (.page-hero,
   .scene-illustration, .container, .btn, .eyebrow, .lede) so the blog reads
   as native corrival.biz. Only adds card + prose specifics.
   ========================================================================== */

/* ---- Index hero: reuse .page-hero; two-column with illustration ---- */
.fn-index-hero { max-width: var(--container); }
.fn-index-hero h1 .accent { color: var(--c-teal); font-style: italic; font-weight: 380; }
.fn-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: center;
}
.fn-index-art { aspect-ratio: 3 / 2; }
@media (max-width: 860px) {
  .fn-hero-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .fn-index-art { order: -1; max-width: 520px; }
}

/* ==========================================================================
   Search + tag filter toolbar
   ========================================================================== */
.fn-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--s-8);
}
.fn-search {
  font-family: var(--font-sans); font-size: var(--fs-base);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  background: var(--c-paper); color: var(--c-ink);
  flex: 1 1 18rem; max-width: 26rem;
}
.fn-search::placeholder { color: var(--c-muted); }
.fn-search:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 1px; }
.fn-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fn-chip {
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500;
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill);
  border: 1px solid var(--c-line); background: var(--c-paper); color: var(--c-ink-soft);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.fn-chip:hover { border-color: var(--c-teal); color: var(--c-teal-deep); }
.fn-chip.is-active { background: var(--c-ink); color: var(--c-base); border-color: var(--c-ink); }
.fn-noresults { display: none; text-align: center; color: var(--c-muted); font-size: var(--fs-md); padding: var(--s-8) 0; }
.fn-noresults.is-visible { display: block; }
[data-search][hidden] { display: none !important; }

/* ==========================================================================
   Featured post — editorial 2-column (illustration + copy)
   ========================================================================== */
.fn-featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--s-9);
}
.fn-featured .scene-illustration { aspect-ratio: 4 / 3; }
.fn-featured__copy .post-card__title { font-size: var(--fs-2xl); margin-bottom: var(--s-4); }
.fn-featured__dek { font-size: var(--fs-md); color: var(--c-ink-soft); margin-bottom: var(--s-5); max-width: 46ch; }
.fn-readmore {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; color: var(--c-teal-deep); margin-top: var(--s-4);
}
.fn-featured:hover .fn-readmore { color: var(--c-teal); }
.fn-featured:hover .scene-illustration { transform: translateY(-4px); }
@media (max-width: 760px) {
  .fn-featured { grid-template-columns: 1fr; gap: var(--s-5); }
  .fn-featured .scene-illustration { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   Post grid + cards (illustration on top)
   ========================================================================== */
.fn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: clamp(var(--s-5), 4vw, var(--s-7));
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.post-card:hover,
.post-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.post-card .scene-illustration {
  aspect-ratio: 3 / 2;
  border-radius: 0;
  box-shadow: none;
}
.post-card:hover .scene-illustration { transform: none; box-shadow: none; }
.post-card__body { padding: var(--s-5) var(--s-5) var(--s-6); display: flex; flex-direction: column; flex: 1 1 auto; }
.post-card__tag {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-teal-deep);
  margin-bottom: var(--s-3);
}
.post-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 1.15;
  color: var(--c-ink);
  margin: 0 0 var(--s-3);
}
.post-card__dek {
  font-size: var(--fs-base);
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-5);
  flex: 1 1 auto;
}
.post-card__meta {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  display: flex; gap: var(--s-4); align-items: center;
}
.post-card__meta span::before { content: "·"; margin-right: var(--s-4); color: var(--c-line); }
.post-card__meta span:first-child::before { content: none; margin: 0; }

/* ==========================================================================
   Article (single post)
   ========================================================================== */
.fn-article-hero { max-width: var(--container-narrow); }
.breadcrumb { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--s-5); }
.breadcrumb a { color: var(--c-teal-deep); }
.breadcrumb a:hover { text-decoration: underline; }
.fn-article-hero .eyebrow { color: var(--c-teal-deep); margin-bottom: var(--s-3); }
.fn-article-hero h1 {
  font-size: clamp(2.4rem, 1.8rem + 2.8vw, 4rem);
  font-weight: 380;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin-bottom: var(--s-4);
}
.fn-article-hero .article-dek { font-size: var(--fs-lg); line-height: 1.5; color: var(--c-ink-soft); margin-bottom: var(--s-5); }
.article-meta {
  display: flex; gap: var(--s-4); align-items: center;
  font-size: var(--fs-sm); color: var(--c-muted);
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  padding: var(--s-3) 0;
}
.article-meta span::before { content: "·"; margin-right: var(--s-4); color: var(--c-line); }
.article-meta span:first-child::before { content: none; margin: 0; }

/* Hero illustration for a post — banner using the site's framed look */
.fn-hero-figure {
  max-width: var(--container-narrow);
  margin: 0 auto var(--s-8);
  aspect-ratio: 16 / 9;
}

/* ---- Prose (long-form reading column) ---- */
.prose {
  max-width: 40rem;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--c-ink-soft);
}
.prose > * + * { margin-top: var(--s-5); }
.prose p { margin: 0; }
.prose h2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-xl); line-height: 1.15; color: var(--c-ink); margin-top: var(--s-7); margin-bottom: var(--s-2); }
.prose h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-lg); color: var(--c-ink); margin-top: var(--s-6); }
.prose a { color: var(--c-teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--c-teal); }
.prose strong { color: var(--c-ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: var(--s-6); }
.prose li + li { margin-top: var(--s-2); }
.prose blockquote {
  border-left: 3px solid var(--c-coral);
  padding-left: var(--s-5); margin-left: 0;
  font-family: var(--font-serif); font-size: var(--fs-lg); font-style: italic;
  color: var(--c-ink); line-height: 1.4;
}
.prose hr { border: none; border-top: 1px solid var(--c-line); margin: var(--s-7) auto; width: 40%; }
.prose .lede-para:first-letter {
  font-family: var(--font-serif); font-size: 3.4em; line-height: 0.78;
  float: left; padding: 0.06em 0.1em 0 0; color: var(--c-coral); font-weight: 500;
}

/* ---- Author block ---- */
.author-block {
  max-width: var(--container-narrow);
  margin: var(--s-8) auto 0;
  padding: var(--s-6);
  display: flex; gap: var(--s-5); align-items: center;
  background: var(--c-cream); border-radius: var(--radius-lg);
}
.author-block img { width: 72px; height: 72px; border-radius: var(--radius-pill); object-fit: cover; flex: 0 0 auto; }
.author-block .author-name { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--c-ink); margin: 0 0 var(--s-1); }
.author-block .author-bio { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }
.author-block .author-bio a { color: var(--c-teal-deep); }

/* ---- End CTA (dark, like homepage final CTA) ---- */
.fn-cta {
  max-width: var(--container-narrow);
  margin: var(--s-8) auto 0;
  padding: clamp(var(--s-7), 6vw, var(--s-9)) var(--s-6);
  text-align: center;
  background: var(--c-ink); color: var(--c-base);
  border-radius: var(--radius-lg);
}
.fn-cta h2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-xl); color: var(--c-base); margin: 0 0 var(--s-3); }
.fn-cta p { color: var(--c-line-soft); margin: 0 auto var(--s-5); max-width: 48ch; }
.fn-cta .cta-group { justify-content: center; }
/* Secondary CTA on the dark block — outlined so it reads as a button */
.fn-cta .btn-ghost {
  border: 1px solid rgba(250, 248, 243, 0.35);
  color: var(--c-base);
}
.fn-cta .btn-ghost:hover {
  background: rgba(250, 248, 243, 0.08);
  border-color: var(--c-base);
  color: var(--c-base);
}

/* ---- Subscribe (dark call-out, matching the site's CTA blocks) ---- */
.subscribe-block {
  max-width: var(--container-narrow);
  margin: var(--s-6) auto 0;
  padding: clamp(var(--s-6), 5vw, var(--s-7)) var(--s-6);
  background: var(--c-ink); border: none;
  border-radius: var(--radius-lg); text-align: center;
}
.subscribe-block .eyebrow { display: block; color: var(--c-amber); margin-bottom: var(--s-3); }
.subscribe-block h2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-lg); color: var(--c-base); margin: 0 0 var(--s-2); }
.subscribe-block p { font-size: var(--fs-sm); color: var(--c-line-soft); margin: 0 auto var(--s-4); max-width: 46ch; }
.subscribe-form { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.subscribe-form input[type="email"] {
  font-family: var(--font-sans); font-size: var(--fs-base);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-ink-soft); border-radius: var(--radius-sm);
  background: var(--c-base); color: var(--c-ink); min-width: 16rem;
}
.subscribe-form input::placeholder { color: var(--c-muted); }
.subscribe-form input:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 1px; }

/* ---- Related ---- */
.related-posts { background: var(--c-cream); border-top: 1px solid var(--c-line); margin-top: var(--s-9); }
.related-posts h2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-xl); color: var(--c-ink); text-align: center; margin-bottom: var(--s-6); }

@media (prefers-reduced-motion: reduce) {
  .post-card, .fn-featured .scene-illustration { transition: none; }
  .post-card:hover, .post-card:focus-visible { transform: none; }
}