/* =========================================================
   NEW ON THE LINE — newly introduced products (js/new-line.js).
   Layout follows the Alture "Work list": hairline, a head with the
   title + count and a short note, then one 16:9 card per product,
   centred, 50vh tall, each on a 100vw-perspective block.
   ========================================================= */

.nl {
  position: relative;
  padding: 0 0 128px;
  color: var(--neutral-900);
}

.nl-rule {
  height: 1px;
  margin: 0 var(--pad-side, 5vw);
  background: color-mix(in srgb, var(--neutral-900) 14%, transparent);
  transform-origin: left;
}

/* ---------- head ---------- */
.nl-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: end;
  gap: 32px 5vw;
  padding: 96px var(--pad-side, 5vw) 0;
}

.nl-heading-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.nl-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font: 400 min(8.333vw, 120px)/calc(.94 * var(--display-lh, 1)) var(--font-display);
  letter-spacing: calc(-.035em + var(--display-fit, 0em));
}

/* one block per title line. Not clipped: the words blur in, and a mask
   would slice the blur's halo */
.nl-mask {
  display: block;
}

.nl-word {
  display: inline-block;
}

.nl-w {
  display: inline-block;
}

.nl-period {
  display: inline-block;
  color: var(--coral-600);
  transform-origin: 50% 80%;
}

.nl-count {
  margin-top: .9em;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--neutral-700);
}

.nl-head-texts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: .6em;
}

.nl-label {
  margin: 0;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nl-text {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  color: var(--neutral-700);
}

/* ---------- cards ---------- */
.nl-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  margin-top: 8rem;
  padding: 0 var(--pad-side, 5vw);
}

.nl-item,
.nl-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* the perspective sits on the card's DIRECT parent, or rotateX reads
   as a flat squash */
.nl-block {
  perspective: 100vw;
}

.nl-card {
  --hue: var(--sage-100);
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  height: min(50vh, calc((100vw - 2 * var(--pad-side, 5vw)) * 9 / 16));
  border-radius: 32px;
  overflow: clip;
  background: var(--hue);
  color: inherit;
  text-decoration: none;
  will-change: transform;
}

.nl-card[data-hue="coral"] { --hue: var(--coral-100); }
.nl-card[data-hue="butter"] { --hue: var(--butter-100); }

.nl-card:focus-visible {
  outline: 2px solid var(--sage-700);
  outline-offset: 4px;
}

.nl-img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 62%;
  max-height: 74%;
  object-fit: contain;
  pointer-events: none;
}

.nl-img.is-vertical {
  max-height: 84%;
}

.nl-name {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  border-radius: 9rem;
  background: var(--neutral-100);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.2;
  color: var(--neutral-900);
}

.nl-dot {
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: var(--coral-600);
}

/* ---------- hover pill (hoisted to <body>) ---------- */
.nl-pill-wrap {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: none;
  pointer-events: none;
}

.nl-pill-wrap.is-on {
  display: block;
}

.nl-pill {
  position: absolute;
  top: .5rem;
  left: .5rem;
  padding: .75rem 1rem;
  border-radius: 4rem;
  background: rgb(0 0 0 / .3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-text);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  will-change: transform;
}

.nl-pill-text-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.nl-pill-text {
  white-space: nowrap;
}

