/* Product media lives inside its own frame. Text and controls never overlay it. */
.db-catalog-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: end;
  gap: 28px;
  padding: clamp(40px, 8vw, 110px) 0 clamp(40px, 6vw, 80px);
}

.db-catalog-intro h1 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 7.5rem);
  font-weight: 720;
  letter-spacing: -.07em;
  line-height: .97;
  text-wrap: balance;
}

.db-catalog-intro > p {
  max-width: 33ch;
  margin: 0 0 .2em;
  font-size: clamp(1rem, 1.65vw, 1.23rem);
  line-height: 1.55;
}

.db-catalog {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(30px, 4.5vw, 64px) clamp(18px, 3vw, 38px);
}

.db-catalog-project {
  min-width: 0;
  color: #21232c;
}

.db-catalog-project--aiprice {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  align-items: center;
  background: #151d2e;
  color: #f9f8f3;
  padding: clamp(26px, 5vw, 64px);
  gap: clamp(24px, 4vw, 48px);
  border-radius: 10px;
}

.db-catalog-copy { padding: 24px 0 0; }
.db-catalog-project--aiprice .db-catalog-copy { padding: 0; }
.db-catalog-type {
  color: #555460;
  margin: 0 0 8px;
  font-size: .9rem;
  font-weight: 630;
  line-height: 1.3;
}
.db-catalog-project--aiprice .db-catalog-type { color: #dceaaa; }
.db-catalog-name {
  margin: 0;
  font-size: clamp(2.3rem, 4.6vw, 4.4rem);
  font-weight: 720;
  letter-spacing: -.06em;
  line-height: 1.04;
}
.db-catalog-description {
  max-width: 42ch;
  margin: 14px 0 20px;
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  line-height: 1.58;
}
.db-catalog-project--aiprice .db-catalog-description { color: #e1e5ec; }

.db-catalog-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: inherit;
  font-weight: 680;
  text-underline-offset: 5px;
}
.db-catalog-link svg {
  inline-size: 19px;
  flex: none;
  transition: translate 240ms cubic-bezier(.22, 1, .36, 1);
}
.db-catalog-link:hover { text-decoration: underline; }
.db-catalog-link:focus-visible { outline-offset: 5px; }
.db-catalog-link:is(:hover, :focus-visible) svg { translate: 4px 0; }

.db-catalog-media { min-width: 0; margin: 0; }
.db-catalog-media figcaption {
  margin-top: 9px;
  font-size: .83rem;
  line-height: 1.42;
  color: #555460;
}
.db-catalog-project--aiprice .db-catalog-media figcaption { color: #d6dce8; }
.db-catalog-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 8px;
}
.db-catalog-stage img { display: block; max-width: 100%; }
.db-catalog-stage--aiprice {
  background: #0b1b26;
  box-shadow: 0 18px 42px #070b1566;
  outline: 1px solid #ffffff23;
}
.db-catalog-stage--aiprice img { width: 100%; height: auto; }

.db-catalog-stage--savault,
.db-catalog-stage--hometuck {
  min-height: clamp(214px, 28vw, 365px);
}
.db-catalog-stage--savault {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9e9f9;
  padding: clamp(16px, 2.2vw, 30px);
}
.db-catalog-savault-icon {
  width: clamp(74px, 13vw, 170px);
  height: auto;
  position: relative;
  z-index: 1;
  rotate: -8deg;
  translate: 11% 18%;
  filter: drop-shadow(0 14px 14px #32377347);
}
.db-catalog-file {
  width: min(60%, 17rem);
  flex-shrink: 1;
  padding: clamp(13px, 1.7vw, 21px);
  border: 1px solid #bcbfd7;
  background: #fbfbff;
  color: #292b43;
  border-radius: 6px;
  box-shadow: 0 12px 28px #28295821;
  rotate: 4deg;
  translate: -4% -8%;
}
.db-catalog-file-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: clamp(9px, 1.5vw, 17px);
  padding-bottom: 9px;
  border-bottom: 1px solid #d8daeb;
  font-size: clamp(.68rem, 1.15vw, .9rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.db-catalog-file-top span {
  padding: 2px 4px;
  background: #e6e6f5;
  color: #45446b;
  font-size: .62rem;
}
.db-catalog-file-meta,
.db-catalog-file-title {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(.66rem, 1.1vw, .86rem);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.db-catalog-file-meta { color: #565672; }
.db-catalog-file-title { font-weight: 700; margin-top: 7px; }

.db-catalog-stage--hometuck { background: #b6a58b; }
.db-catalog-home-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 54%;
}
.db-catalog-home-ui {
  position: absolute;
  right: clamp(12px, 2vw, 26px);
  bottom: clamp(12px, 2vw, 26px);
  width: min(60%, 25rem);
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: #fffaf3;
  color: #27241f;
  border: 1px solid #ffffffbb;
  border-radius: 8px;
  box-shadow: 0 12px 28px #332c2655;
}
.db-catalog-home-ui-label, .db-catalog-home-ui small { color: #5c554b; font-size: .75rem; }
.db-catalog-home-record { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .88rem; }
.db-catalog-home-record span { white-space: nowrap; font-weight: 600; }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .db-catalog-stage--aiprice img,
  .db-catalog-home-scene,
  .db-catalog-home-ui,
  .db-catalog-savault-icon,
  .db-catalog-file {
    transition: transform 650ms cubic-bezier(.2, .75, .25, 1);
  }
  .db-catalog-project:is(:hover, :focus-within) .db-catalog-stage--aiprice img,
  .db-catalog-project:is(:hover, :focus-within) .db-catalog-home-scene {
    transform: scale(1.028);
  }
  .db-catalog-project:is(:hover, :focus-within) .db-catalog-home-ui {
    transform: translateY(-6px);
  }
  .db-catalog-project:is(:hover, :focus-within) .db-catalog-savault-icon {
    transform: translateY(-6px) rotate(3deg);
  }
  .db-catalog-project:is(:hover, :focus-within) .db-catalog-file {
    transform: translateY(-3px) rotate(-3deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .db-catalog-stage.catalog-in-view {
    animation: db-catalog-media-enter 720ms cubic-bezier(.22, 1, .36, 1) both;
  }
  #products-view:not([hidden]) .db-catalog-intro,
  #products-view:not([hidden]) .db-catalog-project--aiprice {
    animation: db-catalog-settle 600ms cubic-bezier(.22, 1, .36, 1) both;
  }
  #products-view:not([hidden]) .db-catalog-project--aiprice { animation-delay: 60ms; }
  @keyframes db-catalog-settle {
    from { opacity: .6; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes db-catalog-media-enter {
    from { opacity: .58; clip-path: inset(7% 0 0 0); }
    to { opacity: 1; clip-path: inset(0); }
  }
}

@media (max-width: 720px) {
  .db-catalog,
  .db-catalog-intro,
  .db-catalog-project--aiprice {
    grid-template-columns: minmax(0, 1fr);
  }
  .db-catalog-intro { gap: 16px; }
  .db-catalog-project--aiprice { padding: clamp(16px, 4vw, 26px); gap: 18px; }
  .db-catalog-copy { padding-top: 19px; }
  .db-catalog-home-ui { width: min(72%, 23rem); }
  .db-catalog-stage--savault,
  .db-catalog-stage--hometuck {
    min-height: clamp(195px, 55vw, 320px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .db-catalog-link svg { transition: none; }
  .db-catalog-link:is(:hover, :focus-visible) svg { translate: none; }
}