@font-face { font-family: "Trirong"; src: url("../fonts/romance/trirong-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Trirong"; src: url("../fonts/romance/trirong-300i.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Proza Libre"; src: url("../fonts/romance/proza-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sacramento"; src: url("../fonts/romance/sacramento-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* CLASSIC ROMANCE (theme key "romance", round 42): a regular, couple-first wedding invitation; our own design and our
   own florals (core/themes/_florals.php, drawn by tools/florals.py). Intro: the couple's photo softly blurred, the
   invitation card over it with a garland of roses; "Open invitation" lifts the card away. Cover: the photo or video in a
   fine double frame with rose sprays at two corners, names in a light serif with a script "&", the date set the classic
   way. Sections: centred, ivory, a small spray of roses over every heading, fine gold lines.
   Round 43: the flowers are real (photographic roses, hydrangea, eucalyptus, cut out and arranged), a gold wax seal on
   the card; each palette picks its set with --fx-swag / --fx-corner / --fx-sprig. Blush & Gold (original), Dusty Blue,
   Burgundy & Gold (dark: chocolate paper, gold, burgundy and white roses).
   Type: Trirong Light (names, headings), Sacramento (the "&" only), Proza Libre (text, small capitals). */
:root {
  --bg: #fbf7f2; --paper: #fffdf9; --ink: #3a2e2a; --muted: #7b6d66; --line: rgba(176, 141, 87, .38);
  --accent: #b08d57; --accent-ink: #fff; --deep: #3a2e2a;
  --field: #fff;
  --fx-swag: url("/assets/themes/romance/fl/blush-swag.webp"); --fx-corner: url("/assets/themes/romance/fl/blush-corner.webp"); --fx-sprig: url("/assets/themes/romance/fl/blush-sprig.webp");
  --display: "Trirong", "Iowan Old Style", Georgia, serif; --text: "Proza Libre", system-ui, sans-serif; --caps: "Proza Libre", system-ui, sans-serif; --script: "Sacramento", cursive;
  --radius: 4px; --maxw: 560px;
}
body { font-family: var(--text); font-size: 1rem; line-height: 1.75; 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="rm-blue"] { --fx-swag: url("/assets/themes/romance/fl/blue-swag.webp"); --fx-corner: url("/assets/themes/romance/fl/blue-corner.webp"); --fx-sprig: url("/assets/themes/romance/fl/blue-sprig.webp"); }
html[data-pal="rm-wine"] { --fx-swag: url("/assets/themes/romance/fl/wine-swag.webp"); --fx-corner: url("/assets/themes/romance/fl/wine-corner.webp"); --fx-sprig: url("/assets/themes/romance/fl/wine-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: the card over the blurred photo ---------- */
.rm-intro { --intro-ms: 1500; background: var(--bg); transition: opacity .7s ease .8s, visibility 0s linear 1.5s; overflow: hidden; }
.rm-bg { position: absolute; inset: 0; }
.rm-bg img { position: absolute; left: -2%; top: -2%; width: 26%; height: 26%; object-fit: cover; filter: blur(3px) saturate(.9); transform: scale(4); transform-origin: 0 0; opacity: .75; }   /* a quarter-size copy, blurred, then scaled up: the same soft look for a sixteenth of the work */
.rm-bg::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 42%, transparent); }
.rm-bg.is-plain { background: radial-gradient(80% 60% at 50% 40%, var(--paper), var(--bg)); }
.rm-start { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 24px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.rm-card { position: relative; display: grid; justify-items: center; gap: 10px; width: min(88vw, 360px); padding: 120px 26px 52px; background: var(--paper); text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 30px 60px -30px rgba(40, 20, 10, .45); outline: 1px solid var(--line); outline-offset: -10px;
  transition: transform 1s cubic-bezier(.45, 0, .2, 1), opacity .6s ease .45s; will-change: transform; }
.rm-card .rm-swag { position: absolute; left: 50%; top: -64px; width: 112%; margin-left: -56%; filter: drop-shadow(0 8px 10px rgba(40, 20, 10, .16)); }
.rm-seal { position: absolute; left: 50%; bottom: -34px; width: 74px; aspect-ratio: 1; margin-left: -37px; background: url("/assets/themes/romance/fl/seal.webp") center / contain no-repeat; filter: drop-shadow(0 6px 8px rgba(40, 20, 10, .3)); }
.rm-k { font: 400 .68rem/1.5 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.rm-names { display: grid; font: 300 clamp(2.2rem, 11vw, 2.9rem)/1.02 var(--display); color: var(--ink); }
.rm-names i, .t-romance .hero-t i { font: 400 1.25em/.8 var(--script); color: var(--accent); font-style: normal; }
.rm-d { font: 300 1.05rem var(--display); font-style: italic; color: var(--muted); }
.rm-for { font: 300 1.1rem var(--display); } .rm-for b { font-weight: 300; }
.rm-open { margin-top: 14px; padding: 12px 26px; border: 1px solid var(--accent); border-radius: 99px; font: 400 .74rem var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  animation: rm-glow 2.6s ease-in-out infinite; }
@keyframes rm-glow { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent); } }
.is-opening .rm-card { transform: translateY(-110vh) rotate(-3deg); }
.is-opening .rm-bg { opacity: 0; transition: opacity .9s ease .3s; }   /* only opacity moves: animating a blur is heavy on budget phones */
@media (prefers-reduced-motion: reduce) { .rm-open { animation: none; } .rm-card { transition: opacity .4s; } .is-opening .rm-card { transform: none; opacity: 0; } }

/* ---------- cover ---------- */
.t-romance .rm-hero { display: block; justify-items: normal; align-items: normal; min-height: 100svh; padding: 22px 18px 56px; text-align: center; background: var(--bg); }
.rm-photo { position: relative; width: 100%; max-width: 440px; margin: 0 auto 30px; padding: 10px; border: 1px solid var(--line); }
.rm-photo::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--line); pointer-events: none; z-index: 1; }
.rm-ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in srgb, var(--fl1) 40%, var(--paper)); }
.rm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-ph .hero-media-tag { top: auto; bottom: 18px; }
.rm-c1, .rm-c2 { position: absolute; width: 50%; z-index: 2; pointer-events: none; background-position: left top; filter: drop-shadow(0 8px 10px rgba(60, 30, 20, .18)); }
.rm-c1 { left: -5%; top: -6%; }
.rm-c2 { right: -5%; top: -6%; transform: scaleX(-1); }   /* both top corners: the flowers drape over the photo like an arch */
.rm-hero > .rm-swag { width: min(100%, 400px); margin: 10px auto 26px; }
.t-romance .hero-guest { margin: 0 0 6px; font: 300 1.25rem var(--display); } .t-romance .hero-guest b { font-weight: 300; }
.t-romance .hero-k { margin: 0; font: 400 .7rem/1.6 var(--caps); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.t-romance .hero-t { display: grid; margin: 12px 0 0; font: 300 clamp(1.9rem, min(15vw, calc(128vw / var(--nl, 7))), 4.6rem)/1 var(--display); color: var(--ink); letter-spacing: -.005em; }
.t-romance .hero-t i { margin: -.04em 0 -.1em; font-size: .95em; }
.t-romance .hero-line { max-width: 24em; margin: 14px auto 0; font: 300 1.08rem/1.6 var(--display); font-style: italic; color: var(--muted); }
.rm-date { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; max-width: 380px; margin: 26px auto 0; }
.rm-date > span { padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 .7rem var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.rm-date b { display: grid; justify-items: center; font-weight: 400; }
.rm-date em { font: 400 .7rem var(--caps); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.rm-date strong { font: 300 3.2rem/1 var(--display); color: var(--ink); }
.rm-place { margin: 14px 0 0; font: 300 1.1rem var(--display); color: var(--ink); }
.t-romance .hero-cta, .t-romance .rs-btn, .t-romance .gl-btn { border: 0; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 400 .78rem var(--caps); letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 10px 22px -12px var(--accent); transition: transform .3s ease, box-shadow .3s; }
.t-romance .hero-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 200px; margin-top: 26px; padding: 0 30px; text-decoration: none; }
.t-romance .hero-cta:active, .t-romance .rs-btn:active { transform: scale(.97); }

/* ---------- sections ---------- */
.t-romance .s:not(.s-hero) { padding: 64px 20px; text-align: center; }
.t-romance .s:not(.s-hero):nth-of-type(even) { background: var(--paper); }
.t-romance .sh { margin-bottom: 30px; }
.t-romance .sh-fl { width: 168px; margin: 0 auto 10px; }
.t-romance .sh-k { font: 400 .68rem var(--caps); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.t-romance .sh-t { font: 300 clamp(2.1rem, 9.5vw, 2.7rem)/1.1 var(--display); color: var(--ink); }
.t-romance .sh-n { display: none; }
.t-romance .cd-u b { font: 300 clamp(2.3rem, 11vw, 3rem)/1 var(--display); color: var(--ink); }
.t-romance .cd-u span { font: 400 .62rem var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.t-romance .vn-c, .t-romance .dr-roles > div, .t-romance .rs, .t-romance .rs-done, .t-romance .gl-c, .t-romance .gl-it { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  box-shadow: 0 18px 36px -30px rgba(60, 30, 20, .4); outline: 1px solid color-mix(in srgb, var(--line) 50%, transparent); outline-offset: -6px; }
.t-romance .vn-l, .t-romance .dr-roles dt, .t-romance .bio-r, .t-romance .tml-d { font: 400 .64rem var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.t-romance .vn-n, .t-romance .pp-h, .t-romance .tml-t { font: 300 1.4rem/1.25 var(--display); color: var(--ink); }
.t-romance .tl-time { color: var(--accent); font: 400 .78rem var(--caps); letter-spacing: .08em; }
.t-romance .tl-title { font: 300 1.2rem var(--display); }
.t-romance .f-in, .t-romance .ch span { border-radius: 2px; background: var(--field); border-color: var(--line); color: var(--ink); }
.t-romance .f-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.t-romance .btn-line { min-height: 46px; border: 1px solid var(--accent); border-radius: 99px; color: var(--accent); background: transparent; font: 400 .74rem var(--caps); letter-spacing: .16em; text-transform: uppercase; }
.t-romance .btn-line:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.t-romance .faq summary { font: 300 1.2rem var(--display); }
.t-romance .gal-i img, .t-romance .gal-ph { border-radius: 2px; }
.t-romance .tml::before { background: var(--line); }
.t-romance .tml-dot { background: var(--paper); border: 1px solid var(--accent); }
.t-romance .tml-img { border-radius: 2px; }

/* ---------- closing ---------- */
.t-romance .rm-end { padding: 64px 20px 70px; text-align: center; background: var(--paper); }
.rm-end .rm-swag { width: min(100%, 400px); margin: 0 auto 24px; }
.t-romance .rm-end .cl-line { max-width: 18em; margin: 0 auto; font: 300 1.5rem/1.45 var(--display); font-style: italic; text-wrap: balance; }
.t-romance .rm-end .cl-sign { margin-top: 12px; font: 300 1.6rem var(--display); }
.t-romance .rm-end .cl-tag { font: 400 .7rem var(--caps); letter-spacing: .16em; color: var(--accent); }
.t-romance body.is-demo .rm-end { padding-bottom: 130px; }
@media (min-width: 900px) { .t-romance .rm-hero { padding-top: 48px; } }

/* round 43c: Burgundy & Gold opens on dark velvet with white and red roses, candles, pearls and lace (photographed);
   each colourway's wax seal in its own metal: rose gold (Blush), silver (Dusty Blue), gold (Burgundy) */
html[data-pal="rm-wine"] .rm-bg { background: #1c100c url("/assets/themes/romance/bg-wine.webp") center / cover no-repeat; }
html[data-pal="rm-wine"] .rm-bg img { display: none; }
html[data-pal="rm-wine"] .rm-bg::after { background: radial-gradient(60% 45% at 50% 50%, rgba(20, 10, 6, .55), rgba(20, 10, 6, .1)); }
html:not([data-pal="rm-wine"]):not([data-pal="rm-blue"]) .rm-seal { background-image: url("/assets/img/fl/seal-rosegold.webp"); }
html[data-pal="rm-blue"] .rm-seal { background-image: url("/assets/img/fl/seal-silver.webp"); }
/* round 43e: the garland on the opening card sized to the card (it was wider than the card and crowded the names) */
.rm-card .rm-swag { top: -44px; width: 86%; margin-left: -43%; }
.rm-seal { width: 60px; margin-left: -30px; bottom: -28px; }
/* round 51: small labels were under 10.5px on a phone; they are 11.5px now with a little less tracking */
.t-romance .bio-r, .t-romance .tml-d, .t-romance .vn-l { font-size: .72rem; letter-spacing: .12em; }

/* round 51: section identity (generated by tools/section_kit.py) */
.t-romance .gal-f { overflow: hidden; border-radius: 999px 999px 16px 16px; }
.t-romance .gal-f img, .t-romance .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-romance: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-romance:root .inv .hero-k, html.t-romance:root .inv .rm-date > span, html.t-romance:root .inv .rm-date > b > em, html.t-romance:root .inv .sh-k, html.t-romance:root .inv .dr-look > dt, html.t-romance:root .inv .cl-tag { font-size: .72rem; }
html.t-romance:root .inv .cd-u > span { font-size: .72rem; letter-spacing: 0.1em; }
/* end round 54 type */

/* round 64: legibility */
html.t-romance { --a64: color-mix(in srgb, var(--accent) 62%, var(--ink)); --m64: color-mix(in srgb, var(--muted) 88%, var(--ink)); } html.t-romance .inv { --muted: var(--m64); }
.rm-open, html.t-romance .inv :is(.sh-k, .bio-r, .btn-line, .tl-time, .vn-l, .dr-look dt, .cl-tag, .rm-date em, .tml-d, .st-end) { color: var(--a64); }
html.t-romance .inv :is(.hero-cta, .rs-btn, .gl-btn) { background: var(--a64); }