/* ==========================================================================
   Thoughts (blog index) page — page-specific styles.
   Normal flowing content page (no scroll-snap), same architecture as
   marks.css/paradigm.css/reviews.css. Shared button/nav/footer/cookie styles
   live in components.css; global .pg-col/.pg-title/.pg-headline/.pg-body/
   .pg-cta-head type-scale primitives in base.css/components.css.
   ========================================================================== */

.th-sec {
  background: linear-gradient(var(--colour-bg), var(--colour-bg)) center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: min(56px, 8dvh) 20px;
}

.th-sec--tight { padding-top: max(6px, calc(min(56px, 8dvh) - 50px)); }

.th-sec--accent {
  background: linear-gradient(var(--colour-accent), var(--colour-accent)) center / 100% 100% no-repeat;
}

.th-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.8rem, 3.6cqw, 2.1dvh);
  letter-spacing: 0.08em;
  color: var(--colour-ink);
  text-transform: uppercase;
}

.th-back:hover { color: var(--colour-accent); }

.th-sec--accent .pg-cta-body {
  margin: min(16px, 1.8dvh) 0 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.95rem, 4.4cqw, 2.6dvh);
  line-height: 1.4;
  color: var(--colour-bg);
}

.th-eyebrow {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.95rem, 4.2cqw, 2.5dvh);
  letter-spacing: 0.12em;
  color: var(--colour-accent);
  text-transform: uppercase;
}

.th-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: min(22px, 3cqw);
  margin-top: min(20px, 2.2dvh);
  width: 100%;
}

.th-article {
  display: flex;
  flex-direction: column;
  gap: min(12px, 1.4dvh);
  padding: 10px;
  border-radius: 14px;
  color: var(--colour-ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.th-article:hover {
  color: var(--colour-accent);
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(58, 63, 67, 0.16);
}

.th-article-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background: var(--colour-accent-35);
}

.th-article-category {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: min(0.62rem, 2.7cqw, 1.6dvh);
  letter-spacing: 0.12em;
  color: var(--colour-accent);
  text-transform: uppercase;
}

.th-article-title {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(1rem, 4.5cqw, 2.5dvh);
  letter-spacing: -0.5pt;
  line-height: 1.22;
  color: var(--colour-ink);
}

.th-article-excerpt {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.85rem, 3.7cqw, 2.1dvh);
  line-height: 1.4;
  color: #5C646B;
}

@media (min-width: 760px) {
  .th-sec { background-size: 100% 100%; }
  .th-sec .pg-col { max-width: min(1200px, calc(100vw - 48px)); }
  .th-sec .pg-title { font-size: min(16pt, 3dvh); }
  .th-sec .pg-headline { font-size: min(44px, 5.2dvh); max-width: 900px; }
  .th-sec .th-eyebrow { font-size: min(12pt, 2.4dvh); }
  .th-sec .pg-body { font-size: min(12pt, 2.4dvh); line-height: 1.35; max-width: 820px; }
  .th-sec .pg-cta-head { font-size: min(44px, 5.2dvh); max-width: 820px; }
  .th-sec .pg-cta-body { font-size: min(12pt, 2.4dvh); line-height: 1.35; max-width: 820px; }
  .th-sec .pg-btn { font-size: min(12pt, 2.4dvh); width: 400px; align-self: flex-start; }

  .th-grid { grid-template-columns: repeat(3, 1fr); }
  .th-article-title { font-size: calc(min(13pt, 2.5dvh) + 5pt); }
}