/* Homepage "Digital thank-you cards" picture only (#home-ty.tys-host). */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
.tys-host { display: block !important; }
.tys-host > * { transform: none !important; }
.tys-host > .tys { display: block !important; }
.tys { position: relative; width: min(100%, 440px); margin-inline: auto; aspect-ratio: 11 / 12; }
.tys-env { position: absolute; left: 4%; top: 6%; width: 78%; height: 80%; transform: rotate(-9deg); border-radius: 6px;
  background: linear-gradient(135deg, #C9A57A 0%, #B98F62 55%, #A97E52 100%); box-shadow: 0 18px 40px rgba(60, 40, 20, .25); }
.tys-env::before { content: ''; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(160deg, transparent 49.5%, rgba(0,0,0,.08) 50%, transparent 51%), linear-gradient(20deg, transparent 49.5%, rgba(0,0,0,.08) 50%, transparent 51%); }
.tys-seal { position: absolute; left: -16px; bottom: 18%; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #D8B266, #A9822F 60%, #8A6722); box-shadow: 0 4px 10px rgba(0,0,0,.3), inset 0 0 0 4px rgba(255,255,255,.12); }
.tys-seal svg { width: 34px; height: 34px; }
.tys-card { position: absolute; right: 2%; top: 0; width: 76%; transform: rotate(3deg); background: #FFFDF8; border-radius: 4px; padding: 12px;
  box-shadow: 0 24px 50px rgba(60, 40, 20, .28), 0 2px 6px rgba(0,0,0,.08); }
.tys-frame { position: relative; border: 2px solid #C9A24A; outline: 1px solid #E3C985; outline-offset: -7px; padding: 14px 14px 18px; display: grid; gap: 10px; }
.tys-photo { aspect-ratio: 5 / 4; overflow: hidden; border: 2px solid #C9A24A; }
.tys-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; display: block; }
.tys-leaves { position: absolute; width: 50%; pointer-events: none; }
.tys-br { width: 38%; }
.tys-tl { left: -16px; top: -20px; transform: scaleY(-1) rotate(4deg); }
.tys-br { right: -26px; bottom: -30px; transform: scaleX(-1) rotate(180deg) scaleY(-1); }
.tys-text { display: grid; justify-items: center; text-align: center; gap: 2px; position: relative; z-index: 2; padding-bottom: 6px; }
.tys-ty { font-family: 'Great Vibes', 'Cormorant Garamond', cursive; font-size: clamp(2.6rem, 6vw, 3.4rem); line-height: 1.05;
  background: linear-gradient(100deg, #A8782A 0%, #E9C77B 30%, #B8892B 55%, #F0D58A 75%, #A8782A 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(120, 85, 20, .25)); }
.tys-heart { width: 14px; height: 13px; margin: 2px 0 4px; }
.tys-names { font-family: var(--font-display, 'Cormorant Garamond', serif); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: clamp(.95rem, 2.2vw, 1.1rem); color: #2B2B2B; }
.tys-date { font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: #555; }
.tys-bloom { position: absolute; width: 120px; height: 90px; pointer-events: none;
  background-image: radial-gradient(circle, #fff 0 3px, transparent 3.5px), radial-gradient(circle, #FFF8EA 0 2.5px, transparent 3px), radial-gradient(circle, #E9DDC6 0 1.5px, transparent 2px);
  background-size: 18px 16px, 13px 12px, 9px 10px; background-position: 0 0, 6px 5px, 3px 8px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 70%); mask-image: radial-gradient(ellipse at center, #000 45%, transparent 70%); }
.tys-b1 { left: -10px; top: -14px; }
.tys-b2 { right: -18px; bottom: 2%; transform: rotate(20deg); }
@media (max-width: 760px) {
  .tys-host { overflow-x: clip; padding-block: 14px; }
  .tys { width: min(100%, 360px); }
  .tys-b2 { right: 0; }
  .tys-br { right: -8px; }
}