/* ==========================================================================
   Case-study pages (equiv.php and future ones) — loaded after main.css
   Container: 1160px; text column: 776px offset 197px.
   ========================================================================== */

.casestudy-page .content-wrapper {
  background: radial-gradient(ellipse 45% 22% at 50% 6%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 100%) var(--black);
}

/* Hero ------------------------------------------------------------------ */
.cs-hero {
  padding: 164px 0 0;
}
.cs-eyebrow {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--orange);
  margin: 0 0 23px;
}
.cs-title {
  font-size: clamp(28px, 2.5vw, 36px);
  line-height: 1.39;
  font-weight: 400;
  color: var(--white);
  max-width: 970px;
  margin: 0;
}

/* Media blocks ---------------------------------------------------------- */
.cs-media {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #0a0a0a;
}
.cs-media img,
.cs-media picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Parallax images are 12% taller than their frame so they have room to drift.
   The scrub travel in js/main.js (yPercent ±5) is derived from this 12% overflow.
   The previous 116%/-8% pairing over-scaled the image — that is what was cropping
   the sides of the full-width shots — and at the extremes of the ±8 travel it could
   still pull the image clear of the frame edge. */
.cs-media[data-parallax] img {
  position: absolute;
  top: -6%;
  left: 0;
  height: 112%;
  will-change: transform;
}
.cs-media--hero { aspect-ratio: 1160 / 700; margin-top: 58px; }
.cs-media--collage { aspect-ratio: 1160 / 600; }
.cs-media--stage { aspect-ratio: 1160 / 653; }
.cs-media--tote { aspect-ratio: 1160 / 812; }
.cs-media--poster { aspect-ratio: 1160 / 600; }
.cs-media--backpack { aspect-ratio: 1160 / 600; }
.cs-media--backpack img { object-position: 50% 55%; }
.cs-media--specimen { aspect-ratio: 1160 / 600; }
.cs-media--billboard { aspect-ratio: 1160 / 775; }

.cs-media-block {
  margin-top: 115px;
}
.cs-stack > * + * {
  margin-top: 60px;
}
.cs-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 57px;
}
.cs-tile {
  aspect-ratio: 550 / 600;
  overflow: hidden;
  margin: 0;
  background: #0a0a0a;
}
.cs-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Full-bleed backdrop behind a section. The page supplies the picture inline:
     <section class="cs-section cs-section--bg" style="background-image: url(…);">
   Everything else is set here. The tile is a fixed size rather than `cover` so the
   grain keeps a constant scale however tall the section grows. */
.cs-section.cs-section--bg {
  position: relative;
  margin-top: 100px;
  padding-top: 130px;
  padding-bottom: 120px;
  /* Lifted a little off the page black so the panel reads as its own band */
  
 
  /* The texture is a near-black grain, so painting it flat over a near-black page is
     invisible. Blending the image against the background-color above with `screen`
     drops its black and keeps only the scratches and speckles — the part that
     actually reads. Both layers live on this element, so no overlay is needed. */
}
.cs-section--bg::before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  background-image: url('../assets/ipl/texture-grunge.jpg');
  background-size: 1100px 1100px;
  background-position: center top;
  background-repeat: repeat;
  background-blend-mode: screen;
  opacity: 0.4;

}

/* Photo collage — three columns of unequal width, each image at its own natural
   aspect ratio so nothing is cropped. The column weights in the JSON are what make
   the three columns finish at roughly the same height. */
.cs-collage {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cs-collage-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.cs-collage-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #0a0a0a;
}
.cs-collage-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-collage-caption {
  position: absolute;
  top: 14px;
  right: 16px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.7vw, 24px);
  line-height: 1.12;
  text-align: right;
  color: #ffd84d;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.cs-collage-caption--bottom {
  top: auto;
  bottom: 16px;
}

