/* ==========================================================================
   KAYANTARAN – case-study.css
   Styles used only by earth-and-light.html. Shared components live in
   site.css.

   .cs-hero      full-height dark opening: render behind, title at the foot
   .cs-facts     the facts row (a <dl>) on the same dark ground
   .cs-idea      "The idea" + .cs-note (the honest line about the images)
   .cs-compare   before / after band: .cs-pair wraps each .ba-slider
   .cs-dining    full-width render, then text beside a second render
   .cs-details   three callouts, staggered
   .cs-gallery   nine renders in an uneven grid, one lightbox group
   .cs-walk      walkthrough band + .walk (click-to-load embed)
   .cs-next      link to the next project
   ========================================================================== */


/* HEADER WITHOUT JAVASCRIPT ================================================
   .site-header--on-dark relies on site.js to turn the bar solid once the
   page scrolls. Without JavaScript that never happens, so give the bar its
   own dark ground and keep it readable over the light sections. */
html:not(.js) .site-header--on-dark { background: var(--deep); }


/* HERO ===================================================================== */

/* <section class="page-hero page-hero--wide cs-hero on-dark">
     <div class="container page-hero__inner">
       <div class="page-hero__text"> back link, eyebrow, h1, lead </div>
       <figure class="page-hero__media"><img …><figcaption class="cs-hero__credit">…</figcaption></figure>
     </div>
   </section>
   The figure is lifted out of the grid and laid behind the text. */
.cs-hero {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: max(34rem, 100vh);
  min-height: max(34rem, 100svh);
  padding-top: calc(var(--header-h) + clamp(.75rem, 2vw, 1.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.cs-hero .page-hero__inner { flex: 1 0 auto; align-items: stretch; }
.cs-hero .page-hero__text { display: flex; flex-direction: column; }
.cs-hero__back { margin-bottom: auto; padding-bottom: 3rem; }
.cs-hero .display {
  font-size: clamp(4rem, 1.6rem + 10.5vw, 12.5rem);
  line-height: .88;
}
.cs-hero .lead { max-width: 34rem; }

.cs-hero .page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  max-width: none;
}
.cs-hero .page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.cs-hero .page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(26, 15, 8, .5) 0%, rgba(26, 15, 8, 0) 62%),
    linear-gradient(to top,
      rgba(26, 15, 8, 1) 0%,
      rgba(26, 15, 8, .88) 24%,
      rgba(26, 15, 8, .56) 50%,
      rgba(26, 15, 8, .18) 72%,
      rgba(26, 15, 8, .6) 100%);
}
.cs-hero .eyebrow { color: var(--fg); }
.cs-hero__credit {
  position: absolute;
  right: var(--gutter);
  bottom: .9rem;
  z-index: 1;
  font-size: .72rem;
  letter-spacing: .02em;
  color: rgba(240, 224, 200, .78);
}


/* FACTS ==================================================================== */

/* <dl class="cs-facts__list">
     <div class="cs-fact"><dt>Location</dt><dd>Noida</dd></div>
     <div class="cs-fact cs-fact--wide">…</div>     spans the row on phones
   </dl> */
