/* Flowing color, continuous cards, and portraits that belong to the page. */
body {
  background: linear-gradient(165deg, #fbf2e9 0%, #eee2f3 28%, #e4eeea 56%, #f2dedc 79%, #f9eee3 100%);
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 16% 15%, #bba0d270, transparent 48%),
    radial-gradient(ellipse at 86% 35%, #f3c7a976, transparent 44%),
    radial-gradient(ellipse at 22% 78%, #a6cabd80, transparent 46%),
    radial-gradient(ellipse at 84% 90%, #d4b4d16b, transparent 48%);
  animation: color-flow 24s ease-in-out infinite alternate;
}
.textured .paper-noise { opacity: .035; }
.page-waves { display: none; }

.link-card:not(.wanted) {
  display: block;
  min-height: 265px;
  background: linear-gradient(115deg, #eadbeb 0%, #f9f1ed 65%, #fff8ef 100%);
}
.link-card.podcast { background: linear-gradient(120deg, #d2e3da, #f0e6f1 62%, #f7edf3); }
.link-card.embrace { background: linear-gradient(110deg, #e8cfac, #fbefdd 60%, #f6e8dc); }
.link-card.about { background: linear-gradient(120deg, #d6e2d5, #edf1e7 58%, #faf3e9); }
.link-card.face { background: linear-gradient(110deg, #dfd3e7, #f7e9e5 58%, #fff2e6); }
.link-card.coaching::before,
.link-card.about::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  background: url('assets/paper-backdrop.png') left center / cover no-repeat;
  opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, #000 5%, #0009 35%, transparent 86%);
  mask-image: linear-gradient(90deg, #000 5%, #0009 35%, transparent 86%);
  animation: paper-sway 10s ease-in-out infinite alternate;
}
.link-card .card-visual {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 47%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 76%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 76%, transparent 100%);
}
.card-visual.lavender::before,
.card-visual.sage::before { display: none; }
.card-visual > .portrait {
  width: 330px;
  left: 40%;
  bottom: -9px;
}
.card-copy,
.face .card-copy {
  position: relative;
  z-index: 2;
  width: 61%;
  margin-left: 39%;
  padding: 27px 24px 27px 12px;
}
.card-copy h2 { text-wrap: pretty; }
.link-card .podcast-image {
  width: 48%;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}
.podcast-cover {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 15%, #000 89%, transparent);
  mask-image: linear-gradient(0deg, transparent, #000 15%, #000 89%, transparent);
}
.podcast-cover > img {
  position: absolute;
  width: 400px;
  max-width: none;
  height: auto;
  top: -12px;
  left: -210px;
  transform: none;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 91%);
  mask-image: linear-gradient(90deg, #000 78%, transparent 91%);
}
.link-card .embrace-image {
  width: 52%;
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 90%);
  mask-image: linear-gradient(90deg, #000 50%, transparent 90%);
}
.embrace-image > img {
  object-fit: cover;
  object-position: 44% center;
}
.link-card .book-image {
  width: 39%;
  overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
  mask-image: linear-gradient(90deg, #000 60%, transparent);
}
.face .card-visual img {
  width: 84%;
  height: 88%;
  margin: 5% auto 0;
  object-fit: contain;
  padding: 0;
  transform: rotate(-6deg);
  filter: drop-shadow(3px 7px 8px #55305f26);
}
.text-link {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 4px 3px;
  color: #51235e;
  font-weight: 600;
}
.text-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 35% -5px 0;
  border-radius: 3px 6px 4px 3px;
  background: #c7a2dd73;
  transform: skewX(-7deg);
  transition: background .25s, inset .25s;
}
.link-card:hover .text-link::before,
.link-card:focus-visible .text-link::before { background: #bb90d399; inset-block-start: 12%; }
.wanted-cta {
  background: #e2ccec;
  color: #41204e;
  border-radius: 7px;
  padding: 13px 20px;
}
.link-card:focus-visible { outline-color: #86549d; }

/* These elements use the untouched supplied photographs with separate masks. */
.link-card .full-body-photo,
.link-card .about-photo {
  width: 44%;
  -webkit-mask-image: none;
  mask-image: none;
}
.link-card .about-photo {
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
}
.podcast .card-copy,
.about .card-copy { width: 58%; margin-left: 42%; }
.card-visual > img.original-cutout {
  position: absolute;
  max-width: none;
  height: auto;
  padding: 0;
  object-fit: initial;
  transform: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.card-visual > .podcast-portrait {
  width: 235px;
  left: calc(50% - 128px);
  bottom: -71px;
  -webkit-mask-image: url('assets/podcast-mask.svg');
  mask-image: url('assets/podcast-mask.svg');
}
.card-visual > .about-portrait {
  width: 190px;
  left: calc(50% - 98px);
  bottom: -80px;
  -webkit-mask-image: url('assets/about-mask.svg');
  mask-image: url('assets/about-mask.svg');
}
.link-card .book-image {
  -webkit-mask-image: none;
  mask-image: none;
}
.face .card-visual img {
  position: absolute;
  top: 0;
  left: -14%;
  width: 135%;
  max-width: none;
  height: 100%;
  margin: 0;
  transform: rotate(-3deg);
}

.sheet-window {
  display: block;
  background: linear-gradient(135deg, #ece0f1 0%, #faf3ed 53%, #eef0e4 100%);
}
.sheet-photo {
  position: absolute;
  inset: 0 auto 0 0;
  width: 52%;
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: linear-gradient(90deg, #000 53%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 53%, transparent 100%);
}
.sheet-photo::before {
  background-position: left center;
  opacity: .55;
}
.sheet-photo > .portrait { left: 42%; }
.sheet-content {
  width: 59%;
  margin-left: 41%;
  padding-bottom: 80px;
}
.sheet-heading h2 br { display: block; }
.sheet-waves { z-index: 1; opacity: .8; }
.sheet-waves .wave-heart { display: none; }
.submit { gap: 0; }
@keyframes color-flow {
  from { transform: translate(-2%, -1%) scale(1); }
  to { transform: translate(3%, 4%) scale(1.08); }
}

@media (max-width: 719px) {
  .link-card:not(.wanted) { min-height: 265px; }
  .card-copy,
  .face .card-copy {
    width: 61%;
    margin-left: 39%;
    padding: 24px 19px 27px 12px;
  }
  .card-visual > .portrait { width: 290px; left: 40%; bottom: -7px; }
  .card-copy h2,
  .face .card-copy h2 { font-size: 29px; }
  .card-copy p,
  .face .card-copy p { font-size: 15px; }
  .link-card .podcast-image { width: 47%; }
  .podcast-cover > img { width: 370px; left: -200px; }
  .sheet-window { background: linear-gradient(135deg, #eee0f0 0%, #faf3ed 51%, #edf1e8 100%); }
  .sheet-photo { display: none; }
  .sheet-content { width: 100%; margin-left: 0; padding: 29px 24px 70px; }
  .sheet-heading {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 176px;
    padding: 0 0 10px 137px;
    gap: 0;
  }
  .sheet-heading::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -34px -24px -18px;
    background: url('assets/paper-backdrop.png') left center / cover no-repeat;
    opacity: .48;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000a 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000a 45%, transparent 100%);
  }
  .mobile-photo {
    position: absolute;
    left: -24px;
    top: -17px;
    bottom: -10px;
    width: 166px;
    height: auto;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 65%, transparent 100%), linear-gradient(0deg, transparent, #000 27%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 0%, #000 65%, transparent 100%), linear-gradient(0deg, transparent, #000 27%);
    mask-composite: intersect;
  }
  .mobile-photo::before { display: none; }
  .mobile-photo .portrait { width: 300px; left: 43%; bottom: 0; }
  .sheet-heading > div:last-child { position: relative; z-index: 1; }
  .sheet-heading h2 { font-size: clamp(24px, 6.55vw, 28px); line-height: 1.15; }
  .sheet-heading p { font-size: 15px; }
  form { margin-top: 15px; }
  .card-visual > .podcast-portrait { width: 220px; left: calc(50% - 119px); bottom: -66px; }
  .card-visual > .about-portrait { width: 174px; left: calc(50% - 90px); bottom: -72px; }
}
@media (max-width: 360px) {
  .card-copy,
  .face .card-copy { width: 63%; margin-left: 37%; padding: 22px 14px 24px 12px; }
  .card-copy h2,
  .face .card-copy h2 { font-size: 26px; }
  .card-copy p,
  .face .card-copy p { font-size: 14px; }
  .card-visual > .portrait { width: 270px; left: 42%; }
  .sheet-content { padding-left: 19px; padding-right: 19px; }
  .sheet-heading { padding-left: 121px; min-height: 185px; }
  .mobile-photo { left: -19px; width: 146px; }
  .mobile-photo .portrait { width: 280px; }
  .sheet-heading h2 { font-size: 24px; }
  .sheet-heading p { font-size: 14px; }
  .card-visual > .podcast-portrait { width: 204px; left: calc(50% - 111px); bottom: -61px; }
  .card-visual > .about-portrait { width: 153px; left: calc(50% - 79px); bottom: -63px; }
  .podcast .card-copy,
  .about .card-copy { width: 58%; margin-left: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  body::before,
  .link-card::before { animation: none; }
}

/* Uploaded replacement art displays whole; original portraits retain their masks. */
.replacement-art{mask-image:none!important;-webkit-mask-image:none!important;object-fit:contain!important;object-position:center!important;width:100%!important;height:100%!important;inset:0!important}
.private-preview-label{position:sticky;top:0;padding:10px 16px;background:#4c315d;color:#fff;text-align:center;z-index:5;font:14px Arial,sans-serif}.private-preview-label a{color:#fff}
