/* "Studio" (home, copy v5.1 §07), right after the Process.
 *
 * Black, as the Collection and the Services: the two portraits are the point of it. The title and
 * its lead on the Collection's column; under them the text on the left third and the two portraits
 * (4:5, the second set lower) on the right; then the closing line, large. Until the photos are
 * there, each frame shows its place (a dark frame with the site's grain and its number); a photo
 * goes in as an <img> in its frame (index.html). The same faces and motions as the rest: titles
 * rising out of a mask, texts fading up; the portraits uncover from the bottom as they come in
 * (halfsecond-studio.js adds is-in). Without script, or with reduced motion: everything is there.
 */

/* out of the flow until halfsecond-collection.js has moved it in after the Process */
html.js .hs-studio:not([data-hs-placed]) { position: absolute; left: 0; right: 0; visibility: hidden; }
#main .hs-studio { align-self: stretch; }               /* Framer's column centres its children */

.hs-studio {
  --ease: cubic-bezier(.19, 1, .22, 1);
  --col: calc((100% - 24px) / 3 + 24px);                /* Framer's grid: a third, then the column */
  position: relative;
  z-index: 1;
  background: #000;
  color: #fff;
  padding: clamp(96px, 11vw, 160px) 36px clamp(112px, 12vw, 184px);
}

/* ------------------------------------------------------------------ the title and its lead */
.hs-studio__head { container-type: inline-size; margin-left: var(--col); }
.hs-studio__title {
  margin: 0;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 600;
  font-size: min(128px, 22cqi);
  line-height: .9;
  letter-spacing: -.04em;
}
.hs-studio__mask { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hs-studio__mask > span { display: block; }
.hs-studio__lead {
  margin: clamp(20px, 2vw, 32px) 0 0;
  max-width: 30ch;
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.3;
  color: #fff;
}

/* ------------------------------------------------------------ the text and the two portraits */
.hs-studio__body {
  display: grid;
  grid-template-columns: calc((100% - 24px) / 3) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: clamp(72px, 9vw, 136px);
}
.hs-studio__text {
  margin: 0;
  max-width: 30ch;
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
.hs-studio__people {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.hs-studio__person { margin: 0; }
.hs-studio__person + .hs-studio__person { margin-top: clamp(48px, 9vw, 150px); }   /* set lower */

/* the frame: the photo's place, 4:5, the cards' corners; dark with the site's grain until filled */
.hs-studio__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: #0c0c0c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.hs-studio__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .08;
  background: url(/assets/media/framerusercontent/imgs/a3RLU3QHBGjztkKyvMz4U7KEKI.gif) 0 0 / 110px auto repeat;
  pointer-events: none;
}
.hs-studio__slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}
.hs-studio__frame img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hs-studio__person figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}
.hs-studio__person figcaption b {
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
.hs-studio__person figcaption span {
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
}

/* ------------------------------------------------------------------------ the closing line */
.hs-studio__close {
  margin: clamp(88px, 11vw, 168px) 0 0;                 /* across the whole width, not on the column */
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(34px, 5.3vw, 92px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  color: #fff;
}
.hs-studio__close .hs-studio__mask > span { text-wrap: balance; }   /* no word left alone on a line */
/* its lines are spans: the site's text face would take them (halfsecond.css sets every span of the
   page in Satoshi, !important); the title face holds here */
.hs-studio__close,
.hs-studio__close * { font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif) !important; }

/* ------------------------------------------------------------- with the script (is-live)
   Each part comes in as it reaches the screen (is-in): the title out of its mask and the lead;
   the text, then the portraits, uncovered from the bottom while the picture settles from a
   little larger; the closing line, a line at a time. */
.hs-studio.is-live .hs-studio__head:not(.is-in) .hs-studio__mask > span,
.hs-studio.is-live .hs-studio__close:not(.is-in) .hs-studio__mask > span { transform: translateY(110%); }
.hs-studio.is-live .hs-studio__head.is-in .hs-studio__mask > span { animation: hs-rise 1.1s var(--ease) .15s both; }
.hs-studio.is-live .hs-studio__close.is-in .hs-studio__mask > span { animation: hs-rise 1.1s var(--ease) .1s both; }
.hs-studio.is-live .hs-studio__close.is-in .hs-studio__mask + .hs-studio__mask > span { animation-delay: .22s; }
.hs-studio.is-live .hs-studio__head:not(.is-in) .hs-studio__lead { opacity: 0; }
.hs-studio.is-live .hs-studio__head.is-in .hs-studio__lead { animation: hs-fade-up 1s var(--ease) .4s both; }

.hs-studio.is-live .hs-studio__body:not(.is-in) .hs-studio__text { opacity: 0; }
.hs-studio.is-live .hs-studio__body.is-in .hs-studio__text { animation: hs-fade-up 1s var(--ease) .1s both; }
.hs-studio.is-live .hs-studio__frame { transition: clip-path 1.3s var(--ease); }
.hs-studio.is-live .hs-studio__frame > * { transition: transform 1.6s var(--ease); }
.hs-studio.is-live .hs-studio__body:not(.is-in) .hs-studio__frame { clip-path: inset(100% 0 0 0 round 8px); }
.hs-studio.is-live .hs-studio__body:not(.is-in) .hs-studio__frame > * { transform: scale(1.12); }
.hs-studio.is-live .hs-studio__body.is-in .hs-studio__frame { clip-path: inset(0 0 0 0 round 8px); transition-delay: .2s; }
.hs-studio.is-live .hs-studio__body.is-in .hs-studio__frame > * { transition-delay: .2s; }
.hs-studio.is-live .hs-studio__body.is-in .hs-studio__person + .hs-studio__person .hs-studio__frame,
.hs-studio.is-live .hs-studio__body.is-in .hs-studio__person + .hs-studio__person .hs-studio__frame > * { transition-delay: .38s; }
.hs-studio.is-live .hs-studio__body:not(.is-in) figcaption { opacity: 0; }
.hs-studio.is-live .hs-studio__body.is-in figcaption { animation: hs-fade-up 1s var(--ease) .7s both; }
.hs-studio.is-live .hs-studio__body.is-in .hs-studio__person + .hs-studio__person figcaption { animation-delay: .86s; }

/* ------------------------------------------------------------------------ tablet, phone */
@media (max-width: 1199.98px) {
  .hs-studio { --col: calc((100% - 24px) / 4 + 24px); }   /* tablet: a quarter, as the other titles */
  .hs-studio__body { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); margin-left: var(--col); }
  .hs-studio__text { max-width: 40ch; }
}
@media (max-width: 809.98px) {
  .hs-studio { --col: 0px; }
  .hs-studio__title { font-size: min(96px, 24cqi); }
  .hs-studio__people { gap: 12px; }
  .hs-studio__person + .hs-studio__person { margin-top: 40px; }
  .hs-studio__close { font-size: clamp(30px, 8.4vw, 44px); }
}