/* Every wedding design, running by — the landing strip (2026-09-25).
   Markup: index.html [data-template-strip]; tiles: public/landing-templates.js.
   Desk copy sits on the blush silk under the envelopes: type on the silk, no
   frosted card. Phone copy sits on the mobile landing paper after the six
   letters. Tiles are matte paper mats, one size, the design shown whole-bleed. */

.tpl-strip {
  --tpl-w: 184px;
  --tpl-gap: 22px;
  --tpl-pad: max(24px, calc((100vw - 1080px) / 2));
  --tpl-mat: #fffcf4;
  --tpl-line: color-mix(in srgb, #1c2618 14%, transparent);
  --tpl-ink: var(--ink, #1c2618);
  --tpl-muted: var(--muted, #4a5344);
  /* Art (4:5) + caption. Reserved before the tiles arrive: no layout shift. */
  --tpl-h: calc(var(--tpl-w) * 1.25 + 12px + 70px);
  position: relative;
  display: block;
}

.tpl-strip--desk {
  margin-top: 88px;
}
.tpl-strip--desk .tpl-head {
  text-align: center;
  margin-bottom: 30px;
}
.band-bouquet .tpl-strip--desk .kicker { color: var(--tpl-muted); text-shadow: none; }
.band-bouquet .tpl-strip--desk h2 { color: var(--tpl-ink); text-shadow: none; margin-bottom: 12px; }
.band-bouquet .tpl-strip--desk .lede {
  max-width: 34em;
  margin: 0 auto;
  color: var(--tpl-muted);
  text-shadow: none;
}

.tpl-viewport {
  height: var(--tpl-h);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 min(8vw, 96px), #000 calc(100% - min(8vw, 96px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 min(8vw, 96px), #000 calc(100% - min(8vw, 96px)), transparent 100%);
}
.tpl-viewport::-webkit-scrollbar { display: none; }
/* Before the tiles arrive: the row of empty mats, same size as the real ones. */
.tpl-viewport:empty::before {
  content: "";
  display: block;
  height: calc(var(--tpl-w) * 1.25 + 12px);
  margin-left: var(--tpl-pad);
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--tpl-mat) 70%, transparent) 0 var(--tpl-w),
    transparent var(--tpl-w) calc(var(--tpl-w) + var(--tpl-gap)));
  border-radius: 14px;
}

.tpl-track {
  display: flex;
  gap: var(--tpl-gap);
  width: max-content;
  padding: 4px var(--tpl-pad) 0;
}
.tpl-set {
  display: flex;
  gap: var(--tpl-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tpl-item { flex: 0 0 var(--tpl-w); width: var(--tpl-w); }

.tpl-tile {
  display: grid;
  gap: 12px;
  color: var(--tpl-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.tpl-art {
  display: block;
  padding: 6px;
  aspect-ratio: 4 / 5;
  box-sizing: content-box;
  width: calc(100% - 12px);
  background: var(--tpl-mat);
  border: 1px solid var(--tpl-line);
  border-radius: 14px;
  box-shadow: 0 18px 30px -22px rgba(16, 12, 10, 0.55), 0 2px 6px -4px rgba(16, 12, 10, 0.25);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 520ms ease;
}
.tpl-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 9px;
  background: color-mix(in srgb, #e4dcc8 55%, var(--tpl-mat));
}
.tpl-meta {
  display: grid;
  gap: 3px;
  padding: 0 4px;
  text-align: left;
}
.tpl-meta small {
  font-family: var(--sans, "DM Sans", sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tpl-muted);
}
.tpl-meta strong {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-size: 21px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) {
  .tpl-tile:hover .tpl-art {
    transform: translateY(-4px);
    box-shadow: 0 26px 36px -24px rgba(16, 12, 10, 0.6), 0 2px 6px -4px rgba(16, 12, 10, 0.25);
  }
}
.tpl-tile:active .tpl-art { transform: scale(0.985); }
.tpl-tile:focus-visible .tpl-art {
  outline: 3px solid #b06a50;
  outline-offset: 3px;
}

.tpl-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 18px;
  padding: 0 24px;
}
.tpl-pause {
  min-width: 88px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid color-mix(in srgb, var(--tpl-ink) 26%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tpl-mat) 38%, transparent);
  color: var(--tpl-ink);
  font: 600 11px/1 var(--sans, "DM Sans", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.tpl-pause:focus-visible,
.tpl-all:focus-visible { outline: 3px solid #b06a50; outline-offset: 3px; }
.tpl-all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 6px;
  color: var(--tpl-ink);
  font: 500 13px/1.2 var(--sans, "DM Sans", sans-serif);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--tpl-ink) 35%, transparent);
  text-underline-offset: 5px;
}

/* Phone and tablet portrait: the mobile landing paper. */
@media (max-width: 1024px) {
  .tpl-strip--phone {
    --tpl-w: 138px;
    --tpl-gap: 14px;
    --tpl-pad: 24px;
    --tpl-h: calc(var(--tpl-w) * 1.25 + 12px + 64px);
    --tpl-ink: #293b2c;
    --tpl-muted: #5b6555;
    padding: 44px 0 34px;
    background: #f7f3e9;
  }
  .tpl-strip--phone .ml-section-heading { padding-bottom: 24px; }
  .tpl-strip--phone .tpl-viewport {
    -webkit-mask-image: none;
    mask-image: none;
    scroll-padding-inline: 24px;
  }
  .tpl-strip--phone .tpl-meta strong { font-size: 19px; }
  .tpl-strip--phone .tpl-foot { justify-content: space-between; margin-top: 14px; }
  .mobile-landing .tpl-strip--phone .tpl-all { font-size: 13px; }
}
@media (min-width: 720px) and (max-width: 1024px) {
  .tpl-strip--phone { --tpl-w: 168px; --tpl-gap: 18px; --tpl-pad: 40px; }
  .tpl-strip--phone .ml-section-heading { padding-inline: 40px; }
  .tpl-strip--phone .tpl-foot { padding-inline: 40px; }
}

/* No drift under reduced motion: a still, swipeable row with no loop copy and
   nothing to pause. */
@media (prefers-reduced-motion: reduce) {
  .tpl-set--copy { display: none; }
  .tpl-pause { display: none; }
  .tpl-art { transition: none; }
}

/* /library?design=<letter> from a phone tile: the named letter is marked on
   the shelf, and it (or the card editor) is scrolled to with a little air
   above it (landing-templates.js pickLibraryDesign). */
#card-editor,
.shelf-card.is-picked { scroll-margin-top: 20px; }
.shelf-card.is-picked {
  outline: 2px solid #b06a50;
  outline-offset: 8px;
  border-radius: 20px;
}