/* Optional depth and soft photo edges; readable content remains flat. */
.d3-demo .ad-hero { isolation: isolate; background: #fbf5ea; }
.d3-demo .ad-hero-inner { z-index: 2; pointer-events: none; }
.d3-demo .ad-hero-copy { pointer-events: auto; }
.d3-demo .ad-purposes { padding-top: 28px; }
@media (min-width: 1200px) {
  .d3-demo .ad-hero { min-height: 580px; }
}
@media (min-width: 1440px) {
  .d3-demo .ad-hero { min-height: 620px; }
}
.d3-demo .d3-visual {
  position: absolute; top: 30px; right: 32px; bottom: 30px;
  width: calc(50% - 32px); z-index: 1; perspective: 1200px;
  perspective-origin: 50% 48%; transform-style: preserve-3d;
}
.d3-demo .d3-visual::before {
  content: ""; position: absolute; inset: 58% 4% 0; pointer-events: none;
  background-image: linear-gradient(#b57d4220 1px, transparent 1px), linear-gradient(90deg, #b57d4220 1px, transparent 1px);
  background-size: 32px 32px; transform: rotateX(64deg) translateZ(-55px);
  border-radius: 40%; opacity: .25;
}
.d3-demo .d3-photo-card {
  position: absolute; inset: 16px 20px 28px 16px; transform-style: preserve-3d;
  transform: translateY(var(--d3-photo-y, 0px)) rotateX(calc(1deg + var(--d3-tilt-x, 0deg))) rotateY(calc(-3deg + var(--d3-tilt-y, 0deg)));
  transition: transform 280ms cubic-bezier(.2,.7,.3,1);
}
.d3-demo .d3-photo-back {
  position: absolute; inset: 0; border-radius: 24px;
  background: radial-gradient(ellipse, #d9bc9233, #fbf5ea00 72%);
  transform: translate3d(11px, 12px, -22px);
}
.d3-demo .ad-hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  border-radius: 24px; border: 0; background: #fbf5ea;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 97%, transparent), linear-gradient(transparent, #000 5%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 97%, transparent), linear-gradient(transparent, #000 5%, #000 94%, transparent);
  mask-composite: intersect;
}
.d3-demo .ad-hero-media::after { display: none; }
.d3-demo .ad-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 20%; }
.d3-demo .ad-story-sub { object-position: 46% 35%; }
.d3-demo .d3-corner {
  position: absolute; top: 22px; right: 4px; width: 44px; height: 44px;
  border: 1px solid #c49456; border-radius: 10px; pointer-events: none;
  background: linear-gradient(135deg, #f0d39e 15%, #c18c45 95%);
  transform: translateZ(38px) rotateX(12deg) rotateY(-18deg) rotateZ(12deg);
  box-shadow: 7px 9px 0 #bb8a4928;
}
.d3-demo .ad-card, .d3-demo .ad-article {
  box-shadow: 0 4px 0 #e1d0b8, 0 12px 22px #5639160d;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.d3-demo .ad-story-main, .d3-demo .ad-story-sub { box-shadow: 8px 10px 0 #cdb38d66, 0 14px 24px #4e321512; }
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .d3-demo .ad-card:hover, .d3-demo .ad-card:focus-within,
  .d3-demo .ad-article:hover, .d3-demo .ad-article:focus-within {
    transform: translateY(-4px); box-shadow: 0 8px 0 #dcc5a6, 0 18px 26px #56391614;
  }
}
@media (max-width: 1199px) {
  .d3-demo .ad-hero { display: block; min-height: 0; }
  .d3-demo .d3-visual {
    position: relative; inset: auto; width: calc(100% - 32px);
    height: clamp(240px, 52vw, 570px); margin: 0 auto;
  }
  .d3-demo .ad-hero-inner { width: auto; max-width: none; margin: 0; padding: 24px 6% 20px; }
  .d3-demo .ad-hero-copy { max-width: none; }
  .d3-demo .d3-photo-card { inset: 16px 32px 28px 24px; transform: none; transition: none; }
  .d3-demo .d3-corner { display: none; }
}
@media (max-width: 599px) {
  .d3-demo .d3-photo-card { inset: 12px 12px 24px; }
  .d3-demo .d3-photo-back, .d3-demo .ad-hero-media { border-radius: 18px; }
  .d3-demo .d3-corner { display: none; }
}
@media (max-width: 767px) {
  .d3-demo .ad-purposes { padding-top: 20px; }
  .d3-demo .ad-story-photos { padding-bottom: 0; }
  .d3-demo .ad-story-sub {
    display: block; position: relative; right: auto; bottom: auto;
    width: 46%; margin: -44px 0 0 auto; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 12px; border: 4px solid var(--ad-cream-deep);
  }
}
@media (hover: none), (pointer: coarse) {
  .d3-demo .d3-photo-card { transform: none; }
  .d3-demo .d3-photo-card { transition: none; }
  .d3-demo .ad-card:hover, .d3-demo .ad-article:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .d3-demo .d3-photo-card { transform: none; }
  .d3-demo *, .d3-demo *::before, .d3-demo *::after { animation: none !important; transition: none !important; }
  .d3-demo .ad-card:hover, .d3-demo .ad-card:focus-within,
  .d3-demo .ad-article:hover, .d3-demo .ad-article:focus-within { transform: none; }
}
@supports not (transform-style: preserve-3d) {
  .d3-demo .d3-photo-back, .d3-demo .d3-corner, .d3-demo .d3-visual::before { display: none; }
  .d3-demo .d3-photo-card { transform: none; }
}