@font-face { font-family: "Nothing You Could Do"; src: url("../fonts/meadow/nycd-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("../fonts/meadow/crimson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("../fonts/meadow/crimson-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* WILDFLOWER MEADOW (theme key "meadow", round 46): hand-painted wildflowers, the best-selling floral style on the
   stationery marketplaces. Our own watercolours (V05-V06). Intro: a kraft seed packet with your names on the label; tap
   and it opens and tips away while six stems grow up from the bottom of the screen. Cover: your names in handwriting
   over a painted meadow along the bottom edge, single stems at the sides. Each section heading has its own stem.
   The paintings are stored on white and multiplied onto the paper. Meadow (original), Lavender, Cornflower.
   Type: Nothing You Could Do (names, handwriting), Crimson Pro (text, headings, italic details). */
:root {
  --bg: #fdfbf6; --paper: #fdfbf6; --ink: #3a4634; --muted: #74806c; --line: rgba(58, 70, 52, .16);
  --accent: #c2583f; --accent-ink: #fffaf3; --name: #34432f;
  --display: "Crimson Pro", "Iowan Old Style", Georgia, serif; --text: "Crimson Pro", Georgia, serif; --script: "Nothing You Could Do", "Bradley Hand", cursive;
  --radius: 999px; --maxw: 520px;
}
body { font-family: var(--text); font-size: 1.12rem; line-height: 1.7; color: var(--ink); background: var(--bg); }
.mw-st { display: block; background: center bottom / contain no-repeat; mix-blend-mode: multiply; }
.mw-st.is-1 { background-image: url(../img/real/md-stem1.webp); aspect-ratio: 130 / 244; }
.mw-st.is-2 { background-image: url(../img/real/md-stem2.webp); aspect-ratio: 130 / 294; }
.mw-st.is-3 { background-image: url(../img/real/md-stem3.webp); aspect-ratio: 130 / 298; }
.mw-st.is-4 { background-image: url(../img/real/md-stem4.webp); aspect-ratio: 130 / 227; }
.mw-st.is-5 { background-image: url(../img/real/md-stem5.webp); aspect-ratio: 130 / 425; }
.mw-st.is-6 { background-image: url(../img/real/md-stem6.webp); aspect-ratio: 130 / 205; }
.mw-border { position: absolute; left: 0; right: 0; bottom: 0; height: 118px; display: block; background: url(../img/real/md-border.webp) 50% 100% / auto 100% repeat-x; mix-blend-mode: multiply; pointer-events: none; }
/* opening */
.mw-intro { background: var(--bg); }
.mw-start { align-content: start; padding-top: 16vh; }
.mw-pack { --w: min(58vw, 240px); position: relative; z-index: 2; display: block; width: var(--w); aspect-ratio: 300 / 449; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .25)); transition: transform 1.1s cubic-bezier(.5, 0, .7, .4) .9s, opacity .5s ease 1.4s; }
.mw-pk { position: absolute; left: 0; right: 0; bottom: 0; display: block; background: center bottom / 100% auto no-repeat; }
.mw-pk.is-shut { aspect-ratio: 300 / 377; background-image: url(../img/real/md-packet.webp); transition: opacity .25s ease .2s; }
.mw-pk.is-open { top: 0; background-image: url(../img/real/md-packet-open.webp); opacity: 0; transition: opacity .25s ease .2s; }
.mw-label { position: absolute; left: 14%; right: 14%; bottom: 10%; height: 52%; display: grid; align-content: center; justify-items: center; gap: 4px; color: #4b4334; }
.mw-label small { font: italic 400 .72rem/1.3 var(--display); }
.mw-label b { font: 400 clamp(1rem, 5vw, 1.3rem)/1.35 var(--script); text-align: center; } .mw-label b i { font: italic 400 .8em var(--display); }
.mw-grow { position: absolute; left: 0; right: 0; bottom: 0; height: 46vh; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 2vw; pointer-events: none; }
.mw-grow .mw-st { width: 15vw; max-width: 84px; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 1.3s cubic-bezier(.2, .8, .2, 1); }
.mw-grow .is-2 { transition-delay: .5s; } .mw-grow .is-5 { transition-delay: .65s; } .mw-grow .is-1 { transition-delay: .8s; } .mw-grow .is-4 { transition-delay: .95s; } .mw-grow .is-3 { transition-delay: 1.1s; } .mw-grow .is-6 { transition-delay: 1.25s; }
.is-opening .mw-pk.is-shut { opacity: 0; } .is-opening .mw-pk.is-open { opacity: 1; }
.is-opening .mw-pack { transform: translateY(-10vh) rotate(168deg); opacity: 0; }
.is-opening .mw-grow .mw-st { transform: scaleY(1); }
/* cover */
.t-meadow .mw-hero { padding: 64px 22px 170px; }
.mw-side { position: absolute; bottom: 84px; display: flex; align-items: flex-end; gap: 0; pointer-events: none; }
.mw-side.is-l { left: -8px; } .mw-side.is-r { right: -8px; }
.mw-side .mw-st { width: 46px; } .mw-side .mw-st:first-child { width: 40px; }
.mw-ph { width: min(58vw, 230px); aspect-ratio: 4 / 5; margin-bottom: 26px; border-radius: 999px 999px 6px 6px; background: #eef0e6; box-shadow: 0 0 0 6px #fff, 0 12px 24px -10px rgba(0, 0, 0, .35); }
.t-meadow .hero-t { margin: 14px 0 0; font: 400 clamp(2.2rem, min(13vw, calc(100vw / var(--nl, 6))), 3.5rem)/1.2 var(--script); color: var(--name); }
.t-meadow .hero-t span { display: block; }
.t-meadow .hero-t i { display: block; font: italic 400 1.2rem/1.2 var(--display); color: var(--accent); }
.mw-date { margin: 18px 0 0; font: 400 1rem/1.5 var(--display); color: var(--muted); } .mw-date b { font-weight: 400; font-size: 1.15rem; color: var(--ink); }
/* sections: a stem over each heading */
.t-meadow .sh::before { content: ""; display: block; width: 46px; height: 74px; margin: 0 auto 6px; background: url(../img/real/md-stem2.webp) center bottom / contain no-repeat; mix-blend-mode: multiply; }
.t-meadow .s:nth-of-type(6n+2) .sh::before { background-image: url(../img/real/md-stem1.webp); } .t-meadow .s:nth-of-type(6n+3) .sh::before { background-image: url(../img/real/md-stem3.webp); }
.t-meadow .s:nth-of-type(6n+4) .sh::before { background-image: url(../img/real/md-stem4.webp); } .t-meadow .s:nth-of-type(6n+5) .sh::before { background-image: url(../img/real/md-stem6.webp); }
.t-meadow .s:nth-of-type(6n) .sh::before { background-image: url(../img/real/md-stem5.webp); }
.t-meadow .vn-c, .t-meadow .dr-roles > div, .t-meadow .rs, .t-meadow .rs-done, .t-meadow .gl-c, .t-meadow .gl-it { border-radius: 18px; }
.t-meadow .f-in { border-radius: 12px; }
.t-meadow .gal-i img, .t-meadow .gal-ph { border-radius: 14px; }
.t-meadow .s-closing { padding-bottom: 150px; }
.mw-endst { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin-bottom: 14px; } .mw-endst .mw-st { width: 40px; }

/* ---------- opening: shared mechanics ---------- */
.mw-intro { --intro-ms: 3100; overflow: hidden; transition: opacity .6s ease 2.4s, visibility 0s linear 3.0s; }
.mw-start { position: relative; display: grid; justify-items: center; align-content: center; gap: 22px; width: 100%; height: 100%; padding: 24px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.mw-for { font: italic 400 1.02rem/1.5 var(--display); font-size: 1.15rem; } .mw-for b { font-weight: 400; }
.mw-tap { font: italic 400 1.02rem/1.5 var(--display); color: var(--muted); animation: mw-pulse 3s ease-in-out infinite; }
@keyframes mw-pulse { 50% { opacity: .5; } }
.is-opening .mw-tap, .is-opening .mw-for { opacity: 0; animation: none; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .mw-tap { animation: none; } .mw-intro * { transition-duration: .01s !important; transition-delay: 0s !important; animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ---------- sections ---------- */
.t-meadow .s-hero { position: relative; display: block; min-height: 100svh; text-align: center; overflow: hidden; }
.t-meadow .s-hero > * { margin-left: auto; margin-right: auto; }
.t-meadow .hero-guest { margin: 0 0 8px; font: italic 400 1.02rem/1.5 var(--display); font-size: 1.05rem; } .t-meadow .hero-guest b { font-weight: 400; }
.t-meadow .hero-k, .t-meadow .sh-k { margin: 0; font: italic 400 1.02rem/1.5 var(--display); color: var(--muted); text-wrap: balance; }
.t-meadow .hero-line { margin: 14px auto 0; max-width: 19em; font-size: .98rem; color: var(--muted); text-wrap: balance; }
.t-meadow .hero-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 26px; padding: 12px 34px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 400 1.05rem var(--display); text-decoration: none; }
.t-meadow .sh { margin-bottom: 28px; }
.t-meadow .sh-t { font: 400 clamp(1.9rem, 8.6vw, 2.5rem)/1.15 var(--display); color: var(--name); }
.t-meadow .sh-n { font: italic 400 1.02rem/1.5 var(--display); color: var(--accent); }
.t-meadow .cd-u b { font: 400 clamp(2rem, 9vw, 2.6rem)/1 var(--display); color: var(--name); }
.t-meadow .cd-u span { font: italic 400 1.02rem/1.5 var(--display); font-size: .8rem; color: var(--muted); }
.t-meadow .vn-c, .t-meadow .dr-roles > div, .t-meadow .rs, .t-meadow .rs-done, .t-meadow .gl-c, .t-meadow .gl-it { border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .5); box-shadow: none; }
.t-meadow .vn-l, .t-meadow .dr-roles dt, .t-meadow .bio-r, .t-meadow .tml-d { font: italic 400 1.02rem/1.5 var(--display); font-size: .84rem; color: var(--accent); }
.t-meadow .vn-n, .t-meadow .pp-h, .t-meadow .tml-t { font: 400 1.28rem/1.3 var(--display); color: var(--ink); }
.t-meadow .tl-time { color: var(--accent); font: italic 400 1.02rem/1.5 var(--display); font-size: .88rem; }
.t-meadow .tl-title { font: 400 1.05rem var(--display); }
.t-meadow .f-in, .t-meadow .ch span { border-radius: 999px; background: rgba(255, 255, 255, .7); border-color: var(--line); }
.t-meadow .rs-btn, .t-meadow .gl-btn { border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 400 1.05rem var(--display); }
.t-meadow .btn-line { min-height: 46px; border-radius: 999px; border-color: var(--line); color: var(--ink); font: 400 1.05rem var(--display); }
.t-meadow .btn-line:hover { border-color: var(--ink); }
.t-meadow .faq summary { font: 400 1.05rem var(--display); }
.t-meadow .gal-i img, .t-meadow .gal-ph { border-radius: 999px; }
.t-meadow .gal-i figcaption { margin-top: 8px; font: italic 400 1.02rem/1.5 var(--display); font-size: .84rem; color: var(--ink); }
.t-meadow .s-closing { position: relative; text-align: center; overflow: hidden; }
.t-meadow .cl-line { font: 400 clamp(1.9rem, 8.6vw, 2.5rem)/1.15 var(--display); color: var(--name); text-wrap: balance; }
.t-meadow .cl-sign { margin-top: 10px; color: var(--ink); }
.t-meadow .cl-tag { font: italic 400 1.02rem/1.5 var(--display); color: var(--accent); }
.t-meadow .f-in { border-radius: 14px; }