/* About. The studio's name is the two founders' names: each founder stands in front of their own surname, one half
   in the field colour and one on the night, and the two words meet in the middle as the band arrives. Then who we
   build for, and how it goes, ending on a phone with a site that went live. */

.ab-head { padding: clamp(20px, 3.4vh, 40px) 0 clamp(28px, 4vh, 48px); }
.ab-head__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); align-items: end; gap: var(--s3) var(--s5); }
.ab-head h1 { font-size: clamp(68px, 9.4vw, 152px); font-weight: 900; line-height: .82; letter-spacing: -0.015em; }
.ab-head__lede { font: 500 clamp(18px, 1.35vw, 21px)/1.45 var(--text); padding-bottom: .3em; }

/* The founders: two halves of one band. */
.founders { display: grid; grid-template-columns: 1fr 1fr; }
.founder {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); align-items: start; gap: var(--s3) var(--s4);
  padding: clamp(48px, 7vh, 80px) var(--gutter) calc(min(13.2vw, 210px) * .82); overflow: clip;   /* room for the surname: no text over it */
}
.founder--kenan { background: var(--signal); color: var(--ink); padding-left: max(var(--gutter), (100vw - var(--wrap)) / 2); }
.founder--lorenzo { background: var(--night); color: var(--on-dark); padding-right: max(var(--gutter), (100vw - var(--wrap)) / 2); }
.founder__word {
  position: absolute; bottom: -0.12em; z-index: 0; font: 900 min(13.2vw, 210px)/.8 var(--display); text-transform: uppercase;
  letter-spacing: -0.015em; white-space: nowrap; user-select: none; pointer-events: none;
}
.founder--kenan .founder__word { right: 0.04em; color: var(--bone); }
.founder--lorenzo .founder__word { left: 0.04em; color: var(--signal); }
.founder .portrait, .founder__text { position: relative; z-index: 1; }
.founder__text { display: grid; gap: 12px; padding-top: 8px; }
.founder__name { font: 900 clamp(44px, 4.2vw, 68px)/.86 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.founder__bio { font-size: clamp(18px, 1.4vw, 21px); }
.nobr { white-space: nowrap; }
.founder--lorenzo .founder__bio { color: var(--on-dark-soft); }
.founders__note { grid-column: 1 / -1; padding: 14px max(var(--gutter), (100vw - var(--wrap)) / 2); background: var(--bone); color: var(--slate); font-size: 14px; }

/* A portrait frame, 4:5: a real photograph in colour, or a placeholder still toned to the page, initials over it, "Placeholder" in the corner. */
.portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--bone); box-shadow: 0 30px 50px -24px rgba(19, 17, 21, .55); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait[data-placeholder] img { filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; }
.founder--lorenzo .portrait { background: var(--signal); }
.portrait__initials { position: absolute; left: 6%; bottom: 2%; font: 900 clamp(84px, 9vw, 150px)/.8 var(--display); letter-spacing: -0.01em; color: var(--signal); }
.founder--lorenzo .portrait__initials { color: var(--bone); }
.portrait__flag { position: absolute; top: 12px; right: 12px; padding: 7px 10px; border-radius: 6px; background: var(--ink); color: var(--on-dark); font: 700 14px/1 var(--text); }

/* Who we build for: the kinds of business, as large as a sign; the phone they are found on; the three things we sell. */
.who { padding: var(--s6) 0 var(--s5); background: var(--bone); }
.who__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4) var(--s5); align-items: center; }
.who__for { display: grid; gap: 18px; }
.who h2 { font-size: clamp(48px, 5vw, 80px); }
.who__lede { color: var(--slate); }
.who__kinds { display: grid; gap: 2px; margin-top: 8px; }
.who__kinds li { font: 900 clamp(46px, 5.2vw, 84px)/.92 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.who__kinds li:nth-child(even) { color: var(--signal); }
.who__phone { width: 100%; max-width: 620px; justify-self: center; margin-block: -40px; }
.who__sell { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s3); }
.sell { display: grid; align-content: start; justify-items: start; gap: 8px; padding-top: 18px; border-top: 2px solid var(--ink); }
.sell__name { font: 800 24px/1.2 var(--text); }
.sell__price { color: var(--slate); }

