/* The catalogue starts with finished invitation faces. */
.collection-intro{background:#f3e9de;color:#351b26;padding:clamp(1.55rem,4vw,3rem) clamp(1.1rem,5vw,4.5rem)}
.collection-intro h1{font-size:clamp(2.8rem,7vw,6rem);margin:0 0 .2em}
.collection-intro nav{display:flex;flex-wrap:wrap;gap:.35rem 1.15rem;margin-top:.6rem}
.collection-intro nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:.22em}
.studio .collection#templates{padding-top:clamp(1.2rem,3vw,2.75rem)}
.studio .template-art{aspect-ratio:1.28}
.studio .template-art .mini-card{width:52%;max-width:280px;position:relative;gap:.3rem}
.studio .mini-card .card-kicker{margin:0 auto;max-width:18ch}
.studio .template-art[data-design=heirloom]{--surface:#381823;--art:none}
.studio .template-art[data-design=heirloom] .mini-card{aspect-ratio:1;width:63%;border-radius:50%;border:4px double #9c5461}
.studio .template-art[data-design=garden] .mini-card{justify-items:end;padding-right:12%;text-align:right}
.studio .template-art[data-design=registry] .mini-card{justify-items:start;padding-left:14%;text-align:left}
.studio .template-art[data-design=registry] .mini-card span{font-family:var(--sans);font-weight:650}
.studio .template-art[data-design=registry] .mini-card small{margin-left:0}
@media(max-width:640px){
  .studio .studio-bar{grid-template-columns:1fr auto;gap:.65rem;padding:.65rem 1.05rem}
  .studio .studio-bar nav{display:none}
  .studio .studio-start{display:inline-flex;align-items:center;min-height:44px}
  .studio .collection-heading h2{font-size:2.2rem}
}

/* Rose Heirloom opens radially, revealing a round letterpress card. */
.rose-bloom,.silk-band{display:none}
[data-motion=bloom] .envelope-case{display:none}
.invitation-page[data-design=heirloom] .cover{background:radial-gradient(ellipse at center,#68283a 0,#421c2a 48%,#25121d 88%)}
[data-motion=bloom] .rose-bloom{display:block;position:relative;width:min(86vw,430px,56svh);aspect-ratio:1;isolation:isolate;filter:drop-shadow(0 20px 22px #200812a0)}
.petal,.bloom-centre{position:absolute;inset:0;background:url("/rose-bloom.webp") center/contain no-repeat}
.bloom-centre{clip-path:circle(27%);transition:transform .64s ease .14s,opacity .56s ease .14s}
.petal{transition:transform .95s cubic-bezier(.16,.7,.25,1),opacity .85s ease .1s}
.petal-top{clip-path:polygon(0 0,100% 0,50% 50%);--drift:0 -41%;--angle:-14deg}
.petal-right{clip-path:polygon(100% 0,100% 100%,50% 50%);--drift:41% 0;--angle:14deg}
.petal-bottom{clip-path:polygon(100% 100%,0 100%,50% 50%);--drift:0 41%;--angle:17deg}
.petal-left{clip-path:polygon(0 100%,0 0,50% 50%);--drift:-41% 0;--angle:-17deg}
.is-open[data-motion=bloom] .petal{translate:var(--drift);transform:rotate(var(--angle)) scale(.87);opacity:0;transition-property:translate,transform,opacity}
.is-open[data-motion=bloom] .bloom-centre{transform:scale(.68);opacity:0}
.invitation-page .cover.is-open[data-motion=bloom]{animation:scene-exit .55s ease .9s both}
.invitation-page[data-design=heirloom] .revealed-stationery{background:radial-gradient(ellipse at center,#702e3e,#301524 76%);min-height:calc(100svh - 62px)}
.invitation-page[data-design=heirloom] .stationery-card{width:min(90vw,520px);min-height:0;aspect-ratio:1;border-radius:50%;background:#f7e7d6;color:#4b1e30;border:6px double #a9626d;outline:1px solid #ddabac;outline-offset:-16px;padding:clamp(1.25rem,8vw,4.5rem) 10%;box-shadow:0 18px 65px #11050e88;position:relative}
.invitation-page[data-design=heirloom] .stationery-card h1{font-size:clamp(2rem,7.4vw,4.35rem);line-height:.95}
.invitation-page[data-design=heirloom] .stationery-card p{max-width:90%}
.invitation-page[data-design=heirloom] .stationery-card h1 i{color:#91515e}

/* The real card sits behind the two folio leaves for the entire opening. */
.invitation-page[data-design=blue-note]{--folio-width:min(85vw,420px,53svh);--folio-ratio:.69}
.invitation-page[data-design=blue-note] .cover{background:transparent;overflow:hidden}
.invitation-page[data-design=blue-note]:has(.cover:not([hidden])){background:#ddd9d3}
.invitation-page[data-design=blue-note] .cover.is-open[data-motion=ribbon]{animation:none}
.invitation-page[data-design=blue-note] .opening-scene{width:100%;height:100%;padding:0;display:block}
.invitation-page[data-design=blue-note] .envelope-case{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;width:var(--folio-width);aspect-ratio:var(--folio-ratio);margin:0;perspective:1100px}
.invitation-page[data-design=blue-note] :is(.envelope-back,.letter-slip,.envelope-fastener){display:none}
.invitation-page[data-design=blue-note] .envelope-door{background-color:#f3ead9;background-image:linear-gradient(35deg,#98896a35 1px,transparent 2px),linear-gradient(145deg,#fff9ec,#e6d9bd);border:1px solid #b6a585;box-shadow:0 9px 26px #21182935;transition:transform 1.05s cubic-bezier(.3,.02,.24,1) .5s,opacity .28s ease 1.38s}
.invitation-page[data-design=blue-note] .envelope-door::after{content:"";position:absolute;inset:8px;border:1px solid #aa987660}
.invitation-page[data-design=blue-note] .is-open .left-door{transform:rotateY(-110deg);opacity:0}
.invitation-page[data-design=blue-note] .is-open .right-door{transform:rotateY(110deg);opacity:0}
.invitation-page[data-design=blue-note] .silk-band{display:block;inset:48% -2% auto;z-index:6;height:17px;background:linear-gradient(#65798b,#b0c0ca 35%,#8094a6 60%,#4c6072);box-shadow:0 2px 6px #1a203c46;transition:transform .62s cubic-bezier(.33,.08,.28,1),opacity .45s ease .1s}
.silk-band i{position:absolute;bottom:2px;width:24%;height:39px;border:9px solid #8c9faf;border-radius:57% 45% 14% 52%;box-shadow:0 2px 4px #24324766,inset 0 1px 6px #293b5466;transform-origin:bottom right}
.silk-band i:first-child{right:50%;rotate:19deg}
.silk-band i:last-child{left:50%;transform-origin:bottom left;transform:scaleX(-1) rotate(19deg)}
.invitation-page[data-design=blue-note] .is-open .silk-band{transform:translate(66%,36%) rotate(21deg) scaleX(.5);opacity:0}
.invitation-page[data-design=blue-note] .opening-action{position:absolute;z-index:7;left:50%;top:50%;translate:-50% -50%;min-width:0;padding:.48rem .8rem;color:#24384c;background:#f6eee0;border-color:#e7dac3;white-space:nowrap}
.invitation-page[data-design=blue-note] .is-open .opening-action{visibility:hidden}
.invitation-page[data-design=blue-note] .skip-opening{position:absolute;left:50%;bottom:max(.35rem,env(safe-area-inset-bottom));translate:-50% 0}
.invitation-page[data-design=blue-note] .revealed-stationery{min-height:100svh;padding:0;background:#ddd9d3}
.invitation-page[data-design=blue-note] .stationery-card{width:var(--folio-width);min-height:0;aspect-ratio:var(--folio-ratio);padding:clamp(1rem,5vw,2.8rem) .8rem;box-shadow:0 18px 50px #21182947}
.invitation-page[data-design=blue-note] .stationery-card h1{font-size:clamp(1.7rem,6vw,3.6rem);margin:.27em 0}
.invitation-page[data-design=blue-note] .stationery-card a{margin-top:.65rem}
.invitation-page[data-design=blue-note]:has(.cover:not([hidden])) .revealed-stationery{position:fixed;inset:0;z-index:9}
@media(prefers-reduced-motion:reduce){
  .petal,.bloom-centre,.silk-band,.invitation-page[data-design=blue-note] .envelope-door{transition:none!important}
  .invitation-page .cover.is-open[data-motion]{animation:none}
}