/* ==========================================================================
   KAYANTARAN – iit-powai.css
   Styles used only by iit-powai.html. Shared components live in site.css.

   .case-hero     title across the page; lead and project facts beside
                  the photograph
   .brief         six requests and six replies (extends .process)
   .floor         two photographs of the open floor
   .glass         heading, text, and two photographs
   .craft         arch photograph, text, a statement, three more photographs
   .build         dark band: heading, .timeline, then-and-now slider
   .gallery       thirteen photographs in rows of mixed shapes
   .next          link to the next project
   ========================================================================== */


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

.case-hero {
  padding-top: calc(var(--header-h) + clamp(1.75rem, 4.5vw, 4rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.case-hero .page-hero__inner { align-items: start; row-gap: clamp(2rem, 4.5vw, 3.25rem); }
.case-hero__back { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.case-hero__title { font-size: clamp(3.25rem, 1.1rem + 9.6vw, 7.25rem); }

.case-hero__intro,
.case-hero__figure,
.case-hero__facts { grid-column: 1 / -1; min-width: 0; margin: 0; }

/* Photograph with a gold hairline frame set back behind it. */
.case-hero__figure { position: relative; isolation: isolate; }
.case-hero__figure::before {
  content: "";
  position: absolute;
  top: -.75rem;
  right: -.75rem;
  left: .75rem;
  z-index: -1;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--hairline-gold);
  border-radius: var(--radius);
  animation: enter-rise 1.4s var(--ease-out) .5s both;
}
.case-hero__tag { position: absolute; top: 1rem; left: 1rem; z-index: 1; }

/* Project facts: label and value on one ruled row. */
.case-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
  margin: 0;
  border-bottom: 1px solid var(--hairline-strong);
}
.case-facts__row {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: baseline;
  padding-block: .8rem;
  border-top: 1px solid var(--hairline-strong);
}
.case-facts dt {
  font-size: .66rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.case-facts dd {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  line-height: 1.22;
  font-variant-numeric: lining-nums;
  text-wrap: pretty;
}

@media (min-width: 600px) and (max-width: 1023.98px) {
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .case-hero .page-hero__text { grid-column: 1 / -1; }
  .case-hero__intro { grid-column: 1 / span 4; grid-row: 2; }
  .case-hero__figure { grid-column: 5 / -1; grid-row: 2 / span 2; }
  .case-hero__facts { grid-column: 1 / span 4; grid-row: 3; align-self: end; }
  /* The caption hangs below the frame so the facts line up with the
     bottom edge of the photograph. */
  .case-hero__figure .caption { position: absolute; top: 100%; right: 0; left: 0; }
}
@media (min-width: 900px) {
  /* The title runs on one line: it is about 8.4em wide, and the container
     is never narrower than 91vw. */
  .case-hero__title { font-size: min(10vw, 8.5rem); white-space: nowrap; }
}


/* THE BRIEF, ANSWERED ====================================================== */

.brief__list .process-step__title { font-variant-numeric: lining-nums; text-wrap: balance; }
.brief__list .process-step__text {
  max-width: 36rem;
  color: var(--fg);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}


/* THE OPEN FLOOR =========================================================== */

.floor__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: clamp(1.75rem, 5vw, 2.5rem);
  align-items: end;
}
.floor__fig { grid-column: 1 / -1; min-width: 0; margin: 0; }
.floor__fig--side { width: min(100%, 20rem); justify-self: end; }

@media (min-width: 720px) {
  .floor__fig--main { grid-column: 1 / span 8; }
  .floor__fig--side { grid-column: 9 / -1; width: auto; justify-self: stretch; }
  /* Photographs share one row and captions the next, so the two frames
     end level even when one caption wraps. */
  @supports (grid-template-rows: subgrid) {
    .floor__fig { display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; row-gap: 0; }
    .floor__fig .media { align-self: end; }
  }
}


/* GLASS AND WALLS ========================================================== */

.glass__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.glass__grid > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
.glass__head .eyebrow { margin-bottom: 1.5rem; }
.glass__fig--side { width: min(100%, 20rem); }

/* Tablet: the small photograph sits to the left of the large one. */
@media (min-width: 720px) and (max-width: 1099.98px) {
  .glass__fig--main { grid-column: 5 / -1; grid-row: 3; }
  .glass__fig--side { grid-column: 1 / span 4; grid-row: 3; align-self: end; width: auto; }
  @supports (grid-template-rows: subgrid) {
    .glass__fig--main,
    .glass__fig--side { display: grid; grid-row: 3 / span 2; grid-template-rows: subgrid; row-gap: 0; align-self: stretch; }
    .glass__fig--side .media { align-self: end; }
  }
}
/* Desktop: text above the small photograph on the left; the large one on
   the right grows to the height of that column, so both sides end level. */
@media (min-width: 1100px) {
  .glass__grid { grid-template-rows: auto auto 1fr; }
  .glass__head { grid-column: 1 / span 10; margin-bottom: clamp(.5rem, 1.5vw, 1.5rem); }
  .glass__text { grid-column: 1 / span 4; grid-row: 2; }
  .glass__fig--side { grid-column: 1 / span 4; grid-row: 3; align-self: end; width: auto; }
  .glass__fig--main {
    grid-column: 6 / -1;
    grid-row: 2 / span 2;
    align-self: stretch;
    display: grid;
    grid-template-rows: 1fr auto;
  }
  .glass__fig--main .media { aspect-ratio: auto; }
}


/* THE CRAFT ================================================================ */

.craft__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.craft__grid > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
.craft__text .eyebrow { margin-bottom: 1.5rem; }
.craft__text .lead { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.craft__fig--arch { width: min(100%, 22rem); justify-self: end; }
.craft__statement {
  padding-top: clamp(1rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.875rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.craft__grid > .craft__fig--p1 { grid-column: 1 / span 6; }
.craft__grid > .craft__fig--p2 { grid-column: 7 / -1; }

@media (min-width: 900px) {
  .craft__grid { grid-template-rows: auto auto auto; }
  .craft__grid > .craft__text { grid-column: 7 / -1; grid-row: 1; }
  .craft__grid > .craft__fig--arch { grid-column: 1 / span 5; grid-row: 1 / span 2; width: auto; justify-self: stretch; }
  .craft__grid > .craft__fig--wide { grid-column: 7 / -1; grid-row: 2; align-self: end; }
  .craft__grid > .craft__statement,
  .craft__grid > .craft__fig--p1,
  .craft__grid > .craft__fig--p2 { grid-row: 3; margin-top: clamp(2rem, 5vw, 5rem); }
  .craft__grid > .craft__statement { grid-column: 1 / span 5; align-self: center; padding-top: 0; }
  .craft__grid > .craft__fig--p1 { grid-column: 7 / span 3; }
  .craft__grid > .craft__fig--p2 { grid-column: 10 / -1; }
}


/* THE BUILD ================================================================ */

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

/* .timeline: five dated steps, each a label and a small site photograph.
   A vertical rule with the photograph beside the label on narrow screens;
   five columns hung from one horizontal rule on wide ones. */
.timeline {
  position: relative;
  display: grid;
  margin-bottom: clamp(4rem, 9vw, 7.5rem);
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--hairline-gold);
}
.timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: clamp(5.5rem, 28vw, 10rem) minmax(0, 1fr);
  column-gap: clamp(1rem, 4vw, 1.75rem);
  align-items: start;
  padding: 0 0 clamp(1.75rem, 5vw, 2.5rem) clamp(1.5rem, 5vw, 2.25rem);
}
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: -.25rem;
  width: .5625rem;
  height: .5625rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--bg);
}
.timeline__label { grid-column: 2; grid-row: 1; }
.timeline__photo { grid-column: 1; grid-row: 1; background: var(--walnut); }
.timeline__when {
  display: block;
  margin-bottom: .5rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.timeline__what {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  line-height: 1.12;
  text-wrap: balance;
}
.timeline__img--steel { object-position: 64% 50%; }
.timeline__img--furniture { object-position: 50% 62%; }

@media (min-width: 960px) {
  .timeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: var(--grid-gap);
  }
  .timeline::before { right: 0; bottom: auto; width: auto; height: 1px; }
  .timeline__step,
  .timeline__step:last-child {
    grid-row: span 2;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 1.25rem;
    align-content: start;
    padding: 1.75rem 0 0;
  }
  .timeline__step::before { top: -.25rem; left: 0; }
  .timeline__label,
  .timeline__photo { grid-column: 1; }
  .timeline__label { grid-row: 1; }
  .timeline__photo { grid-row: 2; }
  /* Labels share one row height, so the five photographs line up. */
  @supports (grid-template-rows: subgrid) {
    .timeline__step,
    .timeline__step:last-child { grid-template-rows: subgrid; }
  }
}

/* Then and now: the slider beside a short note and the closing line. */
.then-now {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: clamp(2rem, 5vw, 3rem);
  align-items: end;
}
.then-now > * { grid-column: 1 / -1; min-width: 0; }
.then-now__text .eyebrow { margin-bottom: 1.25rem; }
.build__close {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--hairline-gold);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
.build__close em { font-style: italic; color: var(--accent); }

@media (max-width: 599.98px) {
  /* Short labels, so neither is cut by the handle on a small screen. */
  .then-now__date { display: none; }
}
@media (min-width: 900px) {
  .then-now { align-items: stretch; }
  .then-now__slider { grid-column: 1 / span 8; }
  .then-now__text {
    grid-column: 9 / -1;
    display: flex;
    flex-direction: column;
  }
  .build__close { margin-top: auto; }
}


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

/* Thirteen photographs. On narrow screens: landscapes full width, portraits
   in pairs. From 720px: rows of three or two on a 24-column grid, where the
   landscape in each row sets the height and the portraits stretch to it. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.625rem, 1.2vw, 1.125rem);
}
.gallery__item { display: grid; min-width: 0; }
.gallery__item--l { grid-column: span 2; }
.gallery .media { --ratio: 4 / 5; }
.gallery__item--l .media { --ratio: 5 / 4; }
.gallery .media > img { position: absolute; inset: 0; }

@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(24, minmax(0, 1fr)); }
  .gallery__item--p { grid-column: span 7; }
  .gallery__item--l { grid-column: span 10; }
  .gallery__item--half { grid-column: span 12; }
  .gallery__item--p .media { aspect-ratio: auto; }
}


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

.next__card { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem) var(--grid-gap); }
.next__body .eyebrow { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.project-card__title.next__title {
  font-size: clamp(3.25rem, 1.9rem + 5.6vw, 7rem);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.02em;
}
.next__title em { font-style: italic; color: var(--accent); }
.next__meta {
  margin-top: 1.25rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.next__more { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.next__card:hover .next__more { border-color: var(--accent-ink); color: var(--accent-ink); }
.next__card:hover .next__more::after { transform: translateX(.4rem); }

@media (min-width: 900px) {
  .next__card { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .next__body { grid-column: 1 / span 5; grid-row: 1; }
  .next__media { grid-column: 7 / -1; grid-row: 1; }
}