/* Birthday and classroom pages: readable preparation notes and optional flourishes. */
.occasion-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.occasion-intro > * { min-width: 0; }
.occasion-intro .prose { max-width: 42em; }
.occasion-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.occasion-actions .btn { max-width: 100%; }
.occasion-section .prose a.btn-dusk { color: #fff; }
.occasion-note { padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: var(--lilac-2); }
.occasion-note h3 { margin-top: 12px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.12; letter-spacing: -.025em; }
.occasion-checklist { display: grid; gap: 12px; margin: 22px 0; padding: 0; list-style: none; color: var(--ink-2); }
.occasion-checklist li { position: relative; padding-left: 24px; }
.occasion-checklist li::before { content: ''; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--violet); }
.occasion-mark { position: relative; display: inline-block; isolation: isolate; }
.occasion-mark::after { content: ''; position: absolute; z-index: -1; inset: auto -.02em .03em; height: .19em; border-radius: 50%; background: var(--peach); transform-origin: left; }
.js .occasion-section[data-story] .occasion-mark::after { transform: scaleX(.15); }
.js .occasion-section.is-in .occasion-mark::after { transform: scaleX(1); transition: transform .65s cubic-bezier(.2, .7, .3, 1); }
.occasion-price-note { margin-top: 22px; }
.occasion-price-note + .fine { margin-top: 8px; }
.occasion-section .price-card { transition: border-color .2s, box-shadow .2s; }
.occasion-section .price-card:focus-within { border-color: var(--violet); box-shadow: 0 20px 40px -30px rgba(106, 79, 214, .45); }
.occasion-cast { margin-top: 26px; }
.occasion-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.occasion-links .lede { max-width: 36em; }
.occasion-links .occasion-actions { margin-top: 0; }
@media (min-width: 761px) {
  .occasion-intro { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; }
}
@media (min-width: 1100px) {
  .occasion-intro { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .occasion-section[data-story] .occasion-mark::after { transform: none; transition: none; }
  .occasion-section .price-card { transition: none; }
}