/* ── Blog post article ──────────────────────────────────────── */
.blog-post { width: 100%; max-width: 760px; margin: 0 auto; }
.blog-post__header { margin-bottom: var(--space-6); }
.blog-post__header h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800;
  color: var(--color-text-primary); letter-spacing: -.02em;
  line-height: 1.2; margin: 0 0 .5rem;
}
.blog-post__meta { font-size: .82rem; color: var(--color-text-muted); }
.blog-post__body { font-size: .95rem; line-height: 1.7; color: var(--color-text-secondary); }
.blog-post__body h2 { font-size: 1.25rem; font-weight: 800; color: var(--color-text-primary); margin: 1.75rem 0 .75rem; }
.blog-post__body h3 { font-size: 1.05rem; font-weight: 700; color: var(--color-text-primary); margin: 1.25rem 0 .5rem; }
.blog-post__body p { margin: 0 0 .9rem; }
.blog-post__body a { color: var(--color-accent); }
.blog-post__body ul, .blog-post__body ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.blog-post__body figure { margin: 0 0 1.1rem; }
.blog-post__body img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.blog-post__body figcaption { font-size: .78rem; color: var(--color-text-muted); line-height: 1.5; margin-top: .4rem; }
.blog-post__body figcaption a { color: var(--color-text-muted); text-decoration: underline; }
.blog-post__app-link {
  margin-top: 2rem; padding: 1rem 1.25rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); font-size: .9rem; color: var(--color-text-secondary);
}
.blog-post__app-link a { color: var(--color-accent); font-weight: 700; text-decoration: none; }
.blog-post__app-link a:hover { text-decoration: underline; }

/* ── Blog listing page ──────────────────────────────────────── */
/* Each card takes its paired app's flavor */
.fl-sakura   { --fl-bg: var(--c-sakura-bg);   --fl-border: var(--c-sakura-border);   --fl-text: var(--c-sakura-text); }
.fl-matcha   { --fl-bg: var(--c-matcha-bg);   --fl-border: var(--c-matcha-border);   --fl-text: var(--c-matcha-text); }
.fl-lavender { --fl-bg: var(--c-lavender-bg); --fl-border: var(--c-lavender-border); --fl-text: var(--c-lavender-text); }
.fl-butter   { --fl-bg: var(--c-butter-bg);   --fl-border: var(--c-butter-border);   --fl-text: var(--c-butter-text); }
.fl-peach    { --fl-bg: var(--c-peach-bg);    --fl-border: var(--c-peach-border);    --fl-text: var(--c-peach-text); }
.fl-sky      { --fl-bg: var(--c-sky-bg);      --fl-border: var(--c-sky-border);      --fl-text: var(--c-sky-text); }

.blog-index__hero {
  padding: var(--space-8) var(--space-6); margin: 0 0 var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 8% 20%, var(--c-sakura-bg), transparent 45%),
    radial-gradient(circle at 92% 10%, var(--c-sky-bg), transparent 45%),
    radial-gradient(circle at 60% 110%, var(--c-butter-bg), transparent 50%),
    var(--color-surface);
}
.blog-index__title {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 800;
  color: var(--color-text-primary); letter-spacing: -.03em; margin: 0 0 .5rem; line-height: 1.1;
}
.blog-index__intro { max-width: 640px; font-size: 1rem; color: var(--color-text-secondary); line-height: 1.65; margin: 0; }
.blog-index__empty { font-size: .9rem; color: var(--color-text-muted); }

.blog-index__stats {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-5); font-size: .85rem; color: var(--color-text-muted);
}
.blog-index__stats b { font-size: 1.15rem; font-weight: 800; color: var(--color-text-primary); margin-right: .2rem; }

.blog-index__stats a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.blog-index__stats a:hover { color: var(--color-text-primary); }

.blog-index__section-title {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--color-text-primary); margin: var(--space-10) 0 var(--space-2);
}
.blog-index__reports {
  margin-top: var(--space-8); padding: var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl);
}
.blog-index__reports .blog-index__section-title { margin-top: 0; }
.blog-index__reports-intro { max-width: 680px; font-size: .9rem; line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 var(--space-4); }
.blog-index__reports .blog-index__card { background: var(--color-bg); }

