.occasion-art {
  position: absolute;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.occasion-illustration { display: block; width: 100%; height: 100%; }
.template-art .occasion-art { width: 58px; height: 58px; top: 13px; left: calc(50% - 29px); }
.template-art:has(.occasion-art) .mini-heading { margin-top: 52px; font-size: clamp(1.1rem, 15cqi, 2rem); }
.template-art:has(.occasion-art) .mini-label { max-width: 100%; line-height: 1.7; }
.template-art:has(.occasion-art)::after { pointer-events: none; }

.template-art.eid, .letter-card.eid, .print-spread.eid .print-cover {
  background: #173e36;
  color: #f8ecd1;
  --letter-accent: #e5cb8d;
  --letter-muted: #e6d8b7;
}
.template-art.eid::before { content: ''; position: absolute; inset: 9px; border: 1px solid #b6a06d; border-radius: 90px 90px 0 0; }
.template-art.eid .occasion-art { color: #dfc17d; width: 44px; height: 44px; left: calc(50% - 22px); top: 24px; }
.template-art.eid .mini-heading { font-style: italic; }

.template-art.ketupat, .letter-card.ketupat, .print-spread.ketupat .print-cover {
  background: #edf0d9;
  color: #36513b;
  --letter-accent: #456446;
  --letter-muted: #52604a;
}
.template-art.ketupat { align-items: flex-start; text-align: left; }
.template-art.ketupat .occasion-art { left: auto; right: -12px; top: -12px; width: 100px; height: 100px; color: #7a8c56; transform: rotate(12deg); opacity: .65; }
.template-art.ketupat .mini-heading { margin-top: 25px; font-size: clamp(1.25rem, 19cqi, 2.5rem); }
.template-art.ketupat .mini-label { max-width: 85%; text-align: left; }

.template-art.birthday, .letter-card.birthday, .print-spread.birthday .print-cover {
  background: #f4d8c9;
  color: #723b41;
  --letter-accent: #853d4d;
  --letter-muted: #794e4b;
}
.template-art.birthday::before { content: ''; position: absolute; inset: 8px; border: 1px dashed #a36d69; border-radius: 70px 70px 5px 5px; }
.template-art.birthday .occasion-art { width: 54px; height: 54px; left: calc(50% - 27px); top: 15px; }
.template-art.birthday .mini-heading { font-style: italic; font-size: clamp(1.25rem, 18cqi, 2.4rem); }

.template-art.graduation, .letter-card.graduation, .print-spread.graduation .print-cover {
  background: #f4f0e6;
  color: #253c52;
  --letter-accent: #72582b;
  --letter-muted: #526170;
}
.template-art.graduation { background: linear-gradient(#253c52 0 37%, #f4f0e6 37%); }
.template-art.graduation .occasion-art { color: #e1c58d; top: 9px; }
.template-art.graduation .mini-heading { margin-top: 70px; font-size: clamp(1.05rem, 15cqi, 2rem); }
.template-art.graduation .mini-label { border-top: 1px solid #a6916b; padding-top: 8px; }

.template-art.valentine, .letter-card.valentine, .print-spread.valentine .print-cover {
  background: #6c293b;
  color: #fff0e5;
  --letter-accent: #f4c8c2;
  --letter-muted: #f1d7cf;
}
.template-art.valentine { align-items: flex-start; text-align: left; }
.template-art.valentine .occasion-art { width: 115px; height: 115px; left: auto; right: -16px; top: -19px; color: #b46b7a; transform: rotate(16deg); }
.template-art.valentine .mini-heading { margin-top: 36px; font-size: clamp(1.4rem, 21cqi, 2.8rem); font-style: italic; line-height: 1; }
.template-art.valentine .mini-label { text-align: left; }

.template-art.wedding, .letter-card.wedding, .print-spread.wedding .print-cover {
  background: #e8edf0;
  color: #3a5364;
  --letter-accent: #665334;
  --letter-muted: #526371;
}
.template-art.wedding::before { content: ''; position: absolute; inset: 11px; border: 1px solid #a6afb1; border-radius: 100px 100px 0 0; }
.template-art.wedding .occasion-art { color: #7d663a; width: 54px; height: 54px; left: calc(50% - 27px); top: 16px; }
.template-art.wedding .mini-heading { font-style: italic; }

.template-art.thankyou, .letter-card.thankyou, .print-spread.thankyou .print-cover {
  background: #f0dcb2;
  color: #65402c;
  --letter-accent: #835031;
  --letter-muted: #70583e;
}
.template-art.thankyou { align-items: flex-start; text-align: left; }
.template-art.thankyou .occasion-art { width: 92px; height: 125px; left: auto; right: -13px; top: 13px; color: #9e694b; transform: rotate(15deg); opacity: .7; }
.template-art.thankyou .mini-heading { margin-top: 5px; font-style: italic; font-size: clamp(1.6rem, 25cqi, 3rem); line-height: .95; }
.template-art.thankyou .mini-label { max-width: 85%; text-align: left; border-top: 1px solid #ad8b61; padding-top: 10px; }

.template-art.newborn, .letter-card.newborn, .print-spread.newborn .print-cover {
  background: #e5eef1;
  color: #385668;
  --letter-accent: #5b6470;
  --letter-muted: #526673;
}
.template-art.newborn .occasion-art { width: 70px; height: 70px; left: calc(50% - 35px); top: 4px; color: #6c8190; }
.template-art.newborn .mini-heading { font-style: italic; }
.template-art.newborn::before { content: ''; position: absolute; inset: 9px; border: 1px dotted #91a4ac; border-radius: 90px 90px 4px 4px; }

.letter-card:has(> .occasion-art) { padding-top: 143px; }
.letter-card:has(> .occasion-art) .letter-mark { display: none; }
.letter-card > .occasion-art { top: 26px; left: calc(50% - 40px); width: 80px; height: 80px; color: var(--letter-accent); }
.letter-card:has(> .occasion-art) :is(.letter-kicker, h2, .letter-message, .letter-signature, .letter-brand, [data-media-slot]) { position: relative; z-index: 1; }
.letter-card:has(> .occasion-art) h2 { margin-top: 25px; font-size: clamp(2.2rem, 5vw, 3rem); }
.letter-card.eid::before, .letter-card.eid::after { border-color: #b7a16d; border-radius: 180px 180px 0 0; }
.letter-card.eid h2 { font-style: italic; }
.letter-card.ketupat { text-align: left; padding-top: 130px; }
.letter-card.ketupat > .occasion-art { left: auto; right: 15px; top: 15px; width: 125px; height: 125px; opacity: .45; transform: rotate(10deg); }
.letter-card.ketupat :is(.letter-kicker, h2, .letter-signature) { text-align: left; }
.letter-card.ketupat .letter-kicker { max-width: 65%; }
.letter-card.ketupat h2 { font-style: italic; }
.letter-card.birthday::before { border-style: dashed; border-color: #ae7a76; border-radius: 140px 140px 5px 5px; }
.letter-card.birthday::after { display: none; }
.letter-card.birthday h2 { font-style: italic; }
.letter-card.graduation > .occasion-art { top: 0; left: 0; width: 100%; height: 120px; background: #253c52; color: #e1c58d; }
.letter-card.graduation .occasion-illustration { width: 80px; height: 80px; }
.letter-card.graduation::before, .letter-card.graduation::after { border-color: #b4a17d; }
.letter-card.valentine > .occasion-art { left: auto; right: -5px; top: -5px; width: 185px; height: 185px; color: #a15b6b; opacity: .55; transform: rotate(12deg); }
.letter-card.valentine :is(.letter-kicker, h2, .letter-signature) { text-align: left; }
.letter-card.valentine h2 { font-style: italic; }
.letter-card.valentine::before, .letter-card.valentine::after { border-color: #c7969d; }
.letter-card.wedding::before, .letter-card.wedding::after { border-color: #98a9b1; border-radius: 180px 180px 0 0; }
.letter-card.wedding h2 { font-style: italic; }
.letter-card.thankyou { padding-top: 80px; }
.letter-card.thankyou > .occasion-art { left: auto; right: 7px; top: 17px; width: 110px; height: 160px; opacity: .42; }
.letter-card.thankyou :is(.letter-kicker, h2, .letter-signature) { text-align: left; }
.letter-card.thankyou h2 { font-style: italic; }
.letter-card.thankyou::before { border-color: #b49360; }
.letter-card.thankyou::after { display: none; }
.letter-card.newborn::before { border-color: #93a7af; border-radius: 170px 170px 0 0; }
.letter-card.newborn::after { border-color: #bccbd0; border-radius: 160px 160px 0 0; }
.letter-card.newborn h2 { font-style: italic; }

.print-spread .print-cover:has(.occasion-art) .print-flourish { display: none; }
.print-spread .print-cover > .occasion-art { position: relative; top: auto; left: auto; width: 52px; height: 52px; margin-bottom: 12px; }
.print-spread.eid .print-cover::before, .print-spread.wedding .print-cover::before { border-radius: 100px 100px 0 0; }
.print-spread.graduation .print-cover::before { border: 0; border-block: 3px solid #b79c63; }
.print-spread.graduation .print-cover { padding-top: 35%; }
.print-spread.graduation .print-cover > .occasion-art { position: absolute; left: 0; top: 0; width: 100%; height: 30%; margin: 0; background: #253c52; color: #e1c58d; }
.print-spread.graduation .print-cover .occasion-illustration { width: 50px; height: 80%; }
.print-spread.valentine .print-cover h3, .print-spread.thankyou .print-cover h3 { font-style: italic; text-align: left; }
.print-spread.birthday .print-cover::before { border-style: dashed; border-color: #a36d69; }
.print-spread.newborn .print-cover::before { border-style: dotted; border-color: #91a4ac; border-radius: 80px 80px 0 0; }

.studio-app .template-option:disabled { opacity: 1; }
.studio-app .template-option:disabled:hover .template-art { transform: none; }
.studio-app .template-option:disabled[aria-pressed="false"]:hover .template-art { box-shadow: none; }
.studio-app .message-editor { margin-block: 20px; padding: 18px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.studio-app .message-editor .field { margin: 0; }
.studio-app .message-editor textarea { min-height: 190px; }
.studio-app .field-label-row { gap: 12px; flex-wrap: wrap; }
.studio-app [aria-invalid="true"]:is(input, textarea) { border-color: var(--danger); }

.recipient-view[data-template="eid"] .envelope { --env-base: #173e36; --env-front: #235346; --env-fold: #326653; --env-border: #668269; --env-flap-light: #326653; --env-flap-dark: #173e36; }
.recipient-view[data-template="ketupat"] .envelope { --env-base: #c9d2ac; --env-front: #dce2c1; --env-fold: #edf0d9; --env-border: #8b9a6b; --env-flap-light: #edf0d9; --env-flap-dark: #bfc99e; }
.recipient-view[data-template="birthday"] .envelope { --env-base: #d9aaa0; --env-front: #e9c3b7; --env-fold: #f4d8c9; --env-border: #ae7a76; --env-flap-light: #f4d8c9; --env-flap-dark: #d7a39b; --seal: #c59b69; }
.recipient-view[data-template="graduation"] .envelope { --env-base: #203348; --env-front: #2b465e; --env-fold: #385671; --env-border: #6b7f8b; --env-flap-light: #385671; --env-flap-dark: #203348; }
.recipient-view[data-template="valentine"] .envelope { --env-base: #612335; --env-front: #7d3549; --env-fold: #91465b; --env-border: #b67e8b; --env-flap-light: #91465b; --env-flap-dark: #612335; --seal: #d7ad87; }
.recipient-view[data-template="wedding"] .envelope { --env-base: #becbd2; --env-front: #d0dbe0; --env-fold: #e8edf0; --env-border: #8d9fa9; --env-flap-light: #e8edf0; --env-flap-dark: #b7c6cf; }
.recipient-view[data-template="thankyou"] .envelope { --env-base: #d3b47f; --env-front: #e3c794; --env-fold: #f0dcb2; --env-border: #ac8754; --env-flap-light: #f0dcb2; --env-flap-dark: #ccb079; }
.recipient-view[data-template="newborn"] .envelope { --env-base: #c1d4dc; --env-front: #d2e1e7; --env-fold: #e5eef1; --env-border: #90a8b5; --env-flap-light: #e5eef1; --env-flap-dark: #baceD8; }

@media (max-width: 600px) {
  .studio-app .message-editor { padding: 14px; }
  .studio-app .message-editor .field-hint { line-height: 1.8; }
  .letter-card:has(> .occasion-art) h2 { font-size: 2.35rem; }
}