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

   .studio-hero   page hero: arch photograph with a caption under it
   .studio-name   the statement about the name, a paragraph, one photograph
   .founder       dark band: name, role, two paragraphs, a photograph of a room
   .tenets        "How we think": four principles side by side
   .numbers       the three stats beside a small label
   .clients       a heading that stays put beside stacked testimonials
   ========================================================================== */


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

/* The figure wraps the .media frame so the caption can sit below the arch. */
.studio-hero__figure { width: min(100%, 24rem); justify-self: end; }
.studio-hero__figure .caption { text-align: right; }

@media (min-width: 900px) {
  .studio-hero__figure { width: 100%; }
}


/* THE NAME ================================================================= */

.studio-name { padding-top: clamp(1.5rem, 4vw, 3.5rem); }
.studio-name > .container > .eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.studio-name__statement {
  max-width: 70rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.15rem + 2.5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.studio-name__statement em { font-style: italic; color: var(--accent); }
.studio-name__more { margin-top: clamp(2.5rem, 7vw, 6rem); align-items: start; }
.studio-name__text { max-width: 30rem; }
.studio-name__photo { margin: 0; }

@media (min-width: 900px) {
  .studio-name__text {
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline-gold);
  }
}


/* FOUNDER ================================================================== */

.founder .eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.founder__role {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.founder__body {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hairline-strong);
}
.founder__body > * + * { margin-top: 1.5rem; }
.founder__lede {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-weight: 300;
  line-height: 1.24;
  text-wrap: pretty;
}
.founder__text { max-width: 34rem; color: var(--fg-soft); text-wrap: pretty; }

/* A photograph of a room, labelled as a room. There is no portrait here. */
.founder__photo { margin: 0; }
.founder__photo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-top: 1rem;
}
.founder__photo-foot .caption { margin-top: 0; }


/* HOW WE THINK ============================================================= */

/* Reuses .process--columns from site.css, with fixed column counts so the
   four principles never break three and one. */
.tenets .process-step { align-content: start; }
.tenets .process-step__title { font-size: clamp(1.625rem, 1.3rem + .8vw, 2rem); }

@media (min-width: 720px) {
  .process--columns.tenets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tenets .process-step { padding-right: 1rem; }
}
@media (min-width: 1100px) {
  .process--columns.tenets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tenets .process-step { row-gap: .9rem; padding-bottom: 0; }
}


/* NUMBERS ================================================================== */

/* Beside the label the stats have nine columns, not twelve, so the count is
   fixed at three to keep "Cities" from dropping to a row of its own. */
@media (min-width: 900px) {
  .numbers .eyebrow { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
  .numbers .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* CLIENTS ================================================================== */

.clients__list { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.clients__list .testimonial__quote {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  line-height: 1.26;
}

@media (min-width: 900px) {
  .clients__head { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}