@font-face { font-family: "The Nautigal"; src: url("../fonts/garden/nautigal-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("../fonts/garden/vollkorn-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/garden/alegreya-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* GARDEN ROMANCE (theme key "garden", round 42): a regular, couple-first garden wedding; our own design and florals.
   Intro: a wreath of leaves round your initials with a little bouquet of wildflowers, your names in script, a meadow
   along the foot of the screen. Cover: your photo or video with soft corners and wildflowers growing over its foot,
   names in script. Sections: cream, a sprig with a daisy over every heading, rounded cards.
   Round 43: the greenery and flowers are real (photographs cut out and arranged), one set per palette (--fx-*).
   Sage & Cream (original), Wildflower Meadow, Rose Garden. Type: The Nautigal (names), Vollkorn (headings), Alegreya Sans (text). */
:root {
  --bg: #f4f2ea; --paper: #fbfaf5; --ink: #33402f; --muted: #6c7565; --line: rgba(51, 64, 47, .16);
  --accent: #6f8460; --accent-ink: #fff;
  --fx-wreath: url("/assets/themes/garden/fl/sage-wreath.webp"); --fx-border: url("/assets/themes/garden/fl/sage-border.webp"); --fx-sprig: url("/assets/themes/garden/fl/sage-sprig.webp");
  --display: "Vollkorn", Georgia, serif; --text: "Alegreya Sans", system-ui, sans-serif; --caps: "Alegreya Sans", system-ui, sans-serif; --script: "The Nautigal", cursive;
  --radius: 22px; --maxw: 560px;
}
body { font-family: var(--text); font-size: 1.06rem; line-height: 1.7; color: var(--ink); background: var(--bg); }
/* real florals (round 43): cut-out photographs arranged by tools/floral_kit.py; each palette points --fx-* at its own set */
/* each colourway's own real florals (round 43), chosen by the palette key on <html data-pal> */
html[data-pal="gd-meadow"] { --fx-wreath: url("/assets/themes/garden/fl/meadow-wreath.webp"); --fx-border: url("/assets/themes/garden/fl/meadow-border.webp"); --fx-sprig: url("/assets/themes/garden/fl/meadow-sprig.webp"); }
html[data-pal="gd-rose"] { --fx-wreath: url("/assets/themes/garden/fl/rose-wreath.webp"); --fx-border: url("/assets/themes/garden/fl/rose-border.webp"); --fx-sprig: url("/assets/themes/garden/fl/rose-sprig.webp"); }
.fx { display: block; background: center / contain no-repeat; pointer-events: none; }
.fx-swag { background-image: var(--fx-swag); aspect-ratio: 2 / 1; }
.fx-corner { background-image: var(--fx-corner); aspect-ratio: 1; }
.fx-sprig { background-image: var(--fx-sprig); aspect-ratio: 2.1 / 1; }
.fx-wreath { background-image: var(--fx-wreath); aspect-ratio: 1; }
.fx-border { background-image: var(--fx-border); aspect-ratio: 4 / 1; background-position: center bottom; }
.fx-stem { background-image: var(--fx-stem); aspect-ratio: .78; background-position: center bottom; }

/* ---------- intro ---------- */
.gd-intro { --intro-ms: 1500; background: radial-gradient(90% 60% at 50% 35%, var(--paper), var(--bg)); transition: opacity .7s ease .8s, visibility 0s linear 1.5s; overflow: hidden; }
.gd-start { position: relative; display: grid; justify-items: center; align-content: center; gap: 10px; width: 100%; height: 100%; padding: 24px 24px 150px; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: center; }
.gd-wr { position: relative; display: grid; place-items: center; width: min(62vw, 240px); aspect-ratio: 1; }
.gd-wreath { position: absolute; inset: -6%; width: auto; height: auto; }
.gd-mono { position: relative; font: 700 clamp(3rem, 16vw, 4.2rem)/1 var(--script); color: var(--ink); }
.gd-mono i { margin: 0 .06em; font: 400 .5em var(--display); font-style: italic; color: var(--accent); }
.gd-k { margin-top: 6px; font: 400 .74rem/1.5 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.gd-names { font: 700 clamp(2.6rem, 13vw, 3.4rem)/1.05 var(--script); color: var(--ink); }
.gd-d { font: 400 1.05rem var(--display); color: var(--muted); }
.gd-for { font: 400 1.15rem var(--display); } .gd-for b { font-weight: 400; }
.gd-open { margin-top: 10px; padding: 12px 26px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 400 .8rem var(--caps); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 10px 22px -12px var(--accent); animation: gd-bob 3s ease-in-out infinite; }
@keyframes gd-bob { 50% { transform: translateY(-3px); } }
.gd-intro .gd-meadow { position: absolute; left: -4%; right: -4%; bottom: -4px; width: 108%; transition: transform 1.2s cubic-bezier(.5, 0, .2, 1); }
.gd-intro .gd-wr, .gd-intro .gd-k, .gd-intro .gd-names, .gd-intro .gd-d, .gd-intro .gd-open { transition: transform 1s cubic-bezier(.5, 0, .2, 1), opacity .7s ease; }
.is-opening .gd-intro .gd-meadow { transform: translateY(70%); }
.is-opening .gd-intro .gd-wr { transform: scale(1.25); opacity: 0; }
.is-opening .gd-intro :is(.gd-k, .gd-names, .gd-d, .gd-open, .gd-for) { opacity: 0; transform: translateY(-20px); }
@media (prefers-reduced-motion: reduce) { .gd-open { animation: none; } }

/* ---------- cover ---------- */
.t-garden .gd-hero { display: block; justify-items: normal; align-items: normal; min-height: 100svh; padding: 18px 18px 56px; text-align: center; background: var(--bg); }
.gd-photo { position: relative; width: 100%; max-width: 440px; margin: 0 auto 34px; }
.gd-ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; background: color-mix(in srgb, var(--lf1) 30%, var(--paper));
  box-shadow: 0 26px 50px -34px rgba(40, 50, 30, .55); }
.gd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd-ph .hero-media-tag { top: 18px; bottom: auto; }
.gd-photo .gd-meadow { position: absolute; left: -6%; right: -6%; bottom: -30px; width: 112%; pointer-events: none; }
.gd-hero > .gd-wreath { width: min(70vw, 260px); margin: 10px auto 18px; }
.t-garden .hero-guest { margin: 0 0 6px; font: 400 1.2rem var(--display); } .t-garden .hero-guest b { font-weight: 400; }
.t-garden .hero-k { margin: 0; font: 400 .74rem/1.6 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.t-garden .hero-t { display: grid; margin: 8px 0 0; font: 700 clamp(2.2rem, min(16vw, calc(140vw / var(--nl, 7))), 5rem)/1 var(--script); color: var(--ink); }
.t-garden .hero-t i { margin: -.12em 0 -.18em; font: 400 .42em var(--display); font-style: italic; color: var(--accent); }
.t-garden .hero-line { max-width: 24em; margin: 12px auto 0; font: 400 1.06rem/1.6 var(--display); color: var(--muted); }
.gd-when { display: grid; gap: 2px; margin: 22px auto 0; padding: 14px 18px; max-width: 360px; border-radius: 99px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.gd-when b { font: 400 1.1rem var(--display); }
.gd-when span { font-size: .9rem; color: var(--muted); }
.t-garden .hero-cta, .t-garden .rs-btn, .t-garden .gl-btn { border: 0; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 400 .84rem var(--caps); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 12px 24px -14px var(--accent); transition: transform .3s ease; }
.t-garden .hero-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 200px; margin-top: 22px; padding: 0 30px; text-decoration: none; }
.t-garden .hero-cta:active, .t-garden .rs-btn:active { transform: scale(.97); }

/* ---------- sections ---------- */
.t-garden .s:not(.s-hero) { padding: 60px 18px; text-align: center; }
.t-garden .sh { margin-bottom: 28px; }
.t-garden .sh-fl { width: 160px; margin: 0 auto 8px; }
.t-garden .sh-k { font: 400 .72rem var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.t-garden .sh-t { font: 400 clamp(2rem, 9vw, 2.5rem)/1.1 var(--display); color: var(--ink); }
.t-garden .sh-n { display: none; }
.t-garden .cd-u b { font: 400 clamp(2.2rem, 10vw, 2.8rem)/1 var(--display); color: var(--ink); }
.t-garden .cd-u span { font: 400 .66rem var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.t-garden .vn-c, .t-garden .dr-roles > div, .t-garden .rs, .t-garden .rs-done, .t-garden .gl-c, .t-garden .gl-it { border: 0; border-radius: var(--radius); background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 36px -30px rgba(40, 50, 30, .45); }
.t-garden .vn-l, .t-garden .dr-roles dt, .t-garden .bio-r, .t-garden .tml-d { font: 400 .68rem var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.t-garden .vn-n, .t-garden .pp-h, .t-garden .tml-t { font: 400 1.35rem/1.25 var(--display); color: var(--ink); }
.t-garden .tl-time { color: var(--accent); font: 400 .84rem var(--caps); }
.t-garden .tl-title { font: 400 1.14rem var(--display); }
.t-garden .f-in, .t-garden .ch span { border-radius: 14px; background: #fff; border-color: var(--line); color: var(--ink); }
.t-garden .f-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.t-garden .btn-line { min-height: 46px; border: 1px solid var(--accent); border-radius: 99px; color: var(--accent); background: transparent; font: 400 .8rem var(--caps); letter-spacing: .12em; text-transform: uppercase; }
.t-garden .btn-line:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.t-garden .faq summary { font: 400 1.15rem var(--display); }
.t-garden .gal-i img, .t-garden .gal-ph { border-radius: 18px; }
.t-garden .tml::before { background: var(--line); }
.t-garden .tml-dot { background: var(--accent); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--line); }
.t-garden .tml-img { border-radius: 18px; }

/* ---------- closing ---------- */
.t-garden .gd-end { display: grid; justify-items: center; gap: 4px; padding: 56px 20px 70px; text-align: center; background: var(--paper); }
.gd-end .gd-wr { width: min(56vw, 210px); margin-bottom: 12px; }
.gd-end .gd-mono { font-size: clamp(2.6rem, 13vw, 3.4rem); }
.t-garden .gd-end .cl-line { max-width: 18em; font: 400 1.4rem/1.45 var(--display); text-wrap: balance; }
.t-garden .gd-end .cl-sign { margin-top: 6px; font: 700 2.4rem var(--script); }
.t-garden .gd-end .cl-tag { font: 400 .74rem var(--caps); letter-spacing: .14em; color: var(--accent); }
.t-garden body.is-demo .gd-end { padding-bottom: 130px; }

/* round 51: section identity (generated by tools/section_kit.py) */
.t-garden .gal-f { overflow: hidden; border-radius: 999px 999px 16px 16px; }
.t-garden .gal-f img, .t-garden .gal-f .gal-ph { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; clip-path: none; outline: 0; }
html.t-garden:not(.l-swipe):not(.l-bands):not(.l-chapters):not(.l-editorial):not(.l-scrapbook) .gal-i:nth-child(even) { margin-top: 28px; }
/* end round 51 */

/* round 54: type floor (generated by tools/type_floor.py) */
html.t-garden:root .inv .tml-d, html.t-garden:root .inv .vn-l, html.t-garden:root .inv .bio-r, html.t-garden:root .inv .dr-look > dt { font-size: .72rem; }
html.t-garden:root .inv .cd-u > span { font-size: .72rem; letter-spacing: 0.1em; }
/* end round 54 type */