/* StreamLine case study — page compositions only.
   Everything visual comes from site.css; this file arranges it. */

.sl-run { padding-left: 0; padding-right: 0; }
.sl-k { color: var(--ink-2); font-size: var(--t-meta); letter-spacing: .04em; text-transform: uppercase; }
.sl-col { align-self: end; }
.sl-title { max-width: none; }

/* 01 opening */
.sl-open { padding-bottom: var(--s-6); }
.sl-open .text-img { align-items: center; }
.sl-open__img img { max-height: 90vh; width: auto; max-width: 100%; margin: 0 auto; display: block; }
.sl-open__t { align-self: center; }
/* soften the render's edges into the page colour */
.sl-open__img img {
  --fade-y: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
  --fade-x: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: var(--fade-y), var(--fade-x); -webkit-mask-composite: source-in;
  mask-image: var(--fade-y), var(--fade-x); mask-composite: intersect; }

/* 02 two jobs */
.sl-jobs { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--g); }
.sl-jobs > :first-child { grid-column: 1 / span 5; }
.sl-jobs > :last-child  { grid-column: 7 / span 5; }
.sl-jobs__h { font-size: var(--t-statement); font-weight: 350; letter-spacing: -0.025em; line-height: 1.05; margin: var(--s-2) 0 var(--s-3); }
.sl-jobs__p { color: var(--ink-2); max-width: 32ch; }
.sl-measure { max-width: 34ch; }

/* production day */
.sl-day__grid { display: grid; grid-template-columns: 96px repeat(5, minmax(0,1fr)); column-gap: var(--g); margin-top: var(--s-4); }
.sl-day__who { position: relative; height: 64px; }
.sl-day__lane { position: absolute; left: 0; color: var(--ink-2); transform: translateY(-50%); }
.sl-day__lane--chef { top: 12px; }
.sl-day__lane--op { top: 48px; }
.sl-day__track { position: relative; height: 64px; }
.sl-day__track .nd { left: 4px; }
.sl-day__n--chef { top: 12px; }
.sl-day__n--op { top: 48px; }
.sl-day__c { min-width: 0; }
.sl-day__c h3 { font-size: 1.45rem; font-style: italic; font-weight: 400; line-height: 1.1; margin: var(--s-2) 0 8px; }
.sl-day__r { font-size: var(--t-caption); color: var(--ink-2); line-height: 1.45; }
.sl-day__cap { margin-top: var(--s-4); }
.sl-day__who { border-top: 1px solid transparent; }

/* 03 */
.sl-cap { align-items: end; }

/* 04 the pivot */
.sl-learn { max-width: 22ch; }
.sl-learn em { display: block; }
.sl-eq { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-2) var(--s-4); padding: var(--s-5) 0; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.sl-eq__t b, .sl-eq__o { font-weight: 330; font-size: clamp(2.4rem, 4.3vw, 5.4rem); letter-spacing: -0.04em; line-height: 1; }
.sl-eq__t > span { display: block; margin-top: 14px; font-size: var(--t-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.sl-eq__t--have b { font-style: italic; }
.sl-eq__t b .sl-eq__p { display: inline; margin: 0; font: inherit; font-style: normal; letter-spacing: 0; color: var(--fg); text-transform: none; }
.sl-eq__t b .sl-eq__p:first-child { margin-right: .06em; }
.sl-eq__t--have > span { color: var(--fg); }
.sl-eq__t--have > span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--conn-deep); margin-right: 8px; vertical-align: 1px; }
.sl-turn__line { max-width: 30ch; }

/* 05 system + ecosystem */
.sl-eco__row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--g); }
.sl-eco__c { position: relative; padding-top: 30px; }
.sl-eco__n { left: 4px; top: 0; }
.sl-eco__c h3 { font-size: 1.6rem; font-style: italic; font-weight: 400; line-height: 1.1; }
.sl-eco__c p { font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-2); margin: 8px 0 var(--s-3); min-height: 3em; }
.sl-eco__c .fig img { border-radius: 4px; }
.sl-eco__int { aspect-ratio: 4 / 5; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 4px; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-3); }
.sl-eco__int b { font-weight: 300; font-size: clamp(5rem, 10vw, 10rem); line-height: .85; letter-spacing: -0.05em; }
.sl-eco__int span { margin-top: var(--s-2); color: var(--ink-2); max-width: 22ch; }

/* next-project lead-in */
.sl-q .ln { display: block; }

/* 06 */
.sl-recs { max-width: 560px; }

