/* Stage 2A: scoped to the former philosophy section. Static is the complete state. */
.brand-showcase { position: relative; background: var(--paper); color: var(--espresso); scroll-margin-top: 0; }
.showcase-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  height: clamp(680px, 63vw, 900px);
  padding-block: clamp(40px, 4vw, 64px);
}
.showcase-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.showcase-brand-track { display: contents; }
.showcase-brand {
  position: absolute;
  z-index: -1;
  top: 23%;
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  opacity: .16;
  color: var(--espresso);
  font-family: var(--serif);
  font-weight: 400;
  transform-origin: 50% 40%;
  pointer-events: none;
}
.showcase-brand-name { display: block; font-size: clamp(150px, 18vw, 280px); line-height: .86; letter-spacing: -.05em; white-space: nowrap; }
.showcase-brand-description { display: block; padding-left: 12%; margin-top: 28px; font-size: clamp(90px, 10.8vw, 168px); line-height: .95; letter-spacing: -.035em; white-space: nowrap; }
.showcase-photo { min-width: 0; min-height: 0; overflow: clip; align-self: stretch; }
.showcase-photo-reveal { width: 100%; height: 100%; overflow: clip; background: var(--sand); }
.showcase-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.showcase-lead { grid-column: 1 / 5; grid-row: 3 / 12; }
.showcase-lead img { object-position: 55% 38%; }
.showcase-treatment { grid-column: 7 / 12; grid-row: 1 / 5; }
.showcase-treatment img { object-position: 46% 50%; }
.showcase-detail { grid-column: 6 / 9; grid-row: 6 / 11; }
.showcase-detail img { object-position: 50% 43%; }
.showcase-beauty { grid-column: 10 / -1; grid-row: 5 / 10; }
.showcase-beauty img { object-position: 50% 36%; }
.showcase-intro { grid-column: 10 / -1; grid-row: 10 / -1; align-self: end; padding-top: 20px; }
.showcase-intro h3 { font: 400 clamp(32px, 2.8vw, 42px)/1.02 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.showcase-intro p { max-width: 30ch; margin-top: 16px; font-size: 16px; line-height: 1.6; }

@media (min-width: 1000px) and (min-height: 700px) {
  .brand-showcase[data-showcase-motion="desktop"] { height: calc(min(100svh, 900px) + min(90svh, 800px)); }
  .brand-showcase[data-showcase-motion="desktop"] .showcase-stage { position: sticky; top: 0; height: min(100svh, 900px); }
}
@media (max-width: 999px) {
  .showcase-stage { --showcase-brand-space: calc(26.6vw + 34px); height: auto; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; gap: 28px 20px; padding-top: 64px; padding-bottom: 72px; }
  .brand-showcase .showcase-photo { align-self: start; }
  .showcase-brand { position: relative; grid-column: 1 / -1; grid-row: 1; top: auto; left: auto; right: auto; margin-bottom: 16px; opacity: .24; }
  .showcase-brand-name { font-size: 19vw; }
  .showcase-brand-description { margin-top: 18px; padding-left: 12%; font-size: 10.8vw; }
  .showcase-lead { grid-column: 1 / 5; grid-row: 2; width: 100%; max-width: 500px; aspect-ratio: 4 / 5; }
  .showcase-treatment { grid-column: 3 / -1; grid-row: 3; width: 100%; max-width: 600px; aspect-ratio: 2 / 1; }
  .showcase-detail { grid-column: 1 / 4; grid-row: 4; aspect-ratio: 4 / 5; }
  .showcase-beauty { grid-column: 4 / -1; grid-row: 4; aspect-ratio: 3 / 4; }
  .brand-showcase .showcase-beauty { margin-top: 36px; }
  .showcase-intro { grid-column: 2 / -1; grid-row: 5; max-width: 360px; padding-top: 8px; }
  .showcase-intro h3 { font-size: 40px; }
}
@media (max-width: 599px) {
  .showcase-stage { --gutter: 22px; --showcase-brand-space: calc(26.256vw + 22px); gap: 24px 14px; padding-top: 56px; padding-bottom: 64px; }
  .showcase-brand { margin-bottom: 8px; }
  .showcase-brand-name { font-size: 18.6vw; }
  .showcase-brand-description { margin-top: 14px; }
  .showcase-lead { grid-column: 1 / 6; }
  .showcase-treatment { grid-column: 2 / -1; }
  .showcase-intro h3 { font-size: 36px; }
  .showcase-intro p { margin-top: 14px; }
}
/* The mobile wordmark stays behind the photographs while they scroll normally.
   Its opening row reserves the same space as the original two lines of type.
   A real containing block ends with the photos: a grid span on the sticky
   lettering itself does not constrain its bottom edge before the introduction. */
@media (max-width: 999px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .brand-showcase[data-showcase-motion="flow"] .showcase-stage {
    grid-template-rows: var(--showcase-brand-space) auto auto auto auto;
  }
  .brand-showcase[data-showcase-motion="flow"] .showcase-brand-track {
    display: block;
    position: relative;
    z-index: -1;
    grid-column: 1 / -1;
    grid-row: 1 / 5;
    align-self: stretch;
    pointer-events: none;
  }
  .brand-showcase[data-showcase-motion="flow"] .showcase-brand {
    position: sticky;
    top: clamp(140px, 26svh, 240px);
    margin-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-showcase[data-showcase-motion] { height: auto; }
  .brand-showcase[data-showcase-motion] .showcase-stage { position: relative; height: clamp(680px, 63vw, 900px); }
  .brand-showcase .showcase-brand { opacity: .16; transform: none; }
  .brand-showcase .showcase-photo-reveal, .brand-showcase .showcase-photo img, .brand-showcase .showcase-intro { opacity: 1; transform: none; clip-path: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 999px) {
  .brand-showcase[data-showcase-motion] .showcase-stage { height: auto; }
  .brand-showcase .showcase-brand { opacity: .24; }
}