@font-face { font-family: "Host Grotesk"; src: url("../fonts/modern/host-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/modern/host-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/modern/host-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Trirong"; src: url("../fonts/modern/trirong-300i.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }

/* MODERN MINIMAL (theme key "modern", round 42): a regular, couple-first wedding for couples who want sleek, not
   frilly; our own design. Intro: your photo full screen in black and white with your names; "Open invitation" and it
   warms into colour as it slides away. Cover: the photo big, the names set large with a one-line botanical drawn
   beside them (round 43: a small hand-tied bouquet built from photographed flowers; one per palette, --fx-stem), the details in three columns. Sections: left-aligned, white, short
   rules, square photos. Palette: --fx-stem the bouquet. Black & White (original), Sage, Terracotta. Type: Host Grotesk. */
:root {
  --bg: #ffffff; --paper: #f6f5f2; --ink: #141414; --muted: #6b6b6b; --line: rgba(20, 20, 20, .14);
  --accent: #141414; --accent-ink: #fff;
  --fx-stem: url("/assets/themes/modern/fl/bw-bouquet.webp");
  --display: "Host Grotesk", system-ui, sans-serif; --text: "Host Grotesk", system-ui, sans-serif; --caps: "Host Grotesk", system-ui, sans-serif; --script: var(--display);
  --radius: 0px; --maxw: 600px; --serif: "Trirong", Georgia, serif;
}
body { font-family: var(--text); font-weight: 300; font-size: 1.02rem; 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="mo-sage"] { --fx-stem: url("/assets/themes/modern/fl/sage-bouquet.webp"); }
html[data-pal="mo-terra"] { --fx-stem: url("/assets/themes/modern/fl/terra-bouquet.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: .86; background-position: center bottom; }

/* ---------- intro ---------- */
.mo-intro { --intro-ms: 1400; background: var(--ink); transition: opacity .6s ease .8s, visibility 0s linear 1.4s; overflow: hidden; }
.mo-intro.is-plain { background: var(--bg); }
.mo-bg { position: absolute; inset: 0; }
.mo-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 1.2s ease, transform 1.4s cubic-bezier(.6, 0, .2, 1); }
.mo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), transparent 40%, rgba(0, 0, 0, .62)); }
.mo-start { position: relative; display: grid; align-content: end; justify-items: start; gap: 8px; width: 100%; height: 100%; padding: 28px 24px max(44px, calc(env(safe-area-inset-bottom) + 30px)); border: 0; background: none; color: #fff; cursor: pointer; text-align: left; }
.mo-intro.is-plain .mo-start { color: var(--ink); }
.mo-k { font: 400 .8rem var(--text); letter-spacing: .04em; opacity: .85; }
.mo-names { font: 300 clamp(2.8rem, 15vw, 4.4rem)/.95 var(--display); letter-spacing: -.035em; }
.mo-d { font: 400 1rem var(--text); letter-spacing: .08em; }
.mo-for { font: 400 1rem var(--text); } .mo-for b { font-weight: 500; }
.mo-open { margin-top: 16px; padding: 14px 24px; border-radius: 99px; background: #fff; color: #141414; font: 500 .9rem var(--text); }
.mo-intro.is-plain .mo-open { background: var(--ink); color: #fff; }
.is-opening .mo-bg img { filter: none; transform: translateY(-14%); }
.is-opening .mo-start { opacity: 0; transition: opacity .4s; }

/* ---------- cover ---------- */
.t-modern .mo-hero { display: block; justify-items: normal; align-items: normal; min-height: 100svh; padding: 0 0 56px; text-align: left; background: var(--bg); }
.mo-ph { position: relative; aspect-ratio: 4 / 5; max-height: 78svh; width: 100%; overflow: hidden; background: var(--paper); }
.mo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo-ph .hero-media-tag { top: auto; bottom: 14px; }
.mo-in { max-width: 600px; margin: 0 auto; padding: 26px 22px 0; }
.t-modern .hero-guest { margin: 0 0 6px; font: 400 1.1rem var(--text); } .t-modern .hero-guest b { font-weight: 500; }
.t-modern .hero-k { margin: 0; font: 400 .82rem var(--text); color: var(--muted); }
.mo-title { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 8px; }
.t-modern .hero-t { display: grid; margin: 0; font: 300 clamp(1.8rem, min(15vw, calc(112vw / (var(--nl, 7) + 2))), 5.4rem)/.94 var(--display); letter-spacing: -.04em; color: var(--ink); }
.t-modern .hero-t i { font-style: normal; color: var(--muted); }
.mo-hero .mo-line { width: clamp(84px, 26vw, 140px); margin-bottom: 0; }
.t-modern .hero-line { max-width: 26em; margin: 14px 0 0; color: var(--muted); }
.mo-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0 0; border-top: 1px solid var(--ink); }
.mo-facts div { padding: 12px 10px 0 0; } .mo-facts div + div { padding-left: 10px; border-left: 1px solid var(--line); }
.mo-facts dt { font: 400 .72rem var(--text); color: var(--muted); }
.mo-facts dd { margin: 2px 0 0; font: 400 .94rem/1.35 var(--text); }
.t-modern .hero-cta, .t-modern .rs-btn, .t-modern .gl-btn { border: 0; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 500 .94rem var(--text); transition: transform .3s ease; }
.t-modern .hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin-top: 26px; padding: 0 28px; text-decoration: none; }
.t-modern .hero-cta::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
.t-modern .hero-cta:active, .t-modern .rs-btn:active { transform: scale(.97); }
@media (min-width: 900px) { .t-modern .mo-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 0; } .mo-ph { max-height: none; height: 100svh; aspect-ratio: auto; } .mo-in { padding: 40px 48px; } }

/* ---------- sections ---------- */
.t-modern .s:not(.s-hero) { padding: 64px 22px; text-align: left; }
.t-modern .s:not(.s-hero) > * { max-width: 600px; margin-left: auto; margin-right: auto; }
.t-modern .sh { margin-bottom: 26px; }
.t-modern .sh::before { content: ""; display: block; width: 28px; height: 1px; margin-bottom: 16px; background: var(--ink); }
.t-modern .sh-k { font: 400 .82rem var(--text); color: var(--muted); }
.t-modern .sh-t { font: 300 clamp(2.1rem, 9.5vw, 2.8rem)/1.02 var(--display); letter-spacing: -.03em; color: var(--ink); }
.t-modern .sh-n { display: none; }
.t-modern .cd-u b { font: 300 clamp(2.4rem, 11vw, 3.2rem)/1 var(--display); letter-spacing: -.03em; }
.t-modern .cd-u span { font: 400 .72rem var(--text); color: var(--muted); }
.t-modern .vn-c, .t-modern .dr-roles > div, .t-modern .rs, .t-modern .rs-done, .t-modern .gl-c, .t-modern .gl-it { border: 1px solid var(--line); border-radius: 0; background: var(--bg); box-shadow: none; }
.t-modern .vn-l, .t-modern .dr-roles dt, .t-modern .bio-r, .t-modern .tml-d { font: 400 .78rem var(--text); color: var(--muted); }
.t-modern .vn-n, .t-modern .pp-h, .t-modern .tml-t { font: 400 1.3rem/1.25 var(--display); letter-spacing: -.01em; }
.t-modern .tl-time { color: var(--muted); font: 400 .86rem var(--text); }
.t-modern .tl-title { font: 400 1.1rem var(--display); }
.t-modern .f-in, .t-modern .ch span { border-radius: 0; background: #fff; border-color: var(--line); color: var(--ink); }
.t-modern .f-in:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.t-modern .btn-line { min-height: 46px; border: 1px solid var(--ink); border-radius: 99px; color: var(--ink); background: transparent; font: 500 .86rem var(--text); }
.t-modern .btn-line:hover { background: var(--paper); }
.t-modern .faq summary { font: 400 1.1rem var(--display); }
.t-modern .gal-i img, .t-modern .gal-ph, .t-modern .tml-img { border-radius: 0; }
.t-modern .tml::before { background: var(--line); }
.t-modern .tml-dot { background: var(--ink); border: 0; }
.t-modern .s-countdown, .t-modern .s-rsvp { background: var(--paper); }

/* ---------- closing ---------- */
.t-modern .mo-end { padding: 64px 22px 72px; text-align: left; }
.t-modern .mo-end > * { max-width: 600px; margin-left: auto; margin-right: auto; }
.mo-end .mo-line { width: 140px; margin-bottom: 18px; }
.t-modern .mo-end .cl-line { font: 300 1.6rem/1.35 var(--display); letter-spacing: -.02em; }
.t-modern .mo-end .cl-sign { margin-top: 10px; font: 400 1.1rem var(--text); }
.t-modern .mo-end .cl-tag { font: 400 .82rem var(--text); color: var(--muted); }
.t-modern body.is-demo .mo-end { padding-bottom: 130px; }
.t-modern .sh, .t-modern .s:not(.s-hero) :is(.sh-k, .sh-t, .sec-sub, .rs-by) { text-align: left; }
.t-modern .hero-t span { white-space: nowrap; }

/* ---------- round 43: richer, more elegant ----------
   A fine serif italic for the "&", the invitation line and the closing (sleek type, one graceful voice); the photo gets
   an inset hairline frame; the bouquet rests on the photo's lower corner instead of crowding the names; the details sit
   on a soft band of the palette colour; the closing is a centred card with the bouquet. */
.t-modern .hero-t i { font: italic 300 .9em/1 var(--serif); letter-spacing: 0; color: var(--accent); }
.t-modern .hero-line { font: italic 300 1.15rem/1.5 var(--serif); color: var(--muted); }
.mo-ph::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, .72); pointer-events: none; z-index: 2; }
.t-modern .mo-hero.has-media { position: relative; }
.mo-hero.has-media .mo-title { grid-template-columns: 1fr; position: static; }
.mo-hero.has-media .mo-title .mo-line { position: absolute; z-index: 3; right: 10px; top: calc(min(78svh, 125vw) - clamp(96px, 30vw, 140px)); width: clamp(104px, 33vw, 160px); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18)); }
.mo-facts { padding: 2px 12px 14px; margin-left: -12px; margin-right: -12px; background: var(--paper); border-top: 2px solid var(--accent); }
.mo-facts div { padding-top: 12px; }
.t-modern .sh::before { width: 36px; height: 2px; background: var(--accent); }
.t-modern .mo-end { margin: 0 14px 0; padding: 56px 22px 60px; text-align: center; background: var(--paper); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -10px; }
.t-modern .mo-end > * { margin-left: auto; margin-right: auto; }
.mo-end .mo-line { width: 170px; margin-bottom: 20px; }
.t-modern .mo-end .cl-line { font: italic 300 1.55rem/1.45 var(--serif); letter-spacing: 0; }
.t-modern .mo-end .cl-sign { font: 400 1.25rem var(--text); letter-spacing: -.01em; }
.t-modern body.is-demo .mo-end { margin-bottom: 120px; padding-bottom: 60px; }
@media (min-width: 900px) { .mo-hero.has-media .mo-title .mo-line { position: static; width: 140px; filter: none; } .mo-hero.has-media .mo-title { grid-template-columns: 1fr auto; } .t-modern .mo-end { max-width: 640px; margin: 0 auto; } }
.mo-hero.has-media .mo-ph .hero-media-tag { top: 22px; bottom: auto; }
.t-modern .mo-end { display: flex; flex-direction: column; align-items: center; gap: 0; }
.t-modern .mo-end :is(.cl-line, .cl-sign, .cl-tag) { text-align: center; max-width: 22em; }
.t-modern .mo-end .btn-line, .t-modern .mo-end button { margin-left: auto; margin-right: auto; }

/* round 51: section identity (generated by tools/section_kit.py) */
html.t-modern:not(.l-swipe):not(.l-bands):not(.l-chapters):not(.l-editorial):not(.l-scrapbook) .gal-i:first-child, html.t-modern:not(.l-swipe):not(.l-bands):not(.l-chapters):not(.l-editorial):not(.l-scrapbook) .gal-i:last-child:nth-child(even) { grid-column: 1 / -1; }
html.t-modern:not(.l-swipe):not(.l-bands):not(.l-chapters):not(.l-editorial):not(.l-scrapbook) .gal-i:first-child .gal-f, html.t-modern:not(.l-swipe):not(.l-bands):not(.l-chapters):not(.l-editorial):not(.l-scrapbook) .gal-i:last-child:nth-child(even) .gal-f { aspect-ratio: 4 / 3; }
/* end round 51 */