@font-face { font-family: "Petit Formal Script"; src: url("../fonts/venue/petit-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sorts Mill Goudy"; src: url("../fonts/venue/goudy-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sorts Mill Goudy"; src: url("../fonts/venue/goudy-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* VENUE PORTRAIT (theme key "venue", round 46): the invitation is a watercolour painting of the wedding place, after the
   2026-27 trend for hand-painted venue portraits. Our own paintings (V01-V03): an old stone church (original), a garden
   pavilion (vp-garden) and a beach ceremony (vp-beach); they follow the colourway via html[data-pal]. Intro: a blank sheet
   of watercolour paper, a paint tin and a brush; tap and the brush sweeps across while the painting washes in. Cover: the
   painting fading into the paper, your names in formal script, a wash of paint, the date. Section headings sit on a wash.
   The paintings are stored on white and multiplied onto the paper, so they work on any light paper colour.
   Type: Petit Formal Script (names), Sorts Mill Goudy (text, headings, italic details). */
:root {
  --bg: #fbf9f4; --paper: #fbf9f4; --ink: #4a3b33; --muted: #84736a; --line: rgba(74, 59, 51, .16);
  --accent: #a44d63; --accent-ink: #fffaf5; --name: #5a3a3f; --wash: #d98ba0;
  --display: "Sorts Mill Goudy", "Iowan Old Style", Georgia, serif; --text: "Sorts Mill Goudy", Georgia, serif; --script: "Petit Formal Script", "Snell Roundhand", cursive;
  --radius: 0px; --maxw: 520px;
}
body { font-family: var(--text); font-size: 1.05rem; line-height: 1.75; color: var(--ink); background: var(--bg); }
.vp-art, .vp-paint { display: block; background: url(../img/real/vn-church.webp) center top / cover no-repeat; mix-blend-mode: multiply; }
html[data-pal="vp-garden"] .vp-art, html[data-pal="vp-garden"] .vp-paint { background-image: url(../img/real/vn-garden.webp); }
html[data-pal="vp-beach"] .vp-art, html[data-pal="vp-beach"] .vp-paint { background-image: url(../img/real/vn-beach.webp); }
.vp-brush { display: block; aspect-ratio: 520 / 27; background: url(../img/real/vn-brush.webp) center / contain no-repeat; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .22)); }
.vp-wash { display: block; width: 150px; aspect-ratio: 300 / 76; background: var(--wash); -webkit-mask: url(../img/real/vn-wash.webp) center / 100% 100% no-repeat; mask: url(../img/real/vn-wash.webp) center / 100% 100% no-repeat; opacity: .75; }
/* opening */
.vp-intro { background: #efeae2; }
.vp-sheet { --w: min(70vw, 300px); position: relative; display: block; width: var(--w); aspect-ratio: 2 / 3; background: #fdfcf9; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .04); }
.vp-pencil { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .5s ease .3s; }
.vp-pencil b { font: 400 2.6rem var(--script); color: rgba(60, 50, 45, .28); } .vp-pencil b i { font: italic 400 .5em var(--display); margin: 0 .1em; }
.vp-paint { position: absolute; inset: 0; opacity: 0; filter: blur(14px) saturate(1.6); clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(.4, 0, .3, 1) .25s, opacity .9s ease .25s, filter 1.5s ease .5s; }
.vp-sheet .vp-brush { position: absolute; left: -12%; top: 62%; width: 96%; transform: rotate(-24deg); transform-origin: 100% 50%; transition: transform 1.5s cubic-bezier(.4, 0, .3, 1) .2s, left 1.5s cubic-bezier(.4, 0, .3, 1) .2s, top 1.5s ease .2s, opacity .4s ease 1.7s; }
.vp-tin { display: block; width: min(46vw, 190px); aspect-ratio: 340 / 228; margin-top: -4px; background: url(../img/real/vn-tin.webp) center / contain no-repeat; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .28)); transition: opacity .5s ease 1.8s; }
.is-opening .vp-paint { opacity: 1; filter: none; clip-path: inset(0 0 0 0); }
.is-opening .vp-pencil { opacity: 0; }
.is-opening .vp-sheet .vp-brush { left: 62%; top: 30%; transform: rotate(-62deg); opacity: 0; }
.is-opening .vp-tin { opacity: 0; }
/* cover */
.t-venue .vp-hero { padding: 0 20px 60px; }
.vp-art { width: min(100%, 460px); aspect-ratio: 2 / 2.75; margin-bottom: -18px; -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
.t-venue .hero-t { margin: 12px 0 0; font: 400 clamp(1.9rem, min(10.5vw, calc(92vw / var(--nl, 6))), 3rem)/1.25 var(--script); color: var(--name); }
.t-venue .hero-t span { display: block; }
.t-venue .hero-t i { display: block; margin: 0; font: italic 400 1.1rem/1.3 var(--display); color: var(--accent); }
.vp-hero .vp-wash { margin-top: 14px; }
.vp-date { margin: 10px 0 0; font: italic 400 .95rem/1.5 var(--display); color: var(--muted); } .vp-date b { font: 400 1.25rem var(--display); color: var(--ink); letter-spacing: .04em; }
.vp-where { margin: 6px 0 0; font: 400 1rem/1.4 var(--display); }
.vp-print { width: min(58vw, 230px); margin-top: 28px; padding: 9px; background: #fff; transform: rotate(-2deg); box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .4); }
.vp-ph { aspect-ratio: 4 / 5; background: #eee9e2; }
/* sections: headings on a wash */
.t-venue .sh::after { content: ""; display: block; width: 130px; aspect-ratio: 300 / 76; margin: 4px auto 0; background: var(--wash); opacity: .6; -webkit-mask: url(../img/real/vn-wash.webp) center / 100% 100% no-repeat; mask: url(../img/real/vn-wash.webp) center / 100% 100% no-repeat; }
.t-venue .gal-i { padding: 7px; background: #fff; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .3); }
.vp-endart { position: relative; display: block; width: 220px; height: 70px; margin: 0 auto 18px; }
.vp-endart .vp-wash { position: absolute; left: 20px; top: 8px; width: 180px; }
.vp-endart .vp-brush { position: absolute; left: 0; top: 30px; width: 220px; transform: rotate(-6deg); }

/* ---------- opening: shared mechanics ---------- */
.vp-intro { --intro-ms: 3000; overflow: hidden; transition: opacity .6s ease 2.3s, visibility 0s linear 2.9s; }
.vp-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; }
.vp-for { font: italic 400 .98rem/1.5 var(--display); font-size: 1.15rem; } .vp-for b { font-weight: 400; }
.vp-tap { font: italic 400 .98rem/1.5 var(--display); color: var(--muted); animation: vp-pulse 3s ease-in-out infinite; }
@keyframes vp-pulse { 50% { opacity: .66; } }
.is-opening .vp-tap, .is-opening .vp-for { opacity: 0; animation: none; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .vp-tap { animation: none; } .vp-intro * { transition-duration: .01s !important; transition-delay: 0s !important; animation-duration: .01s !important; animation-delay: 0s !important; } }

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

/* round 64: legibility */
.vp-tap { color: var(--ink); }
html.t-venue { --m64: color-mix(in srgb, var(--muted) 56%, var(--ink)); --a64: color-mix(in srgb, var(--accent) 80%, var(--ink)); } html.t-venue .inv { --muted: var(--m64); --accent: var(--a64); }