/**
 * ScaleCraft project detail page - reusable template
 * Version: 1.0 (draft) | 2026-09-01
 *
 * Depends on: bureau-tokens.css (tokens, .sc-* utilities, shared motion
 * utilities .sc-settle / .sc-draw-x / .sc-draw-y / .sc-fieldmark).
 * Loaded site-wide, scoped to .sc-pj, inert elsewhere.
 *
 * One stylesheet, one section structure, for every /work/<project>/ page.
 * The layout is built to carry the "what changed" narrative: the header
 * states the situation in one line, the body sections are quiet, and
 * "What changed" is the one full-bleed dark field on the page.
 *
 * Section order:
 *   1  .sc-pj--header    Pine field + mark motif. Name, one-line, meta.
 *   2  .sc-pj--section   "The situation"
 *   3  .sc-pj--section   "The work"   (+ optional figure)
 *   4  .sc-pj--changed   Graphite field. "What changed" - the payoff.
 *   5  .sc-pj--quote     "In their words"  (+ optional headshot)
 *   6  .sc-pj--cta       Graphite. Start Here + back to Work.
 */

.sc-pj {
  box-sizing: border-box;
  width: 100%;
  padding: var(--sc-space-6) var(--sc-grid-margin);   /* 89 / 88 */
  background-color: var(--sc-chalk);
  color: var(--sc-graphite);
}

.sc-pj * { box-sizing: border-box; }
.sc-pj :where(h1, h2, h3, p, blockquote, figure, figcaption, cite, ul, li, span) { color: inherit; }
.sc-pj :where(h1, h2, h3, p, blockquote, figure, figcaption, ul) { margin: 0; }

.sc-pj__inner { max-width: var(--sc-grid-max-width); margin: 0 auto; }

.sc-pj__label {
  display: block;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  text-transform: uppercase;
  color: var(--sc-pine);
  margin-bottom: var(--sc-space-3);
}


/* ================================================================
   1 - HEADER   (Pine field + mark motif)
   ================================================================ */

.sc-pj--header {
  background-color: var(--sc-graphite);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-7);
  padding-bottom: var(--sc-space-7);
  position: relative;
  overflow: hidden;
}
.sc-pj--header .sc-pj__inner { position: relative; }

.sc-pj__fieldmark {
  position: absolute;
  top: -16%;
  right: -12%;
  width: min(56%, 600px);
}
@media (max-width: 760px) { .sc-pj__fieldmark { display: none; } }

.sc-pj__backlink {
  display: inline-block;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  text-transform: uppercase;
  color: var(--sc-chalk-68);
  border-bottom: 0;
  margin-bottom: var(--sc-space-5);
}
.sc-pj__backlink:hover { color: var(--sc-chalk); border-bottom: 0; }

.sc-pj__title { max-width: 18ch; }
.sc-pj__oneline {
  margin-top: var(--sc-space-4);
  max-width: 46ch;
  color: var(--sc-chalk-68);
}
.sc-pj__meta {
  margin-top: var(--sc-space-5);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  text-transform: uppercase;
  color: var(--sc-chalk-68);
}


/* ================================================================
   2 / 3 - BODY SECTIONS   (Chalk)
   ================================================================ */

.sc-pj__body { max-width: 62ch; }
.sc-pj__body p { margin-top: var(--sc-space-3); }
.sc-pj__body p:first-child { margin-top: 0; }

.sc-pj__scope {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-2);
  margin-top: var(--sc-space-4);
}
.sc-pj__scope span {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  text-transform: uppercase;
  color: var(--sc-graphite);
  border: 1px solid var(--sc-graphite-14);
  padding: var(--sc-space-1) var(--sc-space-2);
}

/* Optional figure: a brand mark, a screenshot, or a photo of the work.
   Plain <img> bleeds to the column width; wrap it in .sc-pj__frame to
   sit a logo / mark on a framed panel instead. */
.sc-pj__figure { margin: var(--sc-space-5) 0 0; max-width: 34rem; }
.sc-pj__figure > img { display: block; width: 100%; height: auto; }
.sc-pj__frame {
  aspect-ratio: 4 / 3;
  background-color: var(--sc-chalk);
  border: 1px solid var(--sc-stone);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sc-space-5);
}
.sc-pj__frame img { display: block; width: auto; max-width: 100%; max-height: 100%; }
.sc-pj__figure figcaption {
  margin-top: var(--sc-space-2);
  font-size: var(--sc-type-b3-size);
  line-height: var(--sc-type-b3-line-height);
  color: rgba(27, 31, 35, .6);
}


