/* ==========================================================================
   SECTION HEADINGS — the label + large serif title used by every section
   ========================================================================== */

section { position: relative; }
.sec { padding: clamp(90px, 12vw, 160px) 0; }

/* One-screen sections (data-fit). --fs is lowered by fit-sections.js when
   content would be taller than the screen, so nothing ever overflows. */
.fit { --fs: 1; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
       padding: calc(var(--nav-height) + 4vh) 0 5vh; }
.fit > .wrap { width: 100%; }
/* Sections that should never be taller than the screen, but also shouldn't
   stretch to fill it (avoids large empty gaps) */
.fit.fit-auto { min-height: 0; padding: clamp(72px, 12vh, 128px) 0; }

/* Two columns: small label on the left, big title on the right */
.sec-head { display: grid; grid-template-columns: 220px 1fr; gap: 40px; margin-bottom: calc(clamp(28px, 6vh, 64px) * var(--fs, 1)); }
.sec-label {
  font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  padding-top: 16px; display: flex; align-items: center; gap: 12px;
}
.sec-label::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--green); transform: rotate(45deg); }
.sec-title { font-family: var(--serif); font-weight: 350; font-size: calc(clamp(32px, min(4.4vw, 8vh), 64px) * var(--fs, 1)); line-height: 1.06; letter-spacing: -.025em; }
.sec-title em { color: var(--ink-2); }

@media (max-width: 980px) {
  .sec-head { grid-template-columns: 1fr; gap: 14px; }
}
/* Phones & very short screens: sections flow at natural height */
@media (max-width: 760px), (max-height: 520px) {
  .fit, .fit.fit-auto { min-height: 0; display: block; padding: 64px 0; }
}