/* Colour palette — real markup rather than a flat image, so it stays crisp and
   reflows. --swatch and --ink are set per swatch by includes/render.php; the ink is
   derived from the colour's brightness so pale swatches get dark type automatically. */
.cs-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.cs-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 320px;
  padding: 32px 28px 28px;
  background: var(--swatch);
  color: var(--ink);
}
.cs-swatch-name {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 18px;
}
.cs-swatch-hex,
.cs-swatch-rgb {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.cs-swatch-rgb::before {
  content: 'RGB ';
  opacity: 0.6;
}
.cs-swatch-note {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.45;
  opacity: 0.78;
}

.cs-tiles + .cs-column,
.cs-media-block + .cs-column {
  margin-top: 66px;
}
.cs-tiles + .cs-media-block {
  margin-top: 60px;
}
.cs-404 {
  min-height: 70vh;
}
.cs-404 .cs-lead {
  margin-top: 40px;
}
.cs-404 .cs-lead a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 2px 0;
  color: var(--orange);
}

/* Meta row -------------------------------------------------------------- */
.cs-meta {
  padding: 59px 0 0;
}
.cs-meta .inner-wrapper {
  display: grid;
  grid-template-columns: 668px 1fr;
  column-gap: 119px;
  align-items: start;
}
.cs-label {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}
.cs-rule {
  border: 0;
  height: 0;
  border-top: 1px solid var(--line);
  margin: 10px 0 16px;
}
.cs-overview p {
  font-size: 20px;
  line-height: 35px;
  color: var(--white);
  margin: 0;
}
.cs-overview .muted {
  color: var(--gray);
}
.cs-fact + .cs-fact {
  margin-top: 30px;
}
.cs-fact p {
  font-size: 16px;
  line-height: 1.3;
  color: var(--gray);
  margin: 0;
}

/* Highlights ------------------------------------------------------------ */
.cs-highlights {
  padding: 118px 0 0;
}
.cs-ghost {
  margin: 0;
  text-align: center;
  font-size: clamp(75px, 12.15vw, 175px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #d9d9d9;
  opacity: 0.15;
  user-select: none;
}
/* Full container width (not the 776px text column) so each label fits on one line */
.cs-stats {
  display: flex;
  gap: 50px;
  max-width: none;
  margin: 90px 0 0 197px;
}
.cs-stat-num {
  display: block;
  font-size: 48px;
  line-height: 1.2;
  font-weight: 800;
  font-style: italic;
  color: var(--white);
}
.cs-stat-label {
  display: block;
  margin-top: 19px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}

/* Sections -------------------------------------------------------------- */
.cs-section {
  padding: 110px 0 0;
}
.cs-column {
  max-width: 776px;
  margin-left: 197px;
}
.cs-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 4.17vw, 60px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}
.cs-heading + .cs-rule {
  margin: 40px 0 22px;
}
.cs-lead {
  font-size: 28px;
  line-height: 42px;
  font-weight: 400;
  color: var(--white);
  margin: 0;
}
.cs-body {
  font-size: 20px;
  line-height: 35px;
  font-weight: 400;
  color: var(--gray);
  margin: 22px 0 0;
}
.cs-body.is-white {
  color: var(--white);
}
.cs-body + .cs-body {
  margin-top: 12px;
}
.cs-subitem + .cs-subitem {
  margin-top: 27px;
}
.cs-subitem .cs-label {
  font-size: 20px;
  line-height: 35px;
  font-weight: 400;
}
.cs-subitem .cs-body {
  margin-top: 0;
}

/* Next project ---------------------------------------------------------- */
/* "Next Project" stays on a single line — the size is capped so the label plus the
   arrow always fit the 1160px container without wrapping. */
