/* v2.1 refined design — scoped to Le Journal (blogs) */

body[data-page="blogs"] {
  --paper: oklch(0.989 0.006 86);
  --paper-2: oklch(0.972 0.009 84);
  --ink: #14253f;
  --ink-2: #3a4a63;
  --ink-soft: oklch(0.505 0.02 256);
  --line: oklch(0.892 0.006 256);
  --line-soft: oklch(0.935 0.004 256);
  --accent: #b18a4e;
  --accent-deep: #8a6a35;
  --accent-tint: #f0e7d3;
  --navy: #0e1c33;
  --gutter: clamp(20px, 5vw, 76px);
  --base-size: 17px;
  --radius-btn: 2px;
  --radius-card: 5px;
  --section-scale: 1;
  font-size: var(--base-size);
  line-height: 1.6;
}

body[data-page="blogs"] .eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.22em;
}

body[data-page="blogs"] .btn {
  border-radius: var(--radius-btn);
}

body[data-page="blogs"] .btn-gold {
  background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 92%, white) 0%, var(--accent) 52%, var(--accent-deep) 100%);
  color: #fff;
  box-shadow: 0 1px 0 color-mix(in oklch, white 40%, transparent) inset, 0 10px 24px -16px oklch(0.55 0.09 70 / 0.7);
}

body[data-page="blogs"] .btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 color-mix(in oklch, white 50%, transparent) inset, 0 16px 32px -16px oklch(0.55 0.09 70 / 0.75);
}

body[data-page="blogs"] section.block {
  padding: calc(clamp(72px, 8.5vw, 128px) * var(--section-scale)) 0;
}

/* Hero only — list cards mount after API fetch; hiding them caused empty grid gaps */
body[data-page="blogs"] .page-hero .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body[data-page="blogs"] .page-hero .reveal.in {
  opacity: 1;
  transform: none;
}

body[data-page="blogs"] #journal-list .post-card,
body[data-page="blogs"] #journal-list .featured,
body[data-page="blogs"] #journal-list .subscribe {
  opacity: 1;
  transform: none;
}

body[data-page="blogs"] .scroll-prog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  z-index: 100;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
}

body[data-page="blogs"] .totop {
  bottom: calc(clamp(16px, 3vw, 30px) + 56px + 14px);
}

body[data-page="blogs"] .chip,
body[data-page="blogs"] .post-card .cover,
body[data-page="blogs"] .featured-media,
body[data-page="blogs"] .subscribe,
body[data-page="blogs"] .login-card,
body[data-page="blogs"] .composer {
  border-radius: var(--radius-card);
}