body {
  position: relative;
  isolation: isolate;
}

body::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: url('media/paper-scan-texture-v2.jpg') repeat;
  background-size: 720px 720px;
  opacity: .035;
  filter: grayscale(1) invert(1) contrast(1.15);
  mix-blend-mode: screen;
}

/* Ghee / Packaging System: image-first editorial case study */
.project--ghee-packaging .project-open {
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, .72fr);
}
.project--ghee-packaging .project-cover img {
  aspect-ratio: 1672 / 941;
  object-fit: contain;
}

.project-hero:has(.project-hero-media img[src*="media/ghee/"]) {
  width: min(calc(100% - (2 * var(--page))), 1440px);
  grid-template-columns: 1fr;
  gap: clamp(44px, 6vw, 86px);
  padding-bottom: clamp(110px, 12vw, 180px);
}
.project-hero:has(.project-hero-media img[src*="media/ghee/"]) .project-hero-media {
  order: -1;
  width: 100%;
}
.project-hero:has(.project-hero-media img[src*="media/ghee/"]) .project-hero-media img {
  width: 100%;
  max-height: none;
  background: transparent;
}
/* The open Ghee case now begins with the Material Direction board. */
.project-hero-media img[src*="ghee-packaging-board-16x9"] {
  content: url('media/ghee/ghee-packaging-board.png');
}
.project-hero:has(.project-hero-media img[src*="media/ghee/"]) .project-hero-copy {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: clamp(38px, 6vw, 90px);
  align-items: start;
}
.project-hero:has(.project-hero-media img[src*="media/ghee/"]) .project-hero-copy > .project-eyebrow,
.project-hero:has(.project-hero-media img[src*="media/ghee/"]) .project-hero-copy > h2 {
  grid-column: 1 / -1;
}
.project-hero:has(.project-hero-media img[src*="media/ghee/"]) .project-summary {
  max-width: 34ch;
  margin: 0;
}
.project-hero:has(.project-hero-media img[src*="media/ghee/"]) .project-facts {
  margin: 0;
}
.project-hero:has(.project-hero-media img[src*="media/ghee/"]) .viewer-original {
  grid-column: 2;
  margin-top: 0;
}

.project-story:has(img[src*="media/ghee/"]) {
  width: min(calc(100% - (2 * var(--page))), 1440px);
}
.project-story-section:has(img[src*="media/ghee/"]) {
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.55fr);
  gap: clamp(52px, 7vw, 120px);
  min-height: min(82vh, 920px);
  padding: clamp(96px, 11vw, 170px) 0;
}
.project-story-section:has(img[src*="media/ghee/"]):nth-child(even) {
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .7fr);
}
.project-story-section:has(img[src*="media/ghee/"]) .project-story-media img {
  width: 100%;
  max-height: 88vh;
  object-fit: contain;
  background: transparent;
}

/* Product-coded eyebrow palette. Each study gets its own quiet signal so the
   long case study breaks into clearly recognisable families without adding UI chrome. */
.project-hero:has(.project-hero-media img[src*="media/ghee/"]) .project-eyebrow {
  color: #d7bd72;
}
.project-story-section:has(img[src*="three-kimchi-jar-styles"]) .project-eyebrow {
  color: #e27d5b;
}
.project-story-section:has(img[src*="solsmor-jar-2-variants"]) .project-eyebrow {
  color: #d9a63a;
}
.project-story-section:has(img[src*="ghee-glass-study-front-back"]) .project-eyebrow {
  color: #c8b792;
}
.project-story-section:has(img[src*="ghee-glass-jar-tall"]) .project-eyebrow {
  color: #a6b89b;
}
.project-story-section:has(img[src*="solsmor-glass-variants-top3"]) .project-eyebrow {
  color: #d48c48;
}
.project-story-section:has(img[src*="fermenterat-te-4-styles"]) .project-eyebrow {
  color: #93b888;
}
.project-story-section:has(img[src*="fermenterat-te-1-bottle-design-1"]) .project-eyebrow {
  color: #b79ac8;
}
.project-story-section:has(img[src*="fermenterat-te-1-bottle-design-2"]) .project-eyebrow {
  color: #d78373;
}
.project-story-section:has(img[src*="naturlig-kefir-front-back-blue"]) .project-eyebrow {
  color: #76a7d8;
}
.project-story-section:has(img[src*="unpasteurised-milk-concept-front"]) .project-eyebrow {
  color: #dfb84d;
}
.project-story-section:has(img[src*="unpasteurised-milk-concept-back"]) .project-eyebrow {
  color: #7cb9af;
}

