/* Editorial surfaces use the public site's canonical cream, ink and grape. */
:is(.blog-index, .article-page, .newsletter-page) main { color: var(--ink); }
:is(.blog-index, .article-page) :is(.blog-masthead, .article-masthead) {
  padding-block: clamp(36px, 5vw, 60px);
  background: var(--sun-100);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-align: center;
}
:is(.blog-index, .article-page) :is(.blog-masthead, .article-masthead) h1 {
  max-width: 850px;
  margin: 0 auto 16px;
  font-size: clamp(27px, 3.7vw, 42px);
  line-height: 1.7;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}
:is(.blog-index, .article-page) :is(.blog-masthead, .article-masthead) .breadcrumb {
  margin: 0 auto 22px;
  justify-content: center;
  color: var(--ink-soft);
  background: var(--white);
}
:is(.blog-index, .article-page) .breadcrumb :is(a, .current, .sep) { color: var(--ink-soft); }
:is(.blog-index, .article-page) .breadcrumb a:hover { color: var(--grape-deep); }
:is(.blog-index, .article-page) :is(.blog-masthead, .article-masthead) .eyebrow {
  display: inline-flex;
  padding: 5px 13px;
  margin-bottom: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--grape-deep);
  font-size: 12px;
  font-weight: 700;
}
.blog-index .blog-masthead .lead { max-width: 660px; margin: 0 auto 24px; color: var(--ink-soft); font-size: 15px; line-height: 2; }
:is(.blog-index, .article-page) .blog-sidebar { min-width: 0; top: 100px; }
:is(.blog-index, .article-page) .blog-sidebar .widget {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: none;
}
:is(.blog-index, .article-page) .blog-sidebar .widget-head { align-items: start; gap: 12px; }
:is(.blog-index, .article-page) .blog-sidebar .widget-head h3 { font-size: 15px; line-height: 1.8; }
:is(.blog-index, .article-page) .blog-sidebar .widget-head .see-all { min-height: 30px; white-space: normal; text-align: end; }
:is(.blog-index, .article-page) .blog-sidebar .mini-post .info h4 { font-size: 13px; line-height: 1.8; }
:is(.blog-index, .article-page) .post-tag { display: inline-flex; align-self: flex-start; padding: 4px 11px; margin-bottom: 12px; border-radius: 8px; background: var(--grape-100); color: var(--grape-deep); font-size: 11px; font-weight: 700; }
:is(.blog-index, .article-page) .avatar { display: inline-grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--grape-100); color: var(--grape-deep); font-size: 11px; font-weight: 700; }
:is(.blog-index, .article-page) .blog-cover-placeholder { display: grid; place-items: center; width: 100%; min-height: 180px; height: 100%; background: var(--grape-100); color: var(--grape-deep); }
:is(.blog-index, .article-page) .blog-cover-placeholder::after { content: 'جی‌جی‌بو · راهنمای والدین'; font-size: 15px; font-weight: 700; }
:is(.blog-index, .article-page) .blog-cover-placeholder--lg { min-height: 260px; }
:is(.blog-index, .article-page) .newsletter { padding: 20px 0 52px; background: transparent; }
:is(.blog-index, .article-page) .newsletter-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 32px;
  align-items: center;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line) !important;
  border-radius: 24px;
  background: var(--sun-100) !important;
  color: var(--ink) !important;
  box-shadow: none;
  text-align: start;
}
:is(.blog-index, .article-page) .newsletter-copy { min-width: 0; }
:is(.blog-index, .article-page) .newsletter-copy .home-eyebrow { padding: 0; border: 0; background: transparent; color: var(--grape-deep); font-size: 12px; font-weight: 700; }
:is(.blog-index, .article-page) .newsletter-inner h2 { margin: 8px 0; color: var(--ink) !important; font-size: clamp(23px, 3vw, 30px); line-height: 1.7; }
:is(.blog-index, .article-page) .newsletter-copy > p { max-width: 620px; margin: 0 0 18px; color: var(--ink-soft) !important; font-size: 14px; line-height: 2; }
:is(.blog-index, .article-page) .newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; margin: 0; }
:is(.blog-index, .article-page) .newsletter-label { display: block; width: 100%; font-size: 13px; font-weight: 600; }
:is(.blog-index, .article-page) .newsletter-form input { flex: 1 1 210px; width: 100%; min-width: 0; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font: inherit; font-size: 14px; }
:is(.blog-index, .article-page) .newsletter-form button { flex: 0 0 auto; min-height: 46px; padding: 10px 20px; border-radius: 12px; font-size: 14px; box-shadow: none; }
:is(.blog-index, .article-page) .newsletter-note { margin: 12px 0 0 !important; color: var(--ink-soft) !important; font-size: 12px; line-height: 2; }
:is(.blog-index, .article-page) .newsletter-mascot { width: 150px; height: auto; margin: 0; object-fit: contain; transform: none; }
.newsletter-page .newsletter-result { max-width: 600px; margin: clamp(28px, 8vw, 72px) auto; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line); border-radius: 24px; background: var(--white); }
.newsletter-page .newsletter-result h1 { margin: 0 0 16px; font-size: 28px; line-height: 1.7; }
.newsletter-page .newsletter-result p { margin-bottom: 18px; color: var(--ink-soft); line-height: 2; }
.newsletter-page .newsletter-result .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.newsletter-page .newsletter-result form { margin: 0; }
.newsletter-page .newsletter-result input { width: 100%; min-height: 46px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; }
.newsletter-page .newsletter-result label { display: block; margin-block: 12px 8px; font-weight: 600; }
.newsletter-page .newsletter-result .errorlist { color: var(--berry); margin-block: 8px; }
.newsletter-page .newsletter-result .newsletter-cancel { color: var(--grape-deep); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1024px) {
  :is(.blog-index, .article-page) .blog-sidebar { position: static; }
}
@media (max-width: 640px) {
  :is(.blog-index, .article-page) .newsletter-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 20px; }
  :is(.blog-index, .article-page) .newsletter-mascot { order: -1; width: 110px; margin-inline: auto; }
  :is(.blog-index, .article-page) .newsletter-form button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.blog-index, .article-page) .reveal { opacity: 1; transform: none; transition: none; }
}