/* PStyle — Projects styles (loaded on project archive/single + industry_cat tax).
   main.css (global) is already loaded; only project-specific rules live here.
   Luxury minimalism: editorial story grid, hairline dividers, serif display,
   accent used only for section labels + links. Responsive 375 → 1440.
   All raw values come from tokens.css via var(--…). */

/* ============================================================ Archive intro */
/* The intro used to run flush into the grid (padding-bottom: 0) because both
   were white and the seam was invisible. Since 2026-08-12 the intro sits on the
   muted surface, so the band would end on the last line of the lead — it needs
   air on the closing side too. Kept tighter than --section-y so the intro still
   reads as the head of the grid, not as a separate chapter. */
.ps-projects-intro {
  padding-bottom: var(--sp-5);
}

.ps-projects-intro__head {
  max-width: var(--container-narrow);
}

.ps-projects-intro__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.ps-projects-intro__lead {
  max-width: 60ch;
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted);
}

/* Industry filter — plain text links, no framework. */
.ps-projects-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.ps-projects-filter__link {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
}

.ps-projects-filter__link:hover,
.ps-projects-filter__link:focus-visible {
  color: var(--accent);
}

.ps-projects-filter__link.is-current {
  color: var(--ink);
}

/* ============================================================ Grid section
   Ground comes from .ps-surface--white on the <section> (archive-project.php and
   taxonomy-industry_cat.php). Deliberately NO background declaration here: this
   file loads after main.css, so a per-template `background` has the same
   specificity but wins the cascade and the surface utility would lose silently. */
.ps-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6) var(--sp-4);
}

/* ============================================================ Project card
   Mirrors the Home featured-projects card so archive/single/tax read as one
   family. Media zoom on hover; accent only on the industry label + link. */
.ps-project-card {
  min-width: 0;
}

.ps-project-card__link {
  display: flex;
  flex-direction: column;
  color: var(--ink);
}

.ps-project-card__link:hover,
.ps-project-card__link:focus-visible {
  color: var(--ink);
}

.ps-project-card__media {
  display: block;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.ps-project-card__media .ps-media,
.ps-project-card__media .ps-ph {
  transition: transform var(--dur) var(--ease);
}

.ps-project-card__link:hover .ps-media,
.ps-project-card__link:hover .ps-ph,
.ps-project-card__link:focus-visible .ps-media,
.ps-project-card__link:focus-visible .ps-ph {
  transform: scale(1.03);
}

.ps-project-card__body {
  display: block;
}

.ps-project-card__industry {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--accent);
}

.ps-project-card__title {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  line-height: 1.1;
  color: var(--ink);
}

.ps-project-card__subtitle {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--muted);
}

.ps-project-card__more {
  color: var(--ink);
}

.ps-project-card__link:hover .ps-project-card__more,
.ps-project-card__link:focus-visible .ps-project-card__more {
  color: var(--accent);
}

/* Gentle stagger down the rows (repeating every 3 columns). */
.ps-project-card.ps-reveal:nth-child(3n + 2) { transition-delay: 0.07s; }
.ps-project-card.ps-reveal:nth-child(3n + 3) { transition-delay: 0.14s; }

/* ============================================================ Single: hero */
/* The hero sits on the muted ground (2026-08-12). Before that it was unpainted
   body-white and ran into the equally white story section below it — measured
   854px of continuous white on the case-study template, the exact "the white
   sections merge" the client objected to. It now needs a closing edge as well,
   since the band ends where the subtitle ends. */
.ps-project-hero {
  position: relative;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-6);
}

.ps-project-hero__media {
  overflow: hidden;
  margin-bottom: var(--sp-5);
}

.ps-project-hero__media .ps-ph {
  --ps-ph-ratio: 16 / 9;
}

.ps-project-hero__inner {
  max-width: var(--container-narrow);
}

.ps-project-hero__industry {
  margin: 0 0 var(--sp-2);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--accent);
}

