/* Line heroes: per-line photography and overlays. Loaded after lines.css on every line page. */

/* Train: a bright garage gym, so the floor and the left edge get a deeper wash to hold the title and reading */
.line[data-line="train"] .lhero::before {
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--tint) 97%, #000) 0%, color-mix(in oklab, var(--tint) 80%, transparent) 30%, color-mix(in oklab, var(--tint) 30%, transparent) 58%, transparent 80%),
    linear-gradient(90deg, color-mix(in oklab, var(--tint) 84%, transparent) 0%, color-mix(in oklab, var(--tint) 30%, transparent) 48%, transparent 72%);
}

/* Hunt: the photograph carries the dawn now, so the drawn sun steps back */
.line[data-line="hunt"] .lhero__sun { display: none; }
.line[data-line="hunt"] .lhero--sunrise::before {
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--tint) 96%, #000) 0%, color-mix(in oklab, var(--tint) 62%, transparent) 36%, transparent 74%),
    linear-gradient(90deg, color-mix(in oklab, var(--tint) 86%, transparent) 0%, color-mix(in oklab, var(--tint) 30%, transparent) 52%, transparent 78%);
}

/* Unseen: keep the rim-lit figure, lift nothing else */
.line[data-line="unseen"] .lhero::after { opacity: .06; }

/* Mountain designs: the Grand Mesa at dusk behind the design window */
.line[data-line="mountain"] .lhero {
  background: url(/img/hero-mountain-v2.jpg) 50% 58% / cover no-repeat, var(--tint);
}
.line[data-line="mountain"] .lhero::before {
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--tint) 92%, #000) 0%, color-mix(in oklab, var(--tint) 30%, transparent) 34%, transparent 60%),
    linear-gradient(90deg, color-mix(in oklab, var(--tint) 78%, transparent) 0%, color-mix(in oklab, var(--tint) 24%, transparent) 46%, transparent 64%);
}
.line[data-line="mountain"] .lhero::after { opacity: .08; }

/* Small goods: pin, patch and sticker on leather, under the price tags */
/* The still life sits in the gap between the title and the price tags, its edges dissolved into the tint */
.line[data-line="small-goods"] .lhero {
  background: url(/img/hero-small-goods-v2-band.jpg) 50% 42% / cover no-repeat, var(--tint);
}
.line[data-line="small-goods"] .lhero::before {
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--tint) 94%, #000) 0%, color-mix(in oklab, var(--tint) 50%, transparent) 32%, transparent 62%),
    linear-gradient(90deg, color-mix(in oklab, var(--tint) 90%, transparent) 0%, color-mix(in oklab, var(--tint) 55%, transparent) 30%, transparent 44%);
}
.line[data-line="small-goods"] .lhero::after { opacity: .06; }

@media (max-width: 699px) {
  .line[data-line="mountain"] .lhero { background-position: 62% 58%, 0 0; }
  .line[data-line="small-goods"] .lhero { background: url(/img/hero-small-goods-v2.jpg) 56% 34% / cover no-repeat, var(--tint); }
}