/* sits under the hero (hero.css), like the index on the home page */
.collections {
  padding: clamp(28px, 5vh, 56px) var(--gutter) clamp(64px, 12vh, 140px);
}

.collections__grid { display: flex; flex-direction: column; gap: 10px; }

/* ---- One collection: a thin strip ---- */

.strip {
  --cut: 30%;
  position: relative;
  display: block;
  height: clamp(96px, 17vh, 190px);
  /* the streaks run off the right edge of the screen: the strip ignores the page's right margin */
  margin-right: calc(-1 * var(--gutter));
  overflow: hidden;
  background: var(--bg);
}

.strip__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.strip.is-ready .strip__canvas { opacity: 1; }

/* dimmed a little until hover */
.strip::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(10, 10, 10, 0.18);
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}
.strip:hover::before, .strip:focus-visible::before { opacity: 0; }
.strip__text, .strip__arrow { z-index: 2; }

/* the title sits on the stretched pixels, just past the photo */
.strip__text {
  position: absolute; top: 50%;
  left: calc(var(--cut) + clamp(20px, 3vw, 44px));
  right: 96px;
  display: flex; align-items: baseline; gap: 16px;
  transform: translateY(-50%);
  transition: transform 450ms var(--ease);
  /* the streaks are drawn untouched, so the text brings its own contrast */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 1px 18px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.strip__title { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1; }

.strip__meta { font-size: 13px; color: rgba(242, 242, 242, 0.7); }

.strip__arrow {
  position: absolute; top: 50%; right: calc(var(--gutter) + clamp(20px, 3vw, 44px));
  display: flex;
  opacity: 0;
  transform: translate(-10px, -50%);
  transition: opacity 300ms var(--ease), transform 450ms var(--ease);
}

.strip:hover .strip__text, .strip:focus-visible .strip__text { transform: translate(-14px, -50%); }
.strip:hover .strip__arrow, .strip:focus-visible .strip__arrow { opacity: 1; transform: translate(0, -50%); }

.strip:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

/* touch screens can't hover, so the arrow that says "open this" is always there */
@media (hover: none) {
  .strip__arrow { opacity: 0.7; transform: translate(0, -50%); }
}

@media (max-width: 640px) {
  .strip__text { flex-direction: column; gap: 4px; right: 56px; }
  .strip__meta { font-size: 12px; }
  .strip__arrow svg { width: 28px; }
}

.collections__empty { font-size: 15px; }