/* ============================================================================
 * Squatch CC — SUBPAGE DELIGHT LAYER (inner pages only)
 * Companion to delight.css (which owns the homepage). Loads AFTER
 * dist/output.css + delight.css; reuses --c-* tokens and the --ease-out /
 * --d-* / --shadow-* vars delight.css already defines.
 *
 * Scope: subpage-specific components the homepage doesn't have —
 *   .member (team), .block (case study), .tag, .pullquote, .field (form),
 *   .crumb, page-hero heading rhythm. NO homepage selectors here.
 * Every rule fails open: no motion under prefers-reduced-motion; no layout
 * shift if a class is absent.
 * ========================================================================== */

/* ── Heading rhythm — balanced titles + a consistent heading→lede gap ────── */
.page-hero h1,
.section h2,
.section h3,
.block h3,
.member__name,
.card__title { text-wrap: balance; }

.page-hero .lede,
.section h2 + .lede,
.section h1 + .lede { margin-top: .85rem; }

.eyebrow + h1,
.eyebrow + h2 { margin-top: .35rem; }

/* ── TEAM — member cards get a composed lift + avatar warmth ─────────────── */
.member {
  transition: transform var(--d-med, 240ms) var(--ease-out, cubic-bezier(0.2,0.7,0.2,1)),
              box-shadow var(--d-med, 240ms) var(--ease-out, cubic-bezier(0.2,0.7,0.2,1));
}
.member:hover,
.member:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-cover, 0 12px 30px -12px rgba(58,50,38,.26));
}
.member__avatar {
  transition: transform var(--d-med, 240ms) var(--ease-out, cubic-bezier(0.2,0.7,0.2,1)),
              box-shadow var(--d-med, 240ms) var(--ease-out, cubic-bezier(0.2,0.7,0.2,1));
}
.member:hover .member__avatar,
.member:focus-within .member__avatar {
  transform: scale(1.05);
  box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--c-accent) 55%, transparent);
}

/* Reveal targets for team members (enhance.js only reveals a fixed set;
 * these give members the same staggered entrance in that grid). */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .member.reveal-item { transition-delay: .04s; }
  .js-reveal .team-std .member.reveal-item:nth-child(2) { transition-delay: .12s; }
}

/* ── CASE STUDY — problem/approach blocks + pullquote ────────────────────── */
.block {
  transition: transform var(--d-med, 240ms) var(--ease-out, cubic-bezier(0.2,0.7,0.2,1));
}
.block:hover { transform: translateY(-3px); }
.block .eyebrow { transition: color var(--d-fast, 140ms) var(--ease-out, ease); }
.block:hover .eyebrow { color: var(--c-accent-text); }

.pullquote {
  position: relative;
  transition: box-shadow var(--d-med, 240ms) var(--ease-out, cubic-bezier(0.2,0.7,0.2,1)),
              border-color var(--d-med, 240ms) var(--ease-out, cubic-bezier(0.2,0.7,0.2,1));
}
.pullquote:hover {
  box-shadow: var(--shadow-cover, 0 12px 30px -12px rgba(58,50,38,.26));
  border-color: color-mix(in oklab, var(--c-accent) 45%, transparent);
}

/* Case-study hero figure gets the same gentle zoom-on-hover the tiles have */
.media-split__figure img { transition: transform var(--d-med, 240ms) var(--ease-out, ease); }
.media-split__figure:hover img { transform: scale(1.02); }

/* ── TAGS — quiet hover warmth ───────────────────────────────────────────── */
.tag {
  transition: transform var(--d-fast, 140ms) var(--ease-out, ease),
              border-color var(--d-fast, 140ms) var(--ease-out, ease),
              color var(--d-fast, 140ms) var(--ease-out, ease);
}
.tag:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--c-accent) 55%, transparent);
  color: var(--c-accent-text);
}

/* ── BREADCRUMB — underline reveal like the nav links ────────────────────── */
.crumb a { position: relative; text-decoration: none; }
.crumb a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 2px; border-radius: 2px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--d-med, 240ms) var(--ease-out, ease);
}
.crumb a:hover::after,
.crumb a:focus-visible::after { transform: scaleX(1); }

/* ── FORM (lets-talk) — inputs settle into focus, submit feels alive ──────── */
.field input,
.field textarea,
.field select {
  transition: border-color var(--d-fast, 140ms) var(--ease-out, ease),
              box-shadow var(--d-fast, 140ms) var(--ease-out, ease),
              background-color var(--d-fast, 140ms) var(--ease-out, ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--c-accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-accent) 22%, transparent);
}
.form .btn { transition: transform var(--d-fast, 140ms) var(--ease-out, ease); }
.form .btn:active { transform: translateY(1px) scale(.99); }

/* Legal prose — long lists read calmer with a touch more rhythm */
.section li { text-wrap: pretty; }

@media print {
  .member, .block, .pullquote, .tag, .media-split__figure img { transform: none !important; box-shadow: none !important; }
}