.blog-index__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }
.blog-index__filter {
  padding: .35rem .8rem; font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--color-text-secondary); background: var(--color-surface);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-full); cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.blog-index__filter span { font-weight: 500; color: var(--color-text-muted); margin-left: .15rem; }
.blog-index__filter:hover { border-color: var(--color-text-muted); color: var(--color-text-primary); }
.blog-index__filter[aria-pressed="true"] { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-bg); }
.blog-index__filter[aria-pressed="true"] span { color: inherit; opacity: .7; }

.blog-index__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-4);
}
.blog-index__grid li[hidden], .blog-index__feature[hidden] { display: none; }

.blog-index__card, .blog-index__feature {
  display: flex; flex-direction: column; gap: .5rem; height: 100%;
  padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-top: 4px solid var(--fl-border);
  border-radius: var(--radius-xl); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.blog-index__card:hover, .blog-index__feature:hover {
  border-color: var(--fl-border); transform: translateY(-3px);
  box-shadow: 0 10px 24px -14px var(--fl-text);
}
.blog-index__feature {
  padding: var(--space-8) var(--space-6); border-top-width: 1px; border-left: 6px solid var(--fl-border);
  background: linear-gradient(120deg, var(--fl-bg), var(--color-surface) 70%);
}
.blog-index__feature .blog-index__card-title { font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: -.02em; line-height: 1.2; }
.blog-index__feature .blog-index__card-desc { font-size: .95rem; max-width: 680px; }

.blog-index__card-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.blog-index__latest {
  padding: .1rem .55rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-bg); background: var(--fl-text); border-radius: var(--radius-full);
}
.blog-index__tag {
  padding: .1rem .55rem; font-size: .7rem; font-weight: 700;
  color: var(--fl-text); background: var(--fl-bg); border: 1px solid var(--fl-border);
  border-radius: var(--radius-full);
}
.blog-index__card-badge, .home-from-blog__card-badge {
  display: inline-block; margin-left: .4rem; padding: .05rem .45rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .02em;
  color: var(--color-accent); border: 1px solid var(--color-accent);
  border-radius: var(--radius-full); vertical-align: middle;
}
.blog-index__card-top .blog-index__card-badge { margin-left: 0; }
.blog-index__card-title { font-size: 1.05rem; font-weight: 800; color: var(--color-text-primary); line-height: 1.3; }
.blog-index__card-desc { font-size: .84rem; color: var(--color-text-secondary); line-height: 1.55; }
.blog-index__card-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem;
  margin-top: auto; padding-top: .6rem; border-top: 1px dashed var(--color-border);
  font-size: .72rem; color: var(--color-text-muted);
}
.blog-index__card-app { font-weight: 700; color: var(--fl-text); }
@media (max-width: 640px) {
  .blog-index__hero { padding: var(--space-6) var(--space-4); }
  .blog-index__feature { padding: var(--space-5); }
  .blog-index__reports { padding: var(--space-4); }
}

/* ── "Read more" other-posts links, injected into each post page ── */
.blog-read-more { max-width: 760px; margin: 2rem auto 0; border-top: 1px solid var(--color-border); padding: var(--space-6) 0 0; }
.blog-read-more__title { font-size: 1rem; font-weight: 800; color: var(--color-text-primary); margin: 0 0 var(--space-3); }
.blog-read-more__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-3);
}
.blog-read-more__card {
  display: flex; flex-direction: column; gap: .25rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); text-decoration: none;
  transition: border-color .2s ease;
}
.blog-read-more__card:hover { border-color: var(--color-accent); }
.blog-read-more__card-title { font-size: .85rem; font-weight: 700; color: var(--color-text-primary); }
.blog-read-more__card-desc { font-size: .78rem; color: var(--color-text-secondary); line-height: 1.5; }

/* ── "From the blog" bidirectional link, injected into app pages ── */
.from-blog { border-top: 1px solid var(--color-border); padding: var(--space-6) 0 0; margin-top: var(--space-6); }
.from-blog__title { font-size: 1rem; font-weight: 800; color: var(--color-text-primary); margin: 0 0 var(--space-3); }
.from-blog__link {
  display: inline-flex; flex-direction: column; gap: .15rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); text-decoration: none; max-width: 100%;
}
.from-blog__link:hover { border-color: var(--color-accent); }
.from-blog__link-title { font-size: .88rem; font-weight: 700; color: var(--color-text-primary); }
.from-blog__link-desc { font-size: .78rem; color: var(--color-text-secondary); }

