.occasion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.occasion-card{display:block;text-decoration:none}
.occasion-card img{display:block;width:100%;aspect-ratio:1.2;object-fit:cover}
.occasion-card h3{font-size:clamp(2rem,4vw,3.15rem);margin:.65rem 0 .4rem}
.occasion-card span{text-decoration:underline;text-underline-offset:.25em}
.occasion-page{--accent:#942943;--sheet:#fff0e8;background:var(--sheet)}
.occasion-page[data-occasion=church]{--accent:#304433;--sheet:#f2ecdb}
.occasion-page[data-occasion=graduation]{--accent:#26344a;--sheet:#e8edf2}
.occasion-page :is(.bar,footer,.button){background:var(--accent);color:#fff}
.occasion-hero{display:grid;grid-template-columns:1fr;min-height:80svh}
.occasion-art{overflow:hidden;min-height:260px;position:relative}
.occasion-art img{position:absolute;width:100%;height:100%;object-fit:cover}
.occasion-copy{padding:clamp(2rem,7vw,6rem);align-self:center;color:var(--accent)}
.occasion-copy h1{font-size:clamp(3.5rem,9vw,7rem);line-height:.94;overflow-wrap:anywhere;margin:.15em 0 .35em}
.occasion-copy #occasion-heading{margin-top:1.2rem}
.occasion-edit{display:inline-flex;min-height:44px;align-items:center;margin-left:.8rem;text-underline-offset:.2em}
.occasion-details{scroll-margin-top:1.2rem}
.occasion-details p{white-space:pre-line;max-width:54ch}
.occasion-details h3{font-size:2.1rem;margin:1.6rem 0 .8rem}
#occasion-programme{padding-inline-start:1.2rem}
[data-occasion=birthday] .occasion-hero{text-align:center}
[data-occasion=birthday] .occasion-art img{object-position:center 58%;transition:transform 1s ease,filter 1s ease}
[data-occasion=birthday].occasion-open .occasion-art img{transform:scale(1.09);filter:brightness(1.14)}
[data-occasion=church] .occasion-copy{border-block:1px solid #77846a}
[data-occasion=graduation] .occasion-hero{background:#26344a}
[data-occasion=graduation] .occasion-copy{color:#fff}
[data-occasion=graduation] .occasion-copy h1{font-family:var(--sans);font-weight:700;letter-spacing:-.065em}
[data-occasion=graduation] .occasion-copy .button{background:#e8edf2;color:#26344a}
[data-occasion=graduation] .occasion-art img{object-position:center 38%}
@media(min-width:740px){
  .occasion-hero{grid-template-columns:1fr 1fr}
  [data-occasion=birthday] .occasion-hero{grid-template-columns:1fr;grid-template-rows:minmax(360px,62svh) auto}
  [data-occasion=church] .occasion-art{order:2}
  [data-occasion=graduation] .occasion-hero{grid-template-columns:1.18fr .82fr}
}
@media(max-width:700px){.occasion-grid{grid-template-columns:1fr}.occasion-card img{aspect-ratio:1.65}}
@media(prefers-reduced-motion:reduce){.occasion-art img{transition:none!important}}

/* Heirloom is read in chapters. Porcelain opens as a ribbon-bound folio. */
.chapter-controls{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem clamp(.8rem,5vw,3rem);background:#3e1724;color:#fff7eb}
.chapter-controls button{min-height:44px;padding:.45rem .85rem;border:1px solid #cda59e;background:transparent;color:inherit}
.chapter-controls button:disabled{opacity:.5;cursor:default}
.chapter-controls span{font:600 clamp(1rem,3vw,1.55rem) var(--serif);text-align:center}
[data-design=heirloom] :is(.story,.schedule,.rsvp){min-height:65svh;scroll-margin-top:4.5rem}
[data-design=heirloom] .revealed-stationery{scroll-margin-top:4rem}
.invitation-page[data-design=heirloom] .envelope-case{width:min(90vw,480px,78svh);aspect-ratio:1.1}
.invitation-page[data-design=blue-note] .envelope-case{width:min(83vw,400px,41svh);aspect-ratio:.71}
.invitation-page[data-design=blue-note] :is(.envelope-flap,.envelope-pocket){display:none}
.invitation-page[data-design=blue-note] .envelope-door{display:block;inset:0 auto 0 0;width:50%;z-index:4;background-color:#e9dfc7;border:1px solid #aa9c7e;transform-origin:left;transition:transform .76s ease .35s}
.invitation-page[data-design=blue-note] .right-door{left:50%;transform-origin:right}
.invitation-page[data-design=blue-note] .is-open .left-door{transform:rotateY(-108deg)}
.invitation-page[data-design=blue-note] .is-open .right-door{transform:rotateY(108deg)}
.invitation-page[data-design=blue-note] .is-open .letter-slip{transform:translateY(-7%) scale(1.17)}
[data-design=blue-note] .schedule{border:0;background:#f9f5eb;max-width:none;padding-inline:max(1.4rem,calc((100vw - 800px)/2))}
[data-design=blue-note] .events{grid-template-columns:1fr}
[data-design=blue-note] .events article{border:0;border-left:2px solid var(--cover-accent);border-radius:0;text-align:left;padding:1rem 0 1rem 1.4rem}
[data-design=blue-note] .events article+article{margin-top:.8rem}
@media(prefers-reduced-motion:reduce){.invitation-page[data-design=blue-note] .envelope-door{transition:none}}

/* Occasion guest pages keep the announcement and the event details distinct. */
.occasion-page .occasion-hero {min-height:calc(100svh - 60px)}
.occasion-page .occasion-copy {padding-block:clamp(2.5rem,8vw,6rem)}
.occasion-page .occasion-details {max-width:none;padding:0;background:var(--sheet)}
.occasion-page .occasion-details > :is(h2,p) {width:min(100% - 2.5rem,700px);margin-inline:auto}
.occasion-page .occasion-details > h2 {padding-top:clamp(3.5rem,9vw,7rem);margin-bottom:.8em}
.occasion-page .occasion-details > p {padding-bottom:clamp(3.5rem,9vw,7rem)}
.occasion-page #occasion-schedule {padding:clamp(2rem,6vw,5rem) max(1.25rem,calc((100vw - 700px)/2));background:#fffaf2;color:#282622}
.occasion-page #occasion-schedule h3 {margin-top:0}
.occasion-page #occasion-schedule a {display:inline-flex;align-items:center;min-height:44px}
.occasion-page #occasion-gallery {padding-inline:1rem;background:var(--accent);color:#fffaf2}
@media (prefers-reduced-motion:no-preference) {
  .occasion-page .occasion-details .occasion-arrival {animation:occasion-arrival .65s ease both}
  @keyframes occasion-arrival {from{opacity:.2;transform:translateY(15px)}to{opacity:1;transform:none}}
}