/* Nola shared styles for blog pages */
:root {
  --color-paper: oklch(98% 0.008 85);
  --color-paper-2: oklch(96% 0.014 85);
  --color-card: oklch(99.4% 0.004 85);
  --color-ink: oklch(30% 0.03 285);
  --color-ink-2: oklch(42% 0.024 285);
  --color-muted: oklch(54% 0.02 285);
  --color-accent: oklch(62% 0.13 35);
  --color-accent-soft: oklch(90% 0.05 35);
  --color-lav: oklch(88% 0.05 300);
  --color-mint: oklch(92% 0.05 165);
  --color-sky: oklch(91% 0.045 230);
  --color-peach: oklch(92% 0.05 55);
  --color-rule: oklch(30% 0.03 285 / 0.1);
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --ease-soft: cubic-bezier(0.25, 0.4, 0.2, 1);
  --shadow-soft: 0 20px 50px -20px oklch(40% 0.06 300 / 0.25);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
body {
  background: var(--color-paper); color: var(--color-ink-2);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-accent-soft); }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); line-height: 1.15; overflow-wrap: anywhere; }

.blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; }
.blob--1 { width: 40vw; height: 40vw; background: var(--color-lav); top: -14vw; right: -10vw; }
.blob--2 { width: 32vw; height: 32vw; background: var(--color-peach); bottom: -8vw; left: -12vw; }

.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem var(--page-gutter); max-width: 72rem; margin-inline: auto;
}
.nav__brand { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.nav__brand span { color: var(--color-accent); }
.nav__links { display: flex; gap: 1.75rem; align-items: center; }
.nav__link { font-size: 0.9375rem; font-weight: 500; text-decoration: none; color: var(--color-ink-2); }
.nav__cta {
  font-size: 0.9375rem; font-weight: 600; text-decoration: none; color: white;
  background: var(--color-accent); padding: 0.6rem 1.3rem; border-radius: 999px;
  box-shadow: 0 8px 20px -8px oklch(62% 0.13 35 / 0.5);
}

.section { max-width: 72rem; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--page-gutter); }
.section__eyebrow { display: inline-block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1rem; }
.section__title { font-size: clamp(2rem, 3.5vw + 0.4rem, 3rem); letter-spacing: -0.015em; max-width: 26ch; margin-bottom: 1.25rem; }
.section__lede { max-width: 56ch; }

.posts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.4rem; margin-top: 3rem; }
.post-card {
  display: block; text-decoration: none; background: var(--color-card);
  border-radius: 1.6rem; overflow: hidden;
  box-shadow: 0 12px 34px -18px oklch(40% 0.06 300 / 0.18);
  transition: transform 260ms var(--ease-soft), box-shadow 260ms var(--ease-soft);
}
.post-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px oklch(40% 0.06 300 / 0.3); }
.post-card__art { height: 9rem; }
.post-card__art--sky { background: linear-gradient(135deg, var(--color-sky), var(--color-lav)); }
.post-card__art--peach { background: linear-gradient(135deg, var(--color-peach), var(--color-accent-soft)); }
.post-card__art--mint { background: linear-gradient(135deg, var(--color-mint), var(--color-sky)); }
.post-card__body { padding: 1.5rem; }
.post-card__tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.post-card h2, .post-card h3 { font-size: 1.2rem; margin: 0.5rem 0; }
.post-card p { font-size: 0.875rem; color: var(--color-muted); }

/* article layout */
.article { max-width: 44rem; margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem) var(--page-gutter) 4rem; }
.article__tag { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.article h1 { font-size: clamp(1.9rem, 3.4vw + 0.4rem, 2.8rem); margin: 0.75rem 0 1rem; letter-spacing: -0.015em; }
.article__meta { font-size: 0.875rem; color: var(--color-muted); margin-bottom: 2.5rem; }
.article h2 { font-size: 1.55rem; margin: 2.5rem 0 0.9rem; }
.article h3 { font-size: 1.2rem; margin: 1.8rem 0 0.6rem; }
.article p { margin-bottom: 1.1rem; }
.article ul, .article ol { margin: 0 0 1.1rem 1.4rem; }
.article li { margin-bottom: 0.45rem; }
.article strong { color: var(--color-ink); }
.article .callout {
  background: var(--color-card); border-radius: 1.4rem; padding: 1.6rem;
  margin: 2rem 0; box-shadow: var(--shadow-soft);
}
.article .callout p:last-child { margin-bottom: 0; }
.article .cta-box {
  background: linear-gradient(135deg, var(--color-lav), var(--color-peach));
  border-radius: 1.6rem; padding: 2rem; margin: 2.5rem 0; text-align: center;
}
.article .cta-box p { max-width: 44ch; margin-inline: auto; }
.article .cta-box .btn {
  display: inline-block; margin-top: 1.25rem; text-decoration: none;
  font-weight: 600; color: white; background: var(--color-accent);
  padding: 0.85rem 1.7rem; border-radius: 999px;
  box-shadow: 0 12px 30px -10px oklch(62% 0.13 35 / 0.55);
}

.footer {
  padding: 3rem var(--page-gutter); max-width: 72rem; margin-inline: auto;
  display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; flex-wrap: wrap;
}
.footer__crisis {
  flex-basis: 100%;
  font-size: 0.8125rem; color: var(--color-muted);
  max-width: 62ch; margin-bottom: 1rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-rule);
}
.footer__crisis a { color: var(--color-muted); }
.footer__statement { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-ink); }
.footer__meta { font-size: 0.8125rem; color: var(--color-muted); }
.footer__meta a { color: var(--color-muted); }

/* comparison tables */
.article .table-wrap { overflow-x: auto; margin: 1.5rem 0 0.75rem; border-radius: 1.2rem; box-shadow: var(--shadow-soft); }
.article table { width: 100%; min-width: 42rem; border-collapse: collapse; background: var(--color-card); font-size: 0.9rem; line-height: 1.5; }
.article th, .article td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-rule); }
.article thead th { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); }
.article thead th:nth-child(2) { color: var(--color-accent); }
.article tbody td:nth-child(2) { background: var(--color-accent-soft); }
.article tbody tr:last-child td { border-bottom: 0; }
.article .table-note { font-size: 0.8125rem; color: var(--color-muted); margin-bottom: 1.5rem; }


@media (max-width: 880px) {
  .posts { grid-template-columns: 1fr; }
}