/* Product line landing pages (/collections/<slug>).
   Second pass, 2026-10-13: the opening and the doors borrow the Enso Studio
   focused pages (a full-bleed stone, a name in wide capitals, the sepia bloom),
   and the story is one museum label laid over a photograph. */
.sda-line-preview { padding-block: var(--sda-space-3); background: var(--sda-night); border-bottom: var(--sda-rule); font: var(--sda-caption)/var(--sda-lh-caption) var(--sda-sans); }

/* Wide capitals: the Enso register. The trailing tracking is paid back on the
   left so a centred word sits on the centre line. */
.sda-line-hero__house, .sda-line-doors__title, .sda-line-pieces__count, .sda-line-label__eyebrow, .sda-line-hero__foot {
  font: 500 var(--sda-label)/1.4 var(--sda-sans); letter-spacing: 0.32em; text-transform: uppercase;
}

/* The opening. */
.sda-line-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: clamp(460px, 80svh, 880px); background: var(--sda-stage); color: var(--sda-night-ink); text-align: center; }
.sda-line-hero__ground { position: absolute; inset: 0; z-index: -2; transform: scale(1); }
/* Client-requested, once on arrival. Both baked prints share one transform. */
.sda-line-hero.is-developed .sda-line-hero__ground { animation: sda-line-zoom 24s cubic-bezier(.2, .45, .3, 1) forwards; }
@keyframes sda-line-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.sda-line-hero__bg, .sda-line-hero__bloom, .sda-line-hero__shade { position: absolute; inset: 0; }
.sda-line-hero__bg { z-index: -3; }
.sda-line-hero__bloom { z-index: -2; opacity: 0; transition: opacity 2400ms var(--sda-ease-settle); }
.sda-line-hero.is-developed .sda-line-hero__bloom { opacity: 1; }
.sda-line-hero__bg img, .sda-line-hero__bloom img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A soft pool behind the name and a floor under the foot line, so the stone
   stays the colour it is everywhere else (A's hero was "overfiltered"). */
.sda-line-hero__shade { z-index: -1; background:
  radial-gradient(ellipse 62% 40% at 50% 50%, color-mix(in srgb, var(--sda-vignette) 56%, transparent), var(--sda-vignette-none) 74%),
  linear-gradient(180deg, var(--sda-vignette-none) 62%, color-mix(in srgb, var(--sda-vignette) 62%, transparent)); }
.sda-line-hero__inner { padding: var(--sda-space-6) var(--sda-space-3); max-width: 100%; min-width: 0; text-shadow: 0 1px 28px rgba(26, 16, 6, 0.6); }
.sda-line-hero__house { margin: 0 0 var(--sda-space-4); padding-left: 0.32em; }
.sda-line-page .sda-line-hero__name { margin: 0; font: 400 clamp(1.7rem, 0.55rem + 5vw, 4.75rem)/1.2 var(--sda-sans); letter-spacing: clamp(0.16em, 0.08em + 0.5vw, 0.3em); padding-left: clamp(0.16em, 0.08em + 0.5vw, 0.3em); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.sda-line-hero__foot { position: absolute; left: 0; right: 0; bottom: var(--sda-space-3); display: flex; justify-content: space-between; align-items: center; gap: var(--sda-space-3); letter-spacing: var(--sda-ls-label); text-shadow: 0 1px 12px rgba(26, 16, 6, 0.7); }
.sda-line-hero__foot a { display: inline-flex; align-items: center; min-height: var(--sda-btn-h); color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--sda-t-link); }
.sda-line-hero__foot a span { margin-left: 0.6em; }
.sda-line-hero__foot a:hover { border-bottom-color: currentColor; }

/* Why we make it: the photograph keeps its own shape, and the label crosses
   its left edge. On a phone the label crosses its lower edge instead. */
.sda-line-why { display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; }
.sda-line-why__plate { margin: 0; flex: 0 1 auto; min-width: 0; max-width: 60%; }
.sda-line-why__plate a { display: block; }
.sda-line-why__plate img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(76svh, 700px); box-shadow: var(--sda-mat-shadow); }
.sda-line-why__plate figcaption { margin-top: var(--sda-space-3); max-width: 46ch; }
.sda-line-label { position: relative; z-index: 1; flex: 0 0 auto; width: min(25rem, 44%); margin-right: -4.5rem; padding: var(--sda-space-5) var(--sda-space-5) var(--sda-space-4); background: var(--sda-mat); color: var(--sda-mat-ink); box-shadow: var(--sda-mat-shadow); }
.sda-line-why--solo .sda-line-label { margin: 0 auto; width: min(34rem, 100%); }
.sda-line-label__eyebrow { margin: 0 0 var(--sda-space-3); color: var(--sda-oxblood-deep); }
.sda-line-page .sda-line-label__title { margin: 0 0 var(--sda-space-3); font: 400 var(--sda-h3)/1.3 var(--sda-serif); letter-spacing: 0; }
.sda-line-label p:not(.sda-line-label__eyebrow) { margin: 0 0 0.9em; font: var(--sda-small)/1.6 var(--sda-serif); }
.sda-line-label__link { display: inline-flex; align-items: center; min-height: var(--sda-btn-h); color: var(--sda-oxblood-deep); font: 500 var(--sda-small)/1.3 var(--sda-sans); text-decoration: underline; text-underline-offset: 0.25em; }