/* 09 trajectory */
.sl-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); column-gap: var(--g); }
.sl-path li { position: relative; padding-top: 34px; font-size: var(--t-lede); line-height: 1.15; letter-spacing: -0.01em; }
.sl-path li > .rv { display: block; }
.sl-path .nd { left: 4px; top: 0; }


/* ── Mobile: sequential ── */
@media (max-width: 860px) {
  .sl-open__img img { max-height: 60vh; }
  .text-img--flip.sl-open > .text-img__i { margin-top: 0; }
  .sl-jobs > :first-child, .sl-jobs > :last-child { grid-column: 1 / -1; }
  .sl-jobs > :last-child { margin-top: var(--s-5); }
  .sl-day__grid { grid-template-columns: 1fr; }
  .sl-day__who { display: none; }
  .sl-day__c h3[data-who]::after { content: "  ·  " attr(data-who); font: 400 var(--t-caption)/1 var(--mono); font-style: normal; color: var(--ink-2); }
  .sl-day__track { height: 0; }
  .sl-day__track .nd { display: none; }
  .sl-day__c { padding: 0 0 var(--s-3); border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
  /* equation: two lines — "Consumption =" then the rest */
  .sl-eq { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 6px .32em; }
  .sl-eq > * { order: 3; }
  .sl-eq > :nth-child(1), .sl-eq > :nth-child(2) { order: 1; }
  .sl-eq::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .sl-eq__t b, .sl-eq__o { font-size: 6.4vw; letter-spacing: -0.02em; }
  .sl-eq__t > span { display: none; }
  .sl-eq::after { content: "Only Waste was captured by the MVP."; order: 4; flex-basis: 100%; margin-top: 10px; font-family: var(--mono); font-size: var(--t-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
  /* opening: the problem first, then the scale */
  .sl-open .text-img > .text-img__t { grid-row: 1; }
  .sl-open .text-img > .text-img__i { grid-row: 2; margin-top: var(--s-5); }
  /* the operator / chef day reads poorly at phone width */
  .sl-day { display: none; }
  .sl-eco__row { grid-template-columns: 1fr; row-gap: var(--s-5); }
  .sl-eco__c { padding-top: 0; }
  .sl-eco__n { display: none; }
  .sl-eco__c p { min-height: 0; }
  .sl-eco__int { aspect-ratio: auto; padding: var(--s-4) var(--s-3); }
  .sl-path { grid-template-columns: 1fr; }
  .sl-path li { padding: 12px 0 12px 22px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
  .sl-path .nd { top: 50%; left: 4px; }
  .sl-recs { max-width: none; }
  .sl-cap > .fig + .fig { margin-top: var(--s-4); }
}

.sl-run__t { font-style: normal; }
@media (max-width: 860px) {
  /* the section headline already says it — keep only the number on phones */
  .sl-run__t, .sl-run__s { display: none; }
}

/* Mobile edit pass: the weekly email is unreadable at phone size */
@media (max-width: 860px) {
  .sl-eco__c:has(img[src*="weekly-email"]) { display: none; }
}

/* 02 — one diagram instead of three competing type sizes:
   the two jobs label the two lanes of the production day */
@media (min-width: 861px) {
  .sl-jobs { display: none; }
  .sl-day { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
  .sl-day__grid { grid-template-columns: minmax(220px, 2.4fr) repeat(5, minmax(0,1fr)); margin-top: 0; }
  .sl-day__who, .sl-day__track { height: 168px; }
  .sl-day__lane { display: flex; flex-direction: column; gap: 6px; color: var(--fg); }
  .sl-day__lane .mono { font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  .sl-day__lane b { font-weight: 400; font-style: italic; font-size: clamp(1.25rem, 1.6vw, 1.6rem); line-height: 1.1; }
  .sl-day__lane--chef, .sl-day__n--chef { top: 40px; }
  .sl-day__lane--op, .sl-day__n--op { top: 128px; }
  .sl-day__c h3 { font-style: normal; font-size: .9rem; font-family: var(--mono); letter-spacing: .02em; color: var(--ink-2); margin-top: var(--s-2); }
  /* faint lane guides so each job reads across to its own dots */
  .sl-day__track::before, .sl-day__track::after { content: ""; position: absolute; left: 0; right: calc(-1 * var(--g)); height: 1px; background: color-mix(in srgb, currentColor 10%, transparent); }
  .sl-day__track::before { top: 40px; } .sl-day__track::after { top: 128px; }
  .sl-day__c:last-child .sl-day__track::before, .sl-day__c:last-child .sl-day__track::after { right: 0; }
}