.ps-project-hero__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.ps-project-hero__subtitle {
  margin: 0 0 var(--sp-5);
  max-width: 52ch;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  font-style: italic;
  line-height: 1.25;
  color: var(--muted);
}

/* Meta as a hairline-separated definition row. */
.ps-project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-6);
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.ps-project-meta__item {
  margin: 0;
}

.ps-project-meta__label {
  margin: 0 0 0.35em;
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--muted);
}

.ps-project-meta__value {
  margin: 0;
  font-size: var(--step-0);
  color: var(--ink);
}

/* ============================================================ Single: story */
.ps-project-story {
  padding-bottom: var(--sp-6);
}

.ps-project-story .ps-prose {
  font-size: var(--step-1);
  line-height: 1.7;
}

/* ============================================================ Single: Challenge / Solution
   Ground: assigned in single-project.php by the surface-rhythm walk — muted on a
   complete project (the 01–04 spine is the page's grey "pause"), but white when
   an earlier conditional block is missing. The hairlines stay; the background
   must not be restated here or it would beat the surface utility. */
.ps-project-cs {
  border-block: 1px solid var(--line);
}

.ps-project-cs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.ps-project-cs__heading {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--accent);
}

.ps-project-cs__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  line-height: 1.3;
  color: var(--ink);
}

/* ============================================================ Single: gallery */
.ps-project-gallery__heading {
  margin: 0 0 var(--sp-5);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
}

.ps-project-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

/* Each gallery item is a media panel, not a section, so it needs a ground that
   differs from whichever ground the section itself took — otherwise the tiles
   disappear into it. The section is white on a complete project and muted when an
   earlier conditional block is missing, so the tile tone follows it. */
.ps-project-gallery__item {
  margin: 0;
  overflow: hidden;
}

.ps-project-gallery.ps-surface--white .ps-project-gallery__item {
  background: var(--surface-2);
}

.ps-project-gallery.ps-surface--muted .ps-project-gallery__item {
  background: var(--surface-1);
}

.ps-project-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================ Single: related industry
   Ground: assigned in single-project.php, which walks the sections that actually
   render and alternates the light grounds (see the surface-rhythm block there).
   This section can therefore land on EITHER light ground depending on which of
   the conditional blocks above it exist, so nothing here may paint a background —
   the per-pair corrections that used to live here (.ps-project-gallery + …) were
   removed with that change, because two rules deciding the same ground is how the
   alternation silently breaks. */
.ps-project-related {
  padding-block: var(--sp-6);
}

/* The section holds only the hairline-boxed related-industry link today, but any
   media that lands here later must not sit on the same tone as its section or it
   would merge into it — so the placeholder ground follows whichever ground the
   section took, instead of being pinned to white. */
.ps-project-related.ps-surface--muted .ps-project-card__media,
.ps-project-related.ps-surface--muted .ps-media {
  background: var(--surface-1);
}

.ps-project-related.ps-surface--white .ps-project-card__media,
.ps-project-related.ps-surface--white .ps-media {
  background: var(--surface-2);
}

.ps-project-related__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}

.ps-project-related__link:hover,
.ps-project-related__link:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
}

.ps-project-related__label {
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--muted);
}

.ps-project-related__name {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  line-height: 1.1;
}

.ps-project-related__name .ps-icon {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--dur-fast) var(--ease);
}

.ps-project-related__link:hover .ps-project-related__name,
.ps-project-related__link:focus-visible .ps-project-related__name {
  color: var(--accent);
}

.ps-project-related__link:hover .ps-project-related__name .ps-icon,
.ps-project-related__link:focus-visible .ps-project-related__name .ps-icon {
  transform: translateX(0.3em);
}

/* ============================================================ Single: prev / next */
.ps-project-nav {
  border-top: 1px solid var(--line);
}

.ps-project-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
}

.ps-project-nav__side--next {
  text-align: right;
}

