@font-face {
  font-family:"Cormorant Garamond";
  src:url("../mika-nico/assets/cormorant-garamond.woff2") format("woff2");
  font-weight:300 700;
  font-display:swap;
}
@font-face {
  font-family:Jost;
  src:url("../mika-nico/assets/jost.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap;
}
@font-face {
  font-family:Allura;
  src:url("../mika-nico/assets/allura.woff2") format("woff2");
  font-display:swap;
}
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 Jost,system-ui,sans-serif; }
.sage-garden { --paper:#e5eadd; --ink:#273c2d; --accent:#39553f; --button-text:#fffdf4; --envelope-background:#8e9c80; }
.midnight-rose { --paper:#211825; --ink:#f5e1df; --accent:#dfb59e; --button-text:#211825; --envelope-background:#594059; }
#open span { position:absolute; top:68%; left:50%; translate:-50% 0; white-space:nowrap; }
#open span,.theme-action { display:inline-block; padding:.65rem 1.2rem; border:0; border-radius:999px; background:var(--accent); color:var(--button-text); font:600 .88rem/1.3 Jost,sans-serif; text-decoration:none; }
.theme-action[hidden] { display:none; }
.theme-action { cursor:pointer; margin:.3rem; }
:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
#open:focus-visible { outline:3px solid var(--button-text); outline-offset:-5px; }
.theme-hero { position:relative; isolation:isolate; min-height:min(100svh,850px); display:grid; place-items:center; box-sizing:border-box; overflow:hidden; padding:clamp(34px,8vw,100px) 20px; text-align:center; }
.theme-copy { z-index:1; }
.theme-label { text-transform:uppercase; font-size:.76rem; letter-spacing:.14em; }
h1,h2,.theme-date { font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; }
h1 { font-size:clamp(3.8rem,13vw,10rem); line-height:.85; margin:.28em 0; }
h2 { font-size:clamp(2.7rem,7vw,5.5rem); line-height:1; margin:0; }
.theme-date { font-size:clamp(1.2rem,3.5vw,1.6rem); }
.sage-garden .theme-hero { width:min(100%,670px); margin-inline:auto; background:#fcf2de url("../sage-garden/assets/floral-card.png") center / 100% 100% no-repeat; }
.sage-garden h1 { font-family:Allura,cursive; }
.midnight-rose .theme-hero { justify-items:start; text-align:left; padding-inline:clamp(24px,8vw,120px); }
.midnight-rose h1 { max-width:6ch; }
.theme-bouquet { position:absolute; z-index:0; right:-7%; bottom:-10%; width:min(72vw,850px); height:auto; mix-blend-mode:lighten; opacity:.7; pointer-events:none; }
.theme-details { padding:clamp(40px,8vw,100px) 20px; text-align:center; }
.theme-details dl { max-width:34rem; margin:2rem auto; border-top:1px solid color-mix(in srgb,currentColor 35%,transparent); }
.theme-details dl div { display:grid; grid-template-columns:1fr 1.5fr; gap:1rem; text-align:left; padding:.7rem; border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent); }
.theme-details dd { margin:0; }
@media (max-width:640px) {
  .sage-garden .theme-hero { min-height:min(88svh,650px); padding-inline:38px; }
  .theme-bouquet { right:-26%; width:105vw; opacity:.46; }
}
@media (prefers-reduced-motion:no-preference) {
  html { scroll-behavior:smooth; }
  .revealed .theme-copy { animation:theme-enter .75s ease-out both; }
  .revealed .theme-bouquet { animation:theme-enter 1s ease-out both; }
}
@keyframes theme-enter { from { transform:translateY(18px); opacity:0; } }