/* ============================================================
   Post Production (/post). Links after core.css.
   Split out of the former style.css on 2026-10-18; rules unchanged, in their
   original order. ============================================================ */

.post-services .post-list {
  font-size: var(--type-h2);
  line-height: var(--lh-h2);
  text-transform: none;
}
.post-services .post-list p + p { margin-top: 4px; }
.post-services .post-list p { cursor: pointer; }
/* .post-list's own rule sets line-height 1.6 for the 12px sans list it is
   elsewhere. Inside .post-services it is this H2 serif component instead, whose
   leading belongs to the list — at 48px, 1.6 nearly doubled the row spacing. */
.post-services .post-list p { line-height: inherit; }


/* ============================================================
   Post Production page — white theme, gallery + services + team.
   Reuses about-footer, about-label patterns.
   ============================================================ */
body.post-page { background: var(--bg); color: var(--fg); }
.post-page .site-header { position: static; pointer-events: auto; }

.post-main {
  position: relative;
  z-index: 1;
  background: var(--bg);
}

.post-content {
  display: flex;
  flex-direction: column;
  gap: var(--head-foot);              /* 160px @ 1920 — the head → the gallery, and between the sections */
  padding: 0 10px 10px;               /* the head carries --page-top; the footer follows, so just the page margin below */
}

/* Hero — label + large serif title: a .page-head (core.css) — --page-top under
   the header, --head-gap between the two. */
.post-hero-label {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.post-hero-title {                  /* size: .t-display (core.css) — the page headline */
  font-family: var(--ff-serif);
  font-weight: 400;
  letter-spacing: -0.03em;
}
.post-hero-title p { margin: 0; }

/* Shared label + list (reuse about-label recipe) */
.post-label {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.post-list {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.post-list p { margin: 0; line-height: 1.6; }

/* Gallery — 3-col grid, floating cursor on hover (via work-cursor.js) */
/* Grid geometry comes from .work-grid-uniform; post.js renders the same
   .work-item cards the work grid does, so there is nothing page-specific left
   here. The old .post-gallery-card / -img / -caption rules went with it. */

/* Services — 12-col grid, label col 1, list col 7 (serif display) */
.post-services {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 80px 10px;
}
.post-services .post-label { grid-column: 1; }
.post-services .post-list { grid-column: 7 / span 6; }   /* type: shared list recipe */


/* ---- Mobile layout (≤48em) — MUST stay last in this sheet: media queries
   add no specificity, so source order decides. ---- */
@media (max-width: 48em) {
  /* --- Post page ------------------------------------------- */
  /* .post-content's gap and the head's top come from the phone tokens (core.css). */
  .post-hero-title p { display: inline; }  /* flow as single text block */
  .post-services {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .post-services .post-list { font-size: 7.18vw; }
}