.cs-facts { padding-bottom: clamp(3rem, 6vw, 5rem); }
.cs-facts__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  margin: 0;
}
.cs-fact {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding-block: 1.15rem 1.35rem;
  border-top: 1px solid var(--hairline-strong);
}
.cs-fact--wide { grid-column: 1 / -1; }
.cs-fact dt {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.cs-fact dd {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.15rem + .5vw, 1.625rem);
  line-height: 1.2;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
@media (min-width: 700px) {
  .cs-facts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-fact--wide { grid-column: auto; }
}
@media (min-width: 1100px) {
  .cs-facts__list { grid-template-columns: 1fr 1fr 2.2fr 1.25fr .7fr 1.9fr; }
}


/* THE IDEA ================================================================= */

.cs-idea__body {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 6vw, 6rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .cs-idea .eyebrow { padding-top: 1.35rem; }
  .cs-idea__body { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
}

/* <aside class="cs-note"><p class="cs-note__label">A note on the images</p><p>…</p></aside> */
.cs-note {
  max-width: 28rem;
  padding: .2rem 0 .3rem 1.5rem;
  border-left: 1px solid var(--hairline-gold);
  font-size: .95rem;
  color: var(--fg-soft);
}
.cs-note__label {
  margin-bottom: .6rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage-ink);
}


/* BEFORE AND AFTER ========================================================= */

.cs-compare__head { margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.cs-compare__head .eyebrow { margin-bottom: 1.5rem; }

/* <article class="cs-pair">
     <header class="cs-pair__head">
       <p class="cs-pair__num" aria-hidden="true">01</p>
       <h3 class="h3">Living room</h3>
       <p class="cs-pair__note">…</p>
     </header>
     <div class="ba-slider reveal" data-ba-slider>…</div>
     <div class="cs-pair__foot"><p class="cs-pair__hint">Drag to compare</p><p class="caption">…</p></div>
   </article> */
.cs-pair + .cs-pair { margin-top: clamp(4rem, 9vw, 8rem); }
.cs-pair__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem var(--grid-gap);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.cs-pair__num {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.2;
  color: var(--accent-ink);
  font-variant-numeric: lining-nums;
}
.cs-pair__note { max-width: 38rem; color: var(--fg-soft); text-wrap: pretty; }
@media (min-width: 900px) {
  .cs-pair__head {
    grid-template-columns: 4.5rem minmax(0, 4fr) minmax(0, 7fr);
    align-items: baseline;
  }
}
.cs-pair__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: 1.25rem;
}
.cs-pair__foot .caption { margin-top: 0; }
.cs-pair__hint {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.cs-pair__hint::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: .75rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1.5 6h21M6 1.5L1.5 6 6 10.5M18 1.5L22.5 6 18 10.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1.5 6h21M6 1.5L1.5 6 6 10.5M18 1.5L22.5 6 18 10.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Without JavaScript the two images stack, so there is nothing to drag. */
html:not(.js) .cs-pair__hint { display: none; }


/* DINING =================================================================== */

.cs-dining {
  --bg: var(--sand-tint);
  padding-bottom: var(--section-y);
  background-color: var(--bg);
}
.cs-dining__wide { margin: 0; }
.cs-dining__wide .media { --ratio: 4 / 3; max-height: 92vh; border-radius: 0; }
.cs-dining__wide .caption { text-align: right; }
.cs-dining__body { padding-top: clamp(2.5rem, 6vw, 5rem); }
.cs-dining__text .eyebrow { margin-bottom: 1.5rem; }
.cs-dining__text p:not(.eyebrow) { max-width: 30rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); text-wrap: pretty; }
@media (min-width: 600px) {
  .cs-dining__wide .media { --ratio: 16 / 9; }
}
@media (min-width: 1100px) {
  .cs-dining__wide .media { --ratio: 2.2 / 1; }
}


/* DETAILS ================================================================== */

/* <ol class="cs-details__list">
     <li class="cs-detail">
       <figure class="cs-detail__figure media reveal reveal--curtain"><img …></figure>
       <div class="cs-detail__text">
         <p class="cs-detail__num" aria-hidden="true">01</p>
         <h3 class="h3">The mural wall</h3>
         <p>…</p>
       </div>
     </li>
   </ol>
   Each image is a closer crop of a full render. The <img> is made larger
   than its frame (--zoom) and shifted (--x, --y) so the frame shows only
   the part the text is about. */
.cs-details__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 9vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}
.cs-detail { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
.cs-detail__figure { width: 78%; }
.cs-detail:nth-child(even) .cs-detail__figure { justify-self: end; }
.cs-detail__num {
  margin-bottom: .5rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.2;
  color: var(--accent-ink);
  font-variant-numeric: lining-nums;
}
.cs-detail__text p:last-child { max-width: 27rem; margin-top: .85rem; color: var(--fg-soft); text-wrap: pretty; }
.cs-detail__figure > img {
  position: absolute;
  top: var(--y, 0%);
  left: var(--x, 0%);
  width: calc(var(--zoom, 1) * 100%);
  height: calc(var(--zoom, 1) * 100%);
  max-width: none;
}
.cs-detail--mural .cs-detail__figure { --ratio: 4 / 5; --zoom: 1.35; --x: -10%; --y: -17.5%; }
.cs-detail--cane .cs-detail__figure { --zoom: 1.4; --x: -40%; --y: -40%; }
.cs-detail--cane .cs-detail__figure > img { object-position: 100% 50%; }
.cs-detail--panel .cs-detail__figure { --ratio: 1 / 1; --zoom: 1.3; --x: -4%; --y: -24%; }
.cs-detail--panel .cs-detail__figure > img { object-position: 90% 50%; }

@media (min-width: 600px) and (max-width: 899.98px) {
  .cs-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 5vw, 3rem); align-items: center; }
  .cs-detail__figure { width: auto; }
  .cs-detail:nth-child(even) .cs-detail__figure { order: 2; justify-self: stretch; }
}
@media (min-width: 900px) {
  .cs-details__list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .cs-detail__figure { width: auto; }
  .cs-detail:nth-child(even) .cs-detail__figure { justify-self: stretch; }
  .cs-detail:nth-child(2) { margin-top: clamp(3rem, 6vw, 6rem); }
  .cs-detail:nth-child(3) { margin-top: clamp(6rem, 12vw, 12rem); }
}


/* GALLERY ================================================================== */

