/* ==========================================================================
   Blog post (article) pages — shared page-specific styles for all 5 posts.
   Normal flowing content page (no scroll-snap), same architecture as
   thoughts.css/reviews.css. Shared button/nav/footer/cookie styles live in
   components.css; global .pg-col/.pg-title/.pg-headline/.pg-body type-scale
   primitives in base.css.
   ========================================================================== */

.post-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 min(36px, 5dvh) 20px;
}

.post-sec--body { padding-top: min(8px, 1dvh); }

.post-sec--accent {
  background: linear-gradient(var(--colour-accent), var(--colour-accent)) center / 100% 100% no-repeat;
  padding-bottom: min(56px, 8dvh);
}

.post-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;
}

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

.post-category {
  margin-top: min(18px, 2dvh);
  margin-bottom: calc(var(--size-page-title) * 0.5);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: min(0.95rem, 4.2cqw, 2.5dvh);
  letter-spacing: 0.12em;
  color: var(--colour-accent);
  text-transform: uppercase;
}

.post-headline {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-text-stroke: 0.03em currentColor;
  font-size: min(2.2rem, 8.4cqw, 3.9dvh);
  line-height: 1.14;
  letter-spacing: calc(0.029em + 0.2pt);
  text-transform: uppercase;
  color: var(--colour-ink);
  text-wrap: balance;
}

.post-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: min(20px, 2.4dvh);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.78rem, 3.4cqw, 2dvh);
  letter-spacing: 0.06em;
  color: #5C646B;
  text-transform: uppercase;
}

.post-byline span:last-child { opacity: 0.7; }
.post-byline span:nth-child(2) { opacity: 0.5; }

.post-divider {
  height: 1px;
  background: var(--colour-ink-12);
  width: 100%;
  margin-bottom: min(28px, 3.4dvh);
}

.post-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  overflow: hidden;
  background: var(--colour-accent-35);
  margin-bottom: min(24px, 2.8dvh);
}

.post-cols {
  display: flex;
  flex-direction: column;
  gap: min(20px, 2.4dvh);
  width: 100%;
}

.post-p {
  margin: 0 0 min(18px, 2dvh) 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(1rem, 4.5cqw, 2.6dvh);
  line-height: 1.55;
  color: var(--colour-ink);
}

.post-p--lead {
  font-weight: 400;
  font-size: min(1.12rem, 5cqw, 2.9dvh);
  line-height: 1.5;
}

.post-quote {
  margin: min(14px, 1.6dvh) 0 min(26px, 3dvh) 0;
  padding-left: min(20px, 4cqw);
  border-left: 3px solid var(--colour-accent);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: min(1.35rem, 6cqw, 3.2dvh);
  line-height: 1.3;
  color: var(--colour-accent);
}

.post-subhead {
  margin: min(10px, 1.2dvh) 0 min(16px, 1.8dvh) 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: min(1.4rem, 6.4cqw, 3.2dvh);
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--colour-ink);
}

.post-quote + .post-subhead + .post-p { color: var(--colour-accent); }

@media (min-width: 760px) {
  .post-sec { background-size: 100% 100%; }
  .post-sec .pg-col { max-width: min(1200px, calc(100vw - 48px)); }
  .post-sec .pg-title { font-size: min(16pt, 3dvh); }
  .post-headline { font-size: min(38px, 4.8dvh); max-width: 75%; }
  .post-p { font-size: min(13pt, 2.5dvh); }

  .post-cols {
    display: block;
    column-count: 3;
    column-gap: min(34px, 3cqw);
    column-fill: auto;
  }

  .post-cols .post-figure {
    width: 100%;
    aspect-ratio: 3 / 2;
    margin: 0 0 min(18px, 2dvh) 0;
    break-inside: avoid;
  }
}