/* ================================================================
   4 - WHAT CHANGED   (Graphite field - the one dark payoff)
   ================================================================ */

.sc-pj--changed {
  background-color: var(--sc-graphite);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-7);
  padding-bottom: var(--sc-space-7);
}
.sc-pj--changed .sc-pj__label {
  color: var(--sc-chalk-68);
  position: relative;
  padding-bottom: var(--sc-space-2);
}
.sc-pj__changed-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background-color: var(--sc-copper);      /* the one Copper signal on this page */
  transform-origin: left;
}

.sc-pj__outcomes { max-width: 40rem; }
.sc-pj__outcome {
  padding: var(--sc-space-4) 0;
  border-top: 1px solid rgba(245, 245, 242, .14);
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: var(--sc-type-d4-size);
  line-height: var(--sc-type-d4-line-height);
  letter-spacing: var(--sc-type-d4-tracking);
}
.sc-pj__outcome:first-child { border-top: 0; padding-top: 0; }
.sc-pj__outcome:last-child { padding-bottom: 0; }

.sc-pj__changed-note {
  margin-top: var(--sc-space-5);
  max-width: 52ch;
  font-size: var(--sc-type-b3-size);
  line-height: var(--sc-type-b3-line-height);
  color: var(--sc-chalk-55);
}


/* ================================================================
   5 - IN THEIR WORDS   (Chalk)
   ================================================================ */

.sc-pj__quote-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--sc-space-5);
  align-items: start;
}

.sc-pj__headshot {
  margin: 0;
  width: 180px;
  background-color: var(--sc-stone);
  aspect-ratio: 1 / 1;
}
.sc-pj__headshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
}

.sc-pj__pullquote {
  position: relative;
  padding-left: var(--sc-space-4);
}
.sc-pj__pullquote-rule {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--sc-copper);
}
.sc-pj__pullquote p {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: var(--sc-type-d3-size);
  line-height: var(--sc-type-d3-line-height);
  letter-spacing: var(--sc-type-d3-tracking);
  max-width: 22ch;
}
.sc-pj__quote-full {
  margin-top: var(--sc-space-4);
  max-width: 60ch;
}
.sc-pj__quote-attr {
  margin-top: var(--sc-space-3);
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b3-size);
  color: rgba(27, 31, 35, .6);
}

@media (max-width: 820px) {
  .sc-pj__quote-grid { grid-template-columns: 1fr; gap: var(--sc-space-4); }
  .sc-pj__headshot { width: 140px; }
}


/* ================================================================
   6 - CTA   (Graphite full-bleed, matches the rest of the site)
   ================================================================ */

.sc-pj--cta {
  background-color: var(--sc-graphite);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-7);
  padding-bottom: var(--sc-space-7);
}
.sc-pj__cta { max-width: 40rem; }
.sc-pj__cta .sc-d2 { margin: 0; color: var(--sc-chalk); }
.sc-pj__cta-row {
  margin-top: var(--sc-space-5);
  display: flex;
  align-items: center;
  gap: var(--sc-space-4);
  flex-wrap: wrap;
}
.sc-pj__cta-row .sc-btn.sc-btn-tertiary { color: var(--sc-chalk); }
.sc-pj__cta-row .sc-btn.sc-btn-tertiary:hover { color: var(--sc-copper); }


/* ================================================================
   RESPONSIVE - section padding
   ================================================================ */

@media (max-width: 1024px) {
  .sc-pj { padding-left: var(--sc-space-5); padding-right: var(--sc-space-5); }
}
@media (max-width: 600px) {
  .sc-pj {
    padding-top: var(--sc-space-5);
    padding-bottom: var(--sc-space-5);
    padding-left: var(--sc-space-3);
    padding-right: var(--sc-space-3);
  }
  .sc-pj--header,
  .sc-pj--changed,
  .sc-pj--cta {
    padding-top: var(--sc-space-6);
    padding-bottom: var(--sc-space-6);
  }
}