@media (max-width: 991px) {
  .nl-list {
    gap: 5rem;
    margin-top: 5rem;
  }

  .nl-card {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 767px) {
  .nl {
    padding-bottom: 80px;
  }

  .nl-rule {
    margin: 0 24px;
  }

  .nl-head {
    grid-template-columns: 1fr;
    padding: 64px 24px 0;
  }

  .nl-title {
    font-size: 16.5vw;
  }

  .nl-list {
    gap: 1.5rem;
    margin-top: 3rem;
    padding: 0 24px;
  }

  .nl-card {
    border-radius: 20px;
  }

  /* small cards: keep the product clear of the name pill */
  .nl-img {
    max-height: 62%;
    bottom: 12%;
  }

  .nl-img.is-vertical {
    max-height: 68%;
  }

  .nl-name {
    left: 1rem;
    bottom: 1rem;
  }
}

/* =========================================================
   BOTTOM-EDGE BLUR — only while this section is on screen
   (js/new-line.js toggles .is-on). A port of the Alture template's
   progressive-blur_wrap: a 6rem strip, flipped 180° so panel 1 (the
   full 1rem blur) hugs the bottom edge, each following panel halving
   the blur on a higher mask band. --nl-blur is a registered length so
   it eases in and out — fading opacity would kill the backdrop.
   ========================================================= */
@property --nl-blur {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.nl-blur {
  --nl-blur: 0px;
  position: fixed;
  inset: auto 0 0;
  z-index: 98;
  height: 6rem;
  overflow: clip;
  pointer-events: none;
  transform: rotate(180deg);
  transition: --nl-blur 0.5s ease;
}

.nl-blur.is-on {
  --nl-blur: 1rem;
}

.nl-blur > i {
  position: absolute;
  inset: 0;
}

.nl-blur > i:nth-child(1) { backdrop-filter: blur(var(--nl-blur)); -webkit-backdrop-filter: blur(var(--nl-blur)); mask: linear-gradient(#000 0% 10%, #0000 30%); -webkit-mask: linear-gradient(#000 0% 10%, #0000 30%); }
.nl-blur > i:nth-child(2) { backdrop-filter: blur(calc(var(--nl-blur) / 2)); -webkit-backdrop-filter: blur(calc(var(--nl-blur) / 2)); mask: linear-gradient(#0000 0%, #000 10% 20%, #0000 40%); -webkit-mask: linear-gradient(#0000 0%, #000 10% 20%, #0000 40%); }
.nl-blur > i:nth-child(3) { backdrop-filter: blur(calc(var(--nl-blur) / 4)); -webkit-backdrop-filter: blur(calc(var(--nl-blur) / 4)); mask: linear-gradient(#0000 0%, #000 20% 30%, #0000 50%); -webkit-mask: linear-gradient(#0000 0%, #000 20% 30%, #0000 50%); }
.nl-blur > i:nth-child(4) { backdrop-filter: blur(calc(var(--nl-blur) / 8)); -webkit-backdrop-filter: blur(calc(var(--nl-blur) / 8)); mask: linear-gradient(#0000 10%, #000 30% 40%, #0000 60%); -webkit-mask: linear-gradient(#0000 10%, #000 30% 40%, #0000 60%); }
.nl-blur > i:nth-child(5) { backdrop-filter: blur(calc(var(--nl-blur) / 16)); -webkit-backdrop-filter: blur(calc(var(--nl-blur) / 16)); mask: linear-gradient(#0000 20%, #000 40% 50%, #0000 70%); -webkit-mask: linear-gradient(#0000 20%, #000 40% 50%, #0000 70%); }
.nl-blur > i:nth-child(6) { backdrop-filter: blur(calc(var(--nl-blur) / 32)); -webkit-backdrop-filter: blur(calc(var(--nl-blur) / 32)); mask: linear-gradient(#0000 30%, #000 50% 60%, #0000 80%); -webkit-mask: linear-gradient(#0000 30%, #000 50% 60%, #0000 80%); }
.nl-blur > i:nth-child(7) { backdrop-filter: blur(calc(var(--nl-blur) / 64)); -webkit-backdrop-filter: blur(calc(var(--nl-blur) / 64)); mask: linear-gradient(#0000 40%, #000 60% 70%, #0000 90%); -webkit-mask: linear-gradient(#0000 40%, #000 60% 70%, #0000 90%); }
.nl-blur > i:nth-child(8) { backdrop-filter: blur(calc(var(--nl-blur) / 128)); -webkit-backdrop-filter: blur(calc(var(--nl-blur) / 128)); mask: linear-gradient(#0000 50%, #000 70% 80%, #0000 100%); -webkit-mask: linear-gradient(#0000 50%, #000 70% 80%, #0000 100%); }
.nl-blur > i:nth-child(9) { backdrop-filter: blur(calc(var(--nl-blur) / 256)); -webkit-backdrop-filter: blur(calc(var(--nl-blur) / 256)); mask: linear-gradient(#0000 60%, #000 80% 90%, #0000 100%); -webkit-mask: linear-gradient(#0000 60%, #000 80% 90%, #0000 100%); }
.nl-blur > i:nth-child(10) { backdrop-filter: blur(calc(var(--nl-blur) / 512)); -webkit-backdrop-filter: blur(calc(var(--nl-blur) / 512)); mask: linear-gradient(#0000 70%, #000 90%, #0000 100%); -webkit-mask: linear-gradient(#0000 70%, #000 90%, #0000 100%); }