.ps-project-nav__link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35em;
  color: var(--ink);
}

.ps-project-nav__side--next .ps-project-nav__link {
  align-items: flex-end;
}

.ps-project-nav__dir {
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--muted);
}

.ps-project-nav__ttl {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--w-reg);
  line-height: 1.15;
}

.ps-project-nav__link:hover .ps-project-nav__ttl,
.ps-project-nav__link:focus-visible .ps-project-nav__ttl {
  color: var(--accent);
}

/* ============================================================ Single: CTA
   Ground + inversion come from .ps-surface--dark ps-on-dark in single-project.php.
   The three former per-section overrides are gone because the shared dark scope
   produces the identical computed value (measured): section colour = var(--white);
   .ps-eyebrow reads var(--muted) which re-scopes to --muted-invert
   (rgba(255,255,255,0.66)); h2 reads var(--ink) which re-scopes to var(--white).
   The primary button keeps the untouched --accent fill. */
.ps-project-cta__inner {
  max-width: var(--container-narrow);
  text-align: center;
  margin-inline: auto;
}

.ps-project-cta__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
}

/* ============================================================ Responsive */
@media (max-width: 980px) {
  .ps-projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5) var(--sp-4);
  }

  .ps-project-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .ps-project-cs__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

@media (max-width: 560px) {
  .ps-projects-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .ps-project-gallery__grid {
    grid-template-columns: 1fr;
  }

  .ps-project-meta {
    gap: var(--sp-4);
  }

  .ps-project-nav__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .ps-project-nav__side--next {
    text-align: left;
  }

  .ps-project-nav__side--next .ps-project-nav__link {
    align-items: flex-start;
  }
}

/* ============================================================ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ps-project-card__link:hover .ps-media,
  .ps-project-card__link:hover .ps-ph,
  .ps-project-card__link:focus-visible .ps-media,
  .ps-project-card__link:focus-visible .ps-ph {
    transform: none;
  }
}

/* ============================================================================
   PHASE B — Case-study framing (added 2026-07-20)
   Card "Case study" label + one-line outcome, and the single-project numbered
   case-study spine (01 Challenge / 02 Approach / 03 Solution / 04 Result +
   optional metric + optional quote). Appended, non-destructive; reuses the
   existing .ps-project-cs / .ps-project-cs__heading / __text typography.
   ============================================================================ */

/* ---- Card: "Case study" eyebrow (muted, above the accent industry label) --- */
.ps-project-card__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--muted);
}

/* ---- Card: one-line outcome hint (clamp to a single line) ------------------ */
.ps-project-card__outcome {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

/* ---- Single: case-study spine (replaces the old two-column CS grid) -------- */
.ps-project-cs__spine {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-project-cs__step {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-5);
  align-items: start;
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.ps-project-cs__step:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Large typographic index — soft watermark grey, not accent (accent stays on
   the section heading only, per the Quiet Cinema restraint). */
.ps-project-cs__num {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 0.9;
  color: var(--line-strong);
  font-variant-numeric: tabular-nums;
}

.ps-project-cs__content {
  max-width: 60ch;
}

/* Headline metric (client-fill; hidden until set) — the one place accent is
   allowed in the spine, and only when a real number exists. */
.ps-project-cs__metric {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  margin: var(--sp-4) 0 0;
}

.ps-project-cs__metric-value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 1;
  color: var(--accent);
}

.ps-project-cs__metric-label {
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--muted);
}

/* Client quote (client-fill; hidden until set). */
.ps-project-cs__quote {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.ps-project-cs__quote-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: var(--w-reg);
  line-height: 1.3;
  color: var(--ink);
}

.ps-project-cs__quote-role {
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--muted);
}

/* Spine: stack the index above the content on small screens. */
@media (max-width: 560px) {
  .ps-project-cs__step {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
  }

  .ps-project-cs__num {
    font-size: var(--step-3);
  }
}