/* How it goes: four steps, numbered because they happen in this order, and the site that went live. */
.how { padding: var(--s6) 0; background: var(--night); color: var(--on-dark); overflow: clip; }
.how__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4) var(--s5); align-items: center; }
.how__text { display: grid; gap: var(--s4); }
.how h2 { font-size: clamp(56px, 6vw, 100px); }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s4); counter-reset: step; }
.step { position: relative; display: grid; align-content: start; gap: 8px; padding-top: 16px; border-top: 1px solid var(--hair-dark); counter-increment: step; }
.step::before { content: counter(step); font: 900 clamp(64px, 6vw, 96px)/.8 var(--display); color: var(--signal); }
.step h3 { margin-top: 6px; font-size: 24px; }
.step p { color: var(--on-dark-soft); }
.how__pic { position: relative; container-type: inline-size; display: grid; justify-items: center; margin: 0; }
.how__phone { position: relative; z-index: 1; width: min(84cqi, 420px); margin-bottom: -16cqi; }
.how__word { order: 2; width: 100%; margin-top: -22cqi; font: 900 54cqi/.8 var(--display); text-transform: uppercase; letter-spacing: -0.015em; text-align: center; color: var(--signal); user-select: none; }
.how__eg { order: 3; position: relative; z-index: 1; max-width: 40ch; margin-top: 18px; color: var(--on-dark-soft); font-size: 16px; text-align: center; }
.how__eg a { display: flex; justify-content: center; align-items: center; min-height: 44px; color: var(--on-dark); font-weight: 700; text-underline-offset: 4px; }
.how__eg a:hover { color: var(--signal); }

/* The two surnames slide in from the outside edges and meet as the band arrives; the phones settle. Native scroll
   drives it; without support, or with reduced motion, everything stands where it ends. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .founder__word { animation: ab-meet linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    .founder--lorenzo .founder__word { animation-name: ab-meet-r; }
    .who__phone, .how__phone { animation: ab-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes ab-meet { from { translate: -18% 0; } to { translate: 0 0; } }
@keyframes ab-meet-r { from { translate: 18% 0; } to { translate: 0 0; } }
@keyframes ab-settle { from { translate: 0 12%; rotate: -4deg; } to { translate: 0 0; rotate: 0deg; } }

@media (max-width: 1099.98px) {
  .founder { grid-template-columns: 1fr; }
  .founder .portrait { width: min(320px, 70%); }
  .founder__word { font-size: 14vw; }
  .founder { padding-bottom: 12vw; }
}
@media (max-width: 759.98px) {
  .ab-head__in { grid-template-columns: 1fr; }
  .ab-head h1 { font-size: clamp(60px, 18.5vw, 110px); }
  .founders { grid-template-columns: 1fr; }
  .founder, .founder--kenan, .founder--lorenzo { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 18px; min-height: 0; padding: 40px var(--gutter) 31vw; }
  .founder .portrait { width: 100%; }
  .founder__word { font-size: 29vw; }
  .founder--kenan .founder__word { right: auto; left: 0.04em; }
  .founder__name { font-size: 40px; }
  .portrait__initials { font-size: 64px; }
  .portrait__flag { top: 8px; right: 8px; font-size: 13px; padding: 5px 7px; }
  .who { padding-top: var(--s5); }
  .who__in, .how__in { grid-template-columns: 1fr; }
  .who__phone { max-width: 360px; margin-block: -24px -40px; }
  .who__sell { grid-template-columns: 1fr; gap: var(--s3); }
  .how { padding: var(--s5) 0; }
  .steps { grid-template-columns: 1fr; gap: var(--s3); }
  .how__phone { width: 62cqi; }
}