/* Hero product studies: let the jars dominate the page and reveal label detail. */
.project-story:has(img[src*="solsmor-jar-2-variants"]) {
  width: min(calc(100% - 32px), 1680px);
}
.project-story-section:has(img[src*="solsmor-glass-variants"]),
.project-story-section:has(img[src*="solsmor-jar-2-variants"]) {
  grid-template-columns: minmax(235px, .5fr) minmax(0, 2fr);
  gap: clamp(32px, 4vw, 64px);
}
.project-story-section:has(img[src*="solsmor-glass-variants"]):nth-child(even),
.project-story-section:has(img[src*="solsmor-jar-2-variants"]):nth-child(even) {
  grid-template-columns: minmax(0, 2fr) minmax(235px, .5fr);
}
.project-story-section:has(img[src*="solsmor-glass-variants"]) .project-story-media img,
.project-story-section:has(img[src*="solsmor-jar-2-variants"]) .project-story-media img {
  max-height: none;
  width: 100%;
}

/* Solsmör glass study: keep only the three hero jars, but leave a calm tabletop margin beneath them. */
.project-story-section:has(img[src*="solsmor-glass-variants"]) .project-story-media {
  width: 106%;
  margin-left: -3%;
  overflow: visible;
  background: #ded9d2;
  padding-bottom: clamp(22px, 2vw, 34px);
}
.project-story-section:has(img[src*="solsmor-glass-variants"]) .project-story-media a {
  display: block;
  width: 100%;
  aspect-ratio: 2.60 / 1;
  overflow: hidden;
  background: #ded9d2;
}
.project-story-section:has(img[src*="solsmor-glass-variants"]) .project-story-media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center top;
  transform: none;
}

/* Wide design boards should breathe across the page. */
.project-story-section:has(img[src*="ghee-packaging-board"]) {
  grid-template-columns: 1fr;
  min-height: 0;
  gap: clamp(44px, 6vw, 80px);
}
.project-story-section:has(img[src*="ghee-packaging-board"]) .project-story-copy {
  order: 2;
  width: min(100%, 720px);
}
.project-story-section:has(img[src*="ghee-packaging-board"]) .project-story-media {
  order: 1;
  width: 100%;
}
.project-story-section:has(img[src*="ghee-packaging-board"]) .project-story-media img {
  max-height: none;
}

@media (max-width: 820px) {
  .project--ghee-packaging .project-open,
  .project-hero:has(.project-hero-media img[src*="media/ghee/"]) .project-hero-copy,
  .project-story-section:has(img[src*="media/ghee/"]),
  .project-story-section:has(img[src*="media/ghee/"]):nth-child(even),
  .project-story-section:has(img[src*="solsmor-glass-variants"]),
  .project-story-section:has(img[src*="solsmor-glass-variants"]):nth-child(even),
  .project-story-section:has(img[src*="solsmor-jar-2-variants"]),
  .project-story-section:has(img[src*="solsmor-jar-2-variants"]):nth-child(even) {
    grid-template-columns: 1fr;
  }
  .project-story:has(img[src*="solsmor-jar-2-variants"]) {
    width: min(calc(100% - (2 * var(--page))), 1440px);
  }
  .project-story-section:has(img[src*="solsmor-glass-variants"]) .project-story-media {
    width: 100%;
    margin-left: 0;
    padding-bottom: 18px;
  }
  .project-hero:has(.project-hero-media img[src*="media/ghee/"]) .viewer-original {
    grid-column: 1;
  }
  .project-story-section:has(img[src*="media/ghee/"]) .project-story-copy,
  .project-story-section:has(img[src*="media/ghee/"]):nth-child(even) .project-story-copy {
    order: 2;
  }
  .project-story-section:has(img[src*="media/ghee/"]) .project-story-media {
    order: 1;
  }
}