/* Collection index template: the full-bleed hero with the title on its bottom
   edge, the intro row, and the tab bar in the head.
*/

.exp-hero::before{
  content:""; position:absolute; inset:0 0 auto; height:30%; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,0));
}

/* ---- page head ------------------------------------------------------------ */
.exp-head{ padding:0 var(--gutter); }

/* hero: photo edge to edge under the nav, never taller than 460px; the page
   name sits on its bottom edge in white, its feet trimmed by the photo */
.exp-hero{
  position:relative; overflow:hidden;
  margin:0 calc(var(--gutter) * -1) clamp(28px, 3vw, 48px);
  height:clamp(276px, 36.8vw, 460px);             /* 15% up on the 400px cap */
}
.exp-hero .crumbs{
  position:absolute; top:clamp(18px, 2vw, 32px); left:var(--gutter); right:var(--gutter); z-index:2;
}
.exp-hero__img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.exp-hero::after{                                 /* soft shade at the foot so the white name holds */
  content:""; position:absolute; inset:auto 0 0; height:55%; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.3), rgba(0,0,0,0));
}
.exp-hero__title{
  position:absolute; left:0; right:0; bottom:-.1em; z-index:1;
  font:400 var(--exp-title, 12vw)/.8 var(--serif); letter-spacing:0;
  text-align:center; text-transform:uppercase; white-space:nowrap; color:var(--white);
  transition:opacity .35s var(--ease), translate .45s var(--ease-out);
}
.exp-hero__title.is-wrapped{ white-space:normal; }
.exp-hero__title.is-swapping{ opacity:0; translate:0 .15em; }
.exp-head__row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; flex-wrap:wrap;
  margin-top:0;
}
.exp-head__intro{ display:flex; flex-direction:column; gap:20px; max-width:880px; }
.exp-head__dek{
  max-width:60ch;
  font:400 var(--fs-body)/var(--lh-body) var(--sans); letter-spacing:var(--ls-body); color:var(--text);
}

/* sub-category tabs: the category page's region bar. Twelve of them run past
   the edge, so the bar fades out on the right to show there's more to scroll. */
.exp-head .archive__bar{ margin:clamp(36px, 3.4vw, 52px) 0 0; }
.exp-head .subnav{
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent);
}
.exp-head .subnav__list{ padding-right:64px; }

/* the grid below picks up straight after the slider */
.exp-page .archive{ padding-top:0; }

/* grid header: section label and sort on one hairline */
.exp-latest__bar{ margin-top:0; }
.exp-latest__bar .kicker{ padding-bottom:20px; }

/* the heading and intro fade over with the slider when a tab changes */
.exp-head__intro{ transition:opacity .35s var(--ease), translate .45s var(--ease-out); }
.exp-head__intro.is-swapping{ opacity:0; translate:0 10px; }
@media (prefers-reduced-motion:reduce){
  .exp-head__intro, .exp-hero__title{ transition:none; }
}