/**
 * ScaleCraft Work page - page-scoped layout
 * Version: 1.0 (draft) | 2026-09-01
 *
 * Depends on: bureau-tokens.css (tokens, .sc-* utilities, shared motion
 * utilities .sc-settle / .sc-draw-y / .sc-fieldmark).
 * Loaded site-wide, scoped to .sc-wk, inert elsewhere.
 *
 * The Work page is an INDEX. Each project is its own repeatable section
 * (a full-width feature block, alternating sides) carrying a thumbnail,
 * title, metadata, a short description, an optional owner quote, and a
 * link to the project detail page (that template is built separately).
 * Same "blend" treatment as About / How We Work: Pine field opener with
 * the mark motif, CSS-only scroll motion, no JavaScript.
 */

.sc-wk {
  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-wk * { box-sizing: border-box; }
.sc-wk :where(h1, h2, h3, p, blockquote, figure, figcaption, cite, span) { color: inherit; }
.sc-wk :where(h1, h2, h3, p, blockquote, figure) { margin: 0; }

.sc-wk__inner { max-width: var(--sc-grid-max-width); margin: 0 auto; }
.sc-wk__linkrow { margin-top: var(--sc-space-4); }


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

.sc-wk--framing {
  background-color: var(--sc-pine);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-7);
  padding-bottom: var(--sc-space-7);
  position: relative;
  overflow: hidden;
}
.sc-wk--framing .sc-wk__inner { position: relative; }

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

.sc-wk__framing-copy { position: relative; max-width: 52ch; }
.sc-wk__framing-copy .sc-d3 { max-width: 26ch; }
.sc-wk__framing-copy .sc-b2 {
  margin-top: var(--sc-space-4);
  color: var(--sc-chalk-68);
}


/* ================================================================
   2 - SELECTED WORK  (intro to the index)
   ================================================================ */

.sc-wk__works-head .sc-d3 { max-width: 20ch; }
.sc-wk__works-note {
  margin-top: var(--sc-space-3);
  max-width: 60ch;
  color: rgba(27, 31, 35, .6);
}


/* ================================================================
   3 - PROJECT BLOCK  (repeatable; alternate --flip on every other one)
   ================================================================ */

.sc-wk--project {
  padding-top: var(--sc-space-5);       /* 55 - tighter rhythm between projects */
  padding-bottom: var(--sc-space-5);
}

.sc-wk__project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sc-space-6);
  align-items: start;
}
.sc-wk__project--flip .sc-wk__media { order: 2; }
.sc-wk__project--flip .sc-wk__body { order: 1; }

/* --- media / thumbnail --- */
.sc-wk__media { margin: 0; }
.sc-wk__media img { display: block; width: 100%; height: auto; }

/* Logo / brand-mark thumbnail: centre on a framed panel instead of
   bleeding full width. Keeps the same 4:3 box as the placeholders. */
.sc-wk__media--logo {
  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-wk__media--logo img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Styled placeholder shown until a real thumbnail is dropped in.
   Same aspect-ratio box, so swapping in <img> changes nothing. */
.sc-wk__media-ph {
  aspect-ratio: 4 / 3;
  background-color: var(--sc-stone);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sc-space-4);
}
.sc-wk__media-ph-name {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: var(--sc-type-d4-size);
  line-height: 1.1;
  letter-spacing: var(--sc-type-d4-tracking);
  color: var(--sc-graphite);
}
.sc-wk__media-ph-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  text-transform: uppercase;
  color: rgba(27, 31, 35, .5);
}

/* --- body --- */
.sc-wk__body { max-width: 48ch; }

.sc-wk__meta {
  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);
}
.sc-wk__attr {
  font-size: var(--sc-type-b3-size);
  line-height: var(--sc-type-b3-line-height);
  color: rgba(27, 31, 35, .6);
  margin-top: var(--sc-space-1);
}
.sc-wk__project-title { margin-top: var(--sc-space-3); }
.sc-wk__project-desc { margin-top: var(--sc-space-3); }

.sc-wk__project-quote {
  margin: var(--sc-space-4) 0 0;
  position: relative;
  padding-left: var(--sc-space-3);
}
.sc-wk__project-quote-rule {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--sc-copper);
}
.sc-wk__project-quote p {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: var(--sc-type-d4-size);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.sc-wk__project-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b3-size);
  color: rgba(27, 31, 35, .6);
  margin-top: var(--sc-space-2);
}

.sc-wk__project-link { margin-top: var(--sc-space-4); }

@media (max-width: 820px) {
  .sc-wk__project { grid-template-columns: 1fr; gap: var(--sc-space-4); }
  .sc-wk__project--flip .sc-wk__media,
  .sc-wk__project--flip .sc-wk__body { order: 0; }
  .sc-wk__body { max-width: none; }
}


/* ================================================================
   4 - SUPPORTING PROOF STRIP  (contained on Chalk)
   ================================================================ */

.sc-wk__proof {
  border: 1px solid var(--sc-stone);
  padding: var(--sc-space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sc-space-5);
  align-items: start;
}
.sc-wk__proof-exp .sc-b2 { margin: 0; }
.sc-wk__proof-note {
  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);
}
.sc-wk__proof-quote {
  border-left: 1px solid var(--sc-stone);
  padding-left: var(--sc-space-4);
}
.sc-wk__proof-quote p {
  font-family: var(--sc-font-display);
  font-size: var(--sc-type-d4-size);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.sc-wk__proof-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b3-size);
  color: rgba(27, 31, 35, .6);
  margin-top: var(--sc-space-2);
}

@media (max-width: 760px) {
  .sc-wk__proof { grid-template-columns: 1fr; gap: var(--sc-space-4); padding: var(--sc-space-4); }
  .sc-wk__proof-quote { border-left: none; border-top: 1px solid var(--sc-stone); padding-left: 0; padding-top: var(--sc-space-4); }
}


/* ================================================================
   5 - CTA   (Graphite full-bleed, matches the other pages)
   ================================================================ */

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


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

@media (max-width: 1024px) {
  .sc-wk { padding-left: var(--sc-space-5); padding-right: var(--sc-space-5); }
}
@media (max-width: 600px) {
  .sc-wk {
    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-wk--framing,
  .sc-wk--cta {
    padding-top: var(--sc-space-6);
    padding-bottom: var(--sc-space-6);
  }
}