/* The opening band of an inner page: the page's own words on graphite, one photograph beside
   them. Two cells of one grid, never type over a picture — the contrast is the panel's.

   Above 1024px the copy holds the left cell and the photograph bleeds off the right edge.
   Below it the photograph comes first at 3:2 and the copy sits under it, which is the order
   the markup is already in. */

.page-banner {
  position: relative;
  isolation: isolate;
  /* The band runs edge to edge up to the shell the rest of the page is measured by, so a 4K
     screen gets the same 105rem of content everywhere instead of one 3840px photograph.
     No viewport unit is used for the bleed: `100vw` counts the scrollbar and would push the
     document wider than the window. */
  width: min(100%, var(--page-max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(19rem, 0.86fr) minmax(0, 1.14fr);
  align-items: stretch;
  overflow: hidden;
  border-bottom: 1px solid rgba(251, 251, 250, 0.16);
  background: var(--graphite);
  color: var(--frost-bright);
}

.page-banner-copy {
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  padding: clamp(3rem, 5vw, 5rem) clamp(2rem, 3.6vw, 4rem) clamp(3rem, 5vw, 5rem) var(--page-gutter);
}

.page-banner-media {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-height: clamp(21rem, 30vw, 30rem);
}

.page-banner-media picture,
.page-banner-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-banner-media img {
  object-fit: cover;
  /* Authored per photograph by the view that supplies it. */
  object-position: var(--banner-focus, 50% 32%);
}

/* The seam, not a scrim: the picture dissolves into the panel it stands next to, and stops
   well before the copy so no word is ever read against a photograph. */
.page-banner-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--graphite) 0%, rgba(23, 23, 25, 0.62) 16%, rgba(23, 23, 25, 0) 44%);
  content: "";
  pointer-events: none;
}

.page-banner-eyebrow {
  margin: 0 0 clamp(1rem, 1.6vw, 1.5rem);
  color: var(--gold-on-graphite);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.page-banner h1 {
  margin: 0;
  max-width: 14ch;
  color: var(--frost-bright);
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.page-banner-lead {
  max-width: 44ch;
  margin: clamp(1.1rem, 1.8vw, 1.6rem) 0 0;
  color: var(--silver);
  font-size: 1rem;
  line-height: 1.6;
}
@media (min-width: 1024px) { .page-banner-lead { font-size: 1.125rem; } }

.page-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-top: clamp(1.5rem, 2.4vw, 2.25rem);
}

/* On graphite the filled action inverts: frost ground, graphite word. */
.page-banner-actions .button-primary {
  border: 1px solid var(--frost-bright);
  background: var(--frost-bright);
  color: var(--graphite);
}

.page-banner-actions .button-primary:hover,
.page-banner-actions .button-primary:focus-visible {
  background: var(--gold-on-graphite);
  border-color: var(--gold-on-graphite);
  color: var(--graphite);
}

.page-banner-actions .text-link,
.page-banner-actions > a:not(.button) {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--frost-bright);
  text-underline-offset: 0.3em;
}

.page-banner-actions .text-link:hover,
.page-banner-actions > a:not(.button):hover {
  color: var(--gold-on-graphite);
}

/* A quiet line of facts under the actions: the catalogue's count, the shop's pickup note. */
.page-banner-aside {
  margin-top: clamp(1.75rem, 2.6vw, 2.5rem);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid rgba(251, 251, 250, 0.2);
  color: var(--silver);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.page-banner-aside strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--frost-bright);
  font-weight: 500;
}

.page-banner-aside a {
  color: var(--frost-bright);
  text-underline-offset: 0.3em;
}

.page-banner-aside a:hover {
  color: var(--gold-on-graphite);
}

/* The catalogue's size, in the band instead of a block of its own. */
.page-banner-count {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin: 0;
}

.page-banner-count strong {
  margin: 0;
  color: var(--frost-bright);
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
}

.page-banner-count span {
  font-size: 0.875rem;
  line-height: 1.35;
}

/* The catalogue is a working page: the band stays short so search and filters are not pushed
   off the first screen. The picture's minimum height belongs to the side-by-side layout only —
   below 1024px the band is sized by its aspect ratio, and a minimum would drive the width. */
@media (min-width: 1024px) {
  .page-banner--slim .page-banner-media {
    min-height: clamp(17rem, 22vw, 22rem);
  }
}

.page-banner--slim .page-banner-copy {
  padding-block: clamp(2.5rem, 3.6vw, 3.6rem);
}

.page-banner--slim h1 {
  font-size: clamp(2.2rem, 3vw, 3.1rem);
}

@media (max-width: 1023px) {
  .page-banner {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-banner-media {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  /* The seam turns with the layout: the picture now sits above the copy, not beside it. */
  .page-banner-media::after {
    background: linear-gradient(180deg, rgba(23, 23, 25, 0) 58%, rgba(23, 23, 25, 0.78) 100%);
  }

  .page-banner-copy {
    grid-column: 1;
    grid-row: 2;
    padding: clamp(2.25rem, 6vw, 3rem) var(--page-gutter) clamp(2.5rem, 6vw, 3.25rem);
  }

  .page-banner--slim .page-banner-media {
    aspect-ratio: 21 / 9;
  }

  .page-banner h1 {
    max-width: 16ch;
  }
}

/* A 3:2 photograph across a 768px tablet is 504px of the screen before a word is read.
   The band widens instead: the same picture, a quarter of the height. */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-banner-media {
    aspect-ratio: 21 / 9;
  }

  .page-banner--slim .page-banner-media {
    aspect-ratio: 32 / 9;
  }
}

@media (max-width: 767px) {
  .page-banner h1 {
    font-size: clamp(2.1rem, 9.5vw, 3rem);
  }

  .page-banner--slim h1 {
    font-size: clamp(1.9rem, 8vw, 2.5rem);
  }

  .page-banner-actions .button {
    width: 100%;
  }
}

/* A picture that is 3:2 on a 320px phone is 213px of a 568px screen. The band keeps a little
   more of the studio and a little less of the crop when the screen is that short. The slim cut
   is already shorter than this and keeps its own ratio. */
@media (max-width: 1023px) and (max-height: 620px) {
  .page-banner:not(.page-banner--slim) .page-banner-media {
    aspect-ratio: 2 / 1;
  }
}

/* A working catalogue brings search into the first phone viewport. */
@media (max-width: 767px) {
 .page-banner--catalog .page-banner-media { aspect-ratio: 4 / 1; }
 .page-banner--catalog .page-banner-copy { padding-block: 1.25rem; gap: .6rem; }
 .page-banner--catalog .page-banner-eyebrow { display: none; }
 .page-banner--catalog .page-banner-aside { margin-block-start: .5rem; }
 .page-banner--catalog .page-banner-count { display: none; }
 .page-banner--catalog .page-banner-lead { font-size: 1rem; }
}