/* Blog-only bridge. Loaded after Source's screen.css AND after site.css (swasthiq.com's own compiled
   stylesheet), so production owns the header, footer, fonts and colour tokens, and this file only makes
   Ghost's own furniture sit inside that language. Tokens below (--ink, --slate, --faint, --navy,
   --teal-700, --hairline, --soft, --paper) are production's, defined in site.css. Nothing new invented. */

body,
.gh-main,
.gh-article,
.gh-card-title,
.gh-card-excerpt {
  font-family: 'Montserrat', 'Mukta', sans-serif;
  color: var(--ink);
}

body { background: var(--paper); }

/* Source draws headings and UI from --font-sans (Inter by default). Point it at the site's Montserrat so
   titles match swasthiq.com and Inter is never downloaded. */
:root { --font-sans: 'Montserrat', 'Mukta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Source's own fixed header is replaced by the site's .nav2, which brings its own 88px spacer. */
.gh-navigation { display: none; }

/* Home masthead: Source paints this from the publication cover, a flat grey gradient with no counterpart
   on the site. A soft band carrying the publication line reads as part of swasthiq.com instead. */
.gh-header.is-classic {
  background: var(--soft);
  border-bottom: 1px solid var(--hairline);
  padding-top: 56px;
  padding-bottom: 56px;
}

.gh-header-title {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 24ch;
  margin-inline: auto;
}

.gh-card-title { letter-spacing: -0.02em; font-weight: 700; }
.gh-card-excerpt { color: var(--slate); }
.gh-card-meta,
.gh-card-meta time,
.gh-article-meta { color: var(--faint); }
.gh-card-tag,
.gh-article-tag { color: var(--teal-700); font-weight: 700; }
.gh-article-title { letter-spacing: -0.03em; font-weight: 800; }

.gh-content a:not(.gh-button):not(.btn2) {
  color: var(--teal-700);
  text-underline-offset: 3px;
}
.gh-content a:not(.gh-button):not(.btn2):hover { color: var(--navy); }

.gh-content .gh-button,
.gh-article .gh-button {
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .gh-header.is-classic { padding-top: 36px; padding-bottom: 36px; }
}

/* ---------- Blog home (home.hbs, SWA-229, 15 Oct 2026) ----------
   Layout glue only. Type, colour, cards, buttons and the dark band come from site.css
   (sq-hero, eyebrow2, d-xxl, d-xl, lead, card2, hov, chev, g-soft, darkv, glow2, btn2). */

.sqb-hero { position: relative; overflow: hidden; background: var(--paper); padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 56px); }
.sqb-hero-inner { position: relative; z-index: 2; text-align: center; }
.sqb-hero .d-xxl { max-width: 900px; margin-inline: auto; }
.sqb-hero-lead { max-width: 640px; margin: 20px auto 0; }

.sqb-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.sqb-topic {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 1px solid var(--hairline); border-radius: 9999px; background: var(--paper);
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.sqb-topic:hover { border-color: var(--teal); color: var(--teal-700); background: var(--soft); }

.sqb-kicker { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); }
.sqb-meta { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--faint); }

.sqb-lead-wrap { padding: 0 0 clamp(48px, 6vw, 80px); }
.sqb-lead {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
  overflow: hidden; border-radius: 24px; text-decoration: none; color: inherit;
}
.sqb-lead-img { margin: 0; min-height: 320px; background: var(--soft); }
.sqb-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sqb-lead-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(28px, 4vw, 48px); }
.sqb-lead-title { margin: 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.sqb-lead-excerpt { margin: 0; font-size: 16px; line-height: 1.6; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sqb-lead .chev { margin-top: 4px; }

.sqb-section { padding: clamp(56px, 7vw, 96px) 0; }
.sqb-lead-wrap + .sqb-section { padding-top: 0; }
.sqb-section.g-soft { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.sqb-head { margin: 0 0 clamp(28px, 4vw, 44px); }
.sqb-head .eyebrow2 { margin-bottom: 10px; }
.sqb-h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }

.sqb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sqb-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; text-decoration: none; color: inherit; }
.sqb-card-img { margin: 0; aspect-ratio: 16 / 10; background: var(--soft); }
.sqb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sqb-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.sqb-card-title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.sqb-card-excerpt { margin: 0; font-size: 14px; line-height: 1.6; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sqb-card .sqb-meta { margin-top: auto; padding-top: 6px; }
.sqb-more { margin: 32px 0 0; text-align: center; }

.sqb-cta { text-align: center; }
.sqb-cta-inner { position: relative; z-index: 2; }
.sqb-cta-title { max-width: 820px; margin-inline: auto; }
.sqb-cta-lead { max-width: 560px; margin: 20px auto 0; color: #B9C6DE; }
.sqb-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 960px) {
  .sqb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sqb-lead { grid-template-columns: 1fr; }
  .sqb-lead-img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .wrap2 { padding-left: 16px; padding-right: 16px; }
  .sqb-grid { grid-template-columns: 1fr; gap: 16px; }
  .sqb-topic { min-height: 36px; padding: 0 14px; font-size: 13px; }
}