.cs-next {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 147px 0 0;
  padding: 0 0 200px;
  font-size: clamp(38px, 10vw, 140px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
  white-space: nowrap;
  justify-content:center;
}
.cs-next > span {
  white-space: nowrap;
}
.cs-next svg {
  display: block;
  height: 0.72em;
  width: auto;
  color: var(--orange);
  transition: transform .4s cubic-bezier(.165, .84, .44, 1);
}
.cs-next:hover svg {
  transform: translateX(0.1em);
}
.casestudy-page .site-footer {
  padding-top: 0;
}

/* Responsive ------------------------------------------------------------ */
@media only screen and (max-width: 1199px) {
  .cs-column {
    margin-left: 10%;
  }
  .cs-stats {
    margin-left: 10%;
  }
  .cs-meta .inner-wrapper {
    grid-template-columns: 1.8fr 1fr;
    column-gap: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .cs-hero {
    padding-top: 130px;
  }
  .cs-eyebrow {
    font-size: 20px;
    margin-bottom: 14px;
  }
  .cs-title {
    font-size: 28px;
    line-height: 42px;
  }
  .cs-media--hero {
    margin-top: 70px;
  }

  .cs-meta .inner-wrapper {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .cs-facts {
    order: -1;
  }
  .cs-overview {
    margin-top: 60px;
  }
  .cs-overview p {
    font-size: 18px;
    line-height: 28px;
  }
  .cs-overview .cs-overview-rest {
    display: block;
    margin-top: 28px;
  }
  .cs-rule {
    margin: 10px 0 14px;
  }

  .cs-highlights {
    padding-top: 80px;
  }
  .cs-stats {
    flex-direction: column;
    align-items: center;
    gap: 29px;
    max-width: none;
    margin: 74px 0 0;
    text-align: center;
  }

  .cs-section {
    padding-top: 110px;
  }
  .cs-column {
    max-width: none;
    margin-left: 0;
  }
  .cs-heading {
    font-size: 40px;
    line-height: 38px;
  }
  .cs-heading + .cs-rule {
    margin: 24px 0 22px;
  }
  .cs-lead {
    font-size: 24px;
    line-height: 34px;
  }
  .cs-body {
    font-size: 18px;
    line-height: 28px;
    margin-top: 19px;
  }
  .cs-subitem .cs-label {
    font-size: 18px;
    line-height: 28px;
  }
  .cs-subitem + .cs-subitem {
    margin-top: 19px;
  }

  .cs-media-block {
    margin-top: 57px;
  }
  .cs-stack > * + * {
    margin-top: 20px;
  }
  .cs-tiles {
    gap: 10px;
    margin-top: 57px;
  }
  .cs-tiles--colour {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* Collage: three narrow columns would be unreadable on a phone, so the column
     wrappers step out of the layout (display:contents) and the figures reflow into a
     two-column masonry instead, keeping the same order. */
  .cs-section--bg {
    padding-top: 84px;
    padding-bottom: 76px;
  }
  .cs-section--bg {
    background-size: 620px 620px;
  }
  .cs-collage {
    display: block;
    columns: 2;
    column-gap: 8px;
  }
  .cs-collage-col {
    display: contents;
  }
  .cs-collage-item {
    break-inside: avoid;
    margin-bottom: 8px;
  }
  .cs-collage-caption {
    top: 8px;
    right: 9px;
    left: 9px;
    font-size: 13px;
  }
  .cs-collage-caption--bottom {
    top: auto;
    bottom: 9px;
  }

  /* Palette stacks to one column so each swatch keeps a readable area */
  .cs-swatches {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .cs-swatch {
    min-height: 190px;
    padding: 24px 20px 22px;
  }
  .cs-swatch-name {
    font-size: 19px;
    margin-bottom: 12px;
  }

  .cs-tiles + .cs-column,
  .cs-media-block + .cs-column {
    margin-top: 62px;
  }
  .cs-tiles + .cs-media-block {
    margin-top: 20px;
  }

  .cs-next {
    justify-content: space-between;
    gap: 20px;
    margin-top: 100px;
    padding-bottom: 160px;
    font-size: 36px;
  }
  .cs-next svg {
    height: 1em;
  }
}