/* ── Data report subtype: methodology note, key figures, tables, charts ── */
.report-method {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin: 0 0 1.4rem;
}
.report-method h2 {
  font-size: .82rem !important; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-text-muted); margin: 0 0 .5rem !important;
}
.report-method p { font-size: .85rem; margin: 0 0 .55rem; }
.report-method p:last-child { margin-bottom: 0; }

.report-keyfigs { list-style: none; padding: 0 !important; margin: 0 0 1.4rem !important; }
.report-keyfigs li {
  position: relative; padding: .6rem .9rem .6rem 1.6rem; margin: 0 0 .4rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent); border-radius: var(--radius-md);
  font-size: .88rem; line-height: 1.6;
}
.report-keyfigs li::before {
  content: ""; position: absolute; left: .7rem; top: 1.05rem;
  width: .3rem; height: .3rem; border-radius: 50%; background: var(--color-accent);
}

.report-table-wrap { overflow-x: auto; margin: 0 0 1.2rem; }
.report-table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .82rem; }
.report-table th, .report-table td {
  text-align: left; vertical-align: top; padding: .5rem .7rem;
  border-bottom: 1px solid var(--color-border); line-height: 1.5;
}
.report-table thead th {
  background: var(--color-surface); font-weight: 800; color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-border); white-space: nowrap;
}
.report-table tbody tr:last-child td { border-bottom: none; }

.report-chart {
  margin: 0 0 1.3rem !important; padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.report-chart svg {
  display: block; width: 100%; height: auto; color: var(--color-text-primary);
}
.report-chart figcaption { margin-top: .6rem; }

.report-faq .faq-q { font-weight: 700; color: var(--color-text-primary); margin: 1.1rem 0 .3rem; }
.report-faq .faq-q:first-child { margin-top: 0; }

/* Citing a report: cite box in the header, per-figure quote buttons, heading links */
.report-cite {
  margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent); border-radius: var(--radius-xl);
}
.report-cite__title {
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); margin: 0 0 .5rem;
}
.report-cite__text { font-size: .9rem; line-height: 1.6; color: var(--color-text-primary); margin: 0 0 .75rem; word-break: break-word; }
.report-cite__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .82rem; }
.report-cite__actions a { color: var(--color-accent); font-weight: 700; }
.report-cite__copy, .report-quote {
  padding: .3rem .8rem; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
  color: var(--color-bg); background: var(--color-text-primary);
  border: 0; border-radius: var(--radius-full);
}
.report-cite__bib { margin-top: .75rem; font-size: .8rem; }
.report-cite__bib summary { cursor: pointer; font-weight: 700; color: var(--color-text-secondary); }
.report-cite__bib pre {
  margin: .5rem 0 0; padding: .75rem; overflow-x: auto; font-size: .75rem; line-height: 1.5;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.report-cite__note { font-size: .78rem; color: var(--color-text-muted); margin: .75rem 0 0; }

.report-keyfigs li { scroll-margin-top: 5rem; }
.report-keyfigs li:target { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--c-butter-bg); }
.report-quote {
  display: block; margin-top: .4rem; padding: .15rem .6rem; font-size: .7rem;
  color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border);
}
.report-quote:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); }

.blog-post__body h2[id] { scroll-margin-top: 5rem; }
.h-anchor { margin-left: .4rem; color: var(--color-text-muted); text-decoration: none; opacity: 0; transition: opacity .15s ease; }
.h-anchor::before { content: "#"; }
.blog-post__body h2:hover .h-anchor, .h-anchor:focus { opacity: 1; }
@media (hover: none) { .h-anchor { opacity: .5; } }

.report-sources { margin: 0 0 1.4rem; }
.report-sources h2 { font-size: 1.25rem; font-weight: 800; color: var(--color-text-primary); margin: 1.75rem 0 .75rem; }
.report-sources__list { padding-left: 1.4rem; margin: 0; font-size: .82rem; line-height: 1.6; color: var(--color-text-secondary); }
.report-sources__list li { margin-bottom: .4rem; }
.report-sources__list a { color: var(--color-accent); word-break: break-word; }