/* <ul class="cs-gallery__grid">
     <li class="cs-gallery__item">
       <a class="media reveal reveal--curtain" href="large.jpg" data-lightbox="earth-and-light" data-caption="…">
         <img …><span class="cs-gallery__label">Living room</span>
         <span class="visually-hidden">View larger</span>
       </a>
     </li>
   </ul>
   Phones and tablets: one wide tile, then two square ones, three times.
   Desktop: rows of 8 + 4, 4 + 4 + 4, 5 + 7, 7 + 5. The narrower tile in an
   uneven row (.cs-gallery__item--fill) takes its height from its neighbour. */
.cs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.cs-gallery__item { position: relative; min-width: 0; }
.cs-gallery__item .media { --ratio: 1 / 1; }
.cs-gallery__item:nth-child(3n + 1) { grid-column: 1 / -1; }
.cs-gallery__item:nth-child(3n + 1) .media { --ratio: 16 / 9; }
.cs-gallery__item--panel img { object-position: 82% 50%; }

.cs-gallery__label {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  max-width: calc(100% - 1.5rem);
  padding: .35rem .75rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(26, 15, 8, .74);
  color: var(--sand);
  font-size: .62rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .14em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 599.98px) {
  .cs-gallery__item:not(:nth-child(3n + 1)) .cs-gallery__label { display: none; }
}

@media (min-width: 900px) {
  .cs-gallery__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cs-gallery__item,
  .cs-gallery__item:nth-child(3n + 1) { grid-column: auto / span 4; }
  .cs-gallery__item .media,
  .cs-gallery__item:nth-child(3n + 1) .media { --ratio: 4 / 3; }

  .cs-gallery__item:nth-child(1) { grid-column: auto / span 8; }
  .cs-gallery__item:nth-child(6),
  .cs-gallery__item:nth-child(9) { grid-column: auto / span 5; }
  .cs-gallery__item:nth-child(7),
  .cs-gallery__item:nth-child(8) { grid-column: auto / span 7; }
  .cs-gallery__item:nth-child(1) .media,
  .cs-gallery__item:nth-child(7) .media,
  .cs-gallery__item:nth-child(8) .media { --ratio: 16 / 9; }

  .cs-gallery__item--fill .media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}


/* WALKTHROUGH ============================================================== */

.cs-walk__head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.cs-walk__head .eyebrow { margin-bottom: 1.5rem; }

/* <div class="walk" data-walkthrough data-src="https://…" data-title="…">
     <div class="walk__frame">
       <img class="walk__poster" src="…" alt="" …>
       <div class="walk__cover">
         <button class="btn walk__load" type="button" data-walk-load>Load walkthrough</button>
         <p class="walk__hint walk__hint--js">…</p>
         <p class="walk__hint walk__hint--nojs">…</p>
       </div>
     </div>
     <div class="walk__foot"><p class="caption">Hosted on Coohom.</p><a class="link-arrow" …>Open full screen</a></div>
   </div>
   case-study.js swaps the poster for the <iframe> on click. Nothing is
   requested from the host before that. */
.walk__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 86vh;
  width: 100%;
  border-radius: var(--radius);
  background: var(--walnut);
}
@media (min-width: 600px) { .walk__frame { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) { .walk__frame { aspect-ratio: 16 / 9; } }
.walk__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.walk__cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.1rem;
  padding: 1.5rem;
  background: rgba(26, 15, 8, .72);
  text-align: center;
}
.walk__hint { max-width: 22rem; font-size: .82rem; color: var(--fg); }
.js .walk__hint--nojs,
html:not(.js) .walk__hint--js,
html:not(.js) .walk__load { display: none; }
.walk__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--deep);
}
.walk__iframe:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.walk__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-top: 1.1rem;
}
.walk__foot .caption { margin-top: 0; }


/* NEXT PROJECT ============================================================= */

/* The title link stretches over the whole block; "All projects" sits above
   it so both stay clickable. */
.cs-next__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3rem) var(--grid-gap);
  align-items: end;
}
.cs-next .eyebrow { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.cs-next__title { font-size: clamp(3rem, 1.5rem + 6.2vw, 7.5rem); line-height: .96; }
.cs-next__title a { text-decoration: none; transition: color .35s var(--ease); }
.cs-next__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cs-next__title a:focus-visible { outline: none; }
.cs-next__inner:has(.cs-next__title a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: 2px; }
.cs-next__inner:hover .cs-next__title a { color: var(--accent-ink); }
.cs-next__inner:hover .cs-next__media img { transform: scale(1.04); }
.cs-next__meta { margin-top: clamp(1.25rem, 2.5vw, 2rem); color: var(--fg-soft); }
.cs-next__all { position: relative; z-index: 2; margin-top: clamp(2rem, 4vw, 3rem); }
.cs-next__media { width: min(62%, 15rem); justify-self: end; }
@media (min-width: 720px) {
  .cs-next__inner { grid-template-columns: minmax(0, 1fr) clamp(11rem, 22vw, 18rem); }
  .cs-next__media { width: auto; justify-self: stretch; }
}