/* Every piece. */
.sda-line-pieces__head { text-align: center; margin-bottom: var(--sda-space-5); }
.sda-line-pieces__count { margin: var(--sda-space-3) 0 0; padding-left: 0.32em; color: var(--sda-ink-soft); }
.sda-line-types { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--sda-space-4); margin: 0 0 var(--sda-space-4); }
.sda-line-types a { display: inline-flex; align-items: center; min-height: var(--sda-btn-h); }
.sda-line-types [aria-current] { color: var(--sda-verdigris); }
.sda-line-pieces__foot { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--sda-space-5); margin: var(--sda-space-3) 0 0; }
.sda-line-pieces__foot a { display: inline-flex; align-items: center; min-height: var(--sda-btn-h); }
.sda-line-pieces__empty { text-align: center; }
.sda-line-page .sda-catalog-note { text-align: center; }
.sda-line-page .sda-grid > * { min-width: 0; overflow-wrap: anywhere; }

/* The other lines, as doors. */
.sda-line-doors { background: var(--sda-night); padding-top: var(--sda-space-band); }
.sda-line-page .sda-line-doors__title { margin: 0 0 var(--sda-space-5); padding-left: 0.32em; font: 500 var(--sda-label)/1.4 var(--sda-sans); letter-spacing: 0.32em; text-transform: uppercase; text-align: center; color: var(--sda-night-ink); }
.sda-line-doors__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.sda-line-door { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: clamp(320px, 50svh, 480px); color: var(--sda-night-ink); text-align: center; text-decoration: none; }
.sda-line-door__bg, .sda-line-door__bloom { position: absolute; inset: 0; }
.sda-line-door__bg { z-index: -3; }
.sda-line-door__bloom { z-index: -2; opacity: 0; transition: opacity 1800ms var(--sda-ease-settle); }
.sda-line-door.is-developed .sda-line-door__bloom { opacity: 1; }
.sda-line-door__bg img, .sda-line-door__bloom img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sda-line-door::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 55% at 50% 50%, color-mix(in srgb, var(--sda-vignette) 58%, transparent), color-mix(in srgb, var(--sda-vignette) 18%, transparent)); }
.sda-line-door__copy { display: flex; flex-direction: column; align-items: center; gap: var(--sda-space-3); padding: var(--sda-space-5) var(--sda-space-4); max-width: 30rem; min-width: 0; text-shadow: 0 1px 18px rgba(26, 16, 6, 0.7); }
.sda-line-door__name { font: 400 clamp(1.3rem, 0.9rem + 1.5vw, 2.1rem)/1.25 var(--sda-sans); letter-spacing: 0.24em; padding-left: 0.24em; text-transform: uppercase; overflow-wrap: anywhere; }
.sda-line-door__tagline { font: var(--sda-small)/1.5 var(--sda-serif); }
.sda-line-door__go { color: var(--sda-night-ink); text-shadow: none; background: color-mix(in srgb, var(--sda-vignette) 35%, transparent); }
.sda-line-door:hover .sda-line-door__go, .sda-line-door:focus-visible .sda-line-door__go { background: var(--sda-ink); color: var(--sda-paper); border-color: var(--sda-ink); }

@media (prefers-reduced-motion: reduce) {
  .sda-line-hero__bloom, .sda-line-door__bloom { transition: none; }
  .sda-line-hero.is-developed .sda-line-hero__ground { animation: none; transform: none; }
}

@media (max-width: 760px) {
  /* The figure opens up so its caption can follow the label: photograph,
     then the label over its lower edge, then the caption. */
  .sda-line-why { flex-direction: column; align-items: stretch; }
  .sda-line-why__plate { display: contents; }
  .sda-line-why__plate > a, .sda-line-why__plate > picture { order: 1; }
  .sda-line-why__plate img { width: 100%; max-height: none; }
  .sda-line-label { order: 2; width: calc(100% - 1.5rem); margin: -3rem auto 0; padding: var(--sda-space-4); }
  .sda-line-why--solo .sda-line-label { margin-top: 0; }
  .sda-line-why__plate figcaption { order: 3; margin: var(--sda-space-3) 0.75rem 0; }
  .sda-line-hero__foot { flex-direction: column; justify-content: flex-end; gap: 0; text-align: center; }
  .sda-line-pieces__foot { flex-direction: column; align-items: center; }
  .sda-line-page .sda-btn { min-height: var(--sda-btn-h); }
  .sda-footer [data-testid="footer-collection-links"] a { display: inline-flex; align-items: center; min-height: var(--sda-btn-h); }
}