/* ==========================================================================
   Home page sections · index.html (version A) and preview-home-b (B)
   Both written by site-internal/build_home.py. The hero is css/hero.css;
   the house of brands grid is css/house.css.
   ========================================================================== */

/* The words, on the white under the photograph ---------------------------
   Centred, as the photograph is. */
.intro { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 5vw, 4rem); text-align: center; }
.intro__inner { display: grid; justify-items: center; }
.intro .label { justify-content: center; }
.intro__title { margin-top: clamp(1rem, 2vw, 1.5rem); }
.intro__lede { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 34ch; }
.intro__cta { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

/* The designer ----------------------------------------------------------- */
.designer__grid { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.designer__portrait { position: relative; margin: 0; background: var(--paper-2); }
.designer__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.designer__text h2 { margin-block: 1.5rem 1.75rem; max-width: 16ch; }
.designer__story { line-height: 1.75; }
@media (min-width: 900px) {
  .designer__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
  .designer--b .designer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}

.signoff { display: grid; gap: 0.4rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.signoff__name { font-size: var(--fs-display-s); line-height: 1.2; }
.signoff__role {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The craft (A): three close-ups in a row, one word under each ----------- */
.craft__label { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.craft__row { display: grid; gap: clamp(0.75rem, 1.6vw, 1.5rem); }
@media (min-width: 640px) { .craft__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.craft__item { margin: 0; }
.craft__item picture { display: block; background: var(--paper-2); }
.craft__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.craft__cap {
  padding-top: 0.9rem;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Selected couture (A): two columns, the right one set lower -------------- */
.work__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 3rem); }
@media (min-width: 700px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work__item:nth-child(even) { margin-top: clamp(4rem, 10vw, 9rem); margin-bottom: calc(-1 * clamp(4rem, 10vw, 9rem)); }
}
.work__item { display: block; color: inherit; }
.work__item picture, .work-b__item picture { display: block; overflow: hidden; background: var(--paper-2); }
.work__item img, .work-b__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.work__item:hover img, .work-b__item:hover img { transform: scale(1.025); }
.work__cap {
  display: block;
  padding-top: 0.9rem;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.work__more { margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 700px) { .work__more { margin-top: calc(clamp(4rem, 10vw, 9rem) + clamp(2rem, 4vw, 3rem)); } }
.work__more--centre { text-align: center; }

/* Three steps (A) --------------------------------------------------------- */
.process3 { list-style: none; margin: 0; padding: 0; }
.process3__n {
  display: inline-block;
  min-width: 3rem;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--ink-soft);
  vertical-align: middle;
}

/* A line, then book (A) ------------------------------------------------- */
.closing { border-top: 1px solid var(--line); }
.closing__inner { display: grid; justify-items: center; text-align: center; }
.closing__quote { margin: 0; }
.closing__quote blockquote { margin: 0; }
/* Measured on the line itself, at its display size. */
.closing__quote p { margin: 0 auto; max-width: 16ch; text-wrap: balance; }
.closing__by {
  margin-top: 1.5rem;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.closing__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; justify-items: center; gap: 1rem; }
.closing__note { font-size: var(--fs-small); }

/* B: the work first, three across with the middle one raised ------------ */
.work-b__row { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(0.75rem, 2vw, 2rem); }
.work-b__item { display: block; color: inherit; }
@media (min-width: 700px) {
  .work-b__row { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .work-b__item--1, .work-b__item--3 { margin-top: clamp(3rem, 7vw, 6rem); }
}

/* B: close-ups as one band, edge to edge -------------------------------- */
.craft-band { padding-block: clamp(2rem, 5vw, 4rem) clamp(4.5rem, 10vw, 9rem); }
.craft-band__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.craft-band__item { margin: 0; background: var(--paper-2); }
.craft-band__item img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.craft-band__cap {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* B: book, with the three steps in one line ------------------------------ */
.book-b { border-top: 1px solid var(--line); }
.book-b__inner { display: grid; justify-items: center; text-align: center; }
.book-b__inner h2 { margin-top: 1.25rem; }
.book-b__steps {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 2.75rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem clamp(1.5rem, 4vw, 3.5rem);
  font-size: var(--fs-body-lg);
}
.book-b__steps span {
  margin-right: 0.6rem;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--ink-soft);
}
.book-b__note { margin-top: 1rem; font-size: var(--fs-small); }

/* B: the house as a slim strip of logos above the footer ----------------- */
.house-strip { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem); }
.house-strip__label { justify-content: center; width: 100%; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.house-strip__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.house-strip__row li { border-top: 1px solid var(--line); }
.house-strip__row li:nth-child(odd) { border-right: 1px solid var(--line); }
@media (min-width: 900px) {
  .house-strip__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .house-strip__row li { border-top: 0; border-right: 0; }
  .house-strip__row li + li { border-left: 1px solid var(--line); }
}
.house-strip__link {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 1.5rem 1rem;
  color: var(--ink);
}
.house-strip__logo { display: flex; align-items: center; justify-content: center; height: 5.5rem; width: 100%; }
.house-strip__logo img { width: auto; height: var(--logo-h, 100%); max-width: var(--logo-w, 70%); object-fit: contain; transition: transform 0.6s var(--ease-out); }
/* One optical size across four very different shapes; couture a step up. */
.house-strip__logo--couture { --logo-h: 100%; }
.house-strip__logo--sb      { --logo-h: 58%; }
.house-strip__logo--mds     { --logo-h: auto; --logo-w: 7rem; }
.house-strip__logo--bb      { --logo-h: 70%; }
.house-strip__link:hover img { transform: scale(1.05); }
.house-strip__name {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .work__item img, .work-b__item img, .house-strip__logo img { transition: none; }
}