/* Shared by the three film/envelope templates: Watercolour card (aqu), Adriatic shutters (ada) and Croatian door (dal).
   They were built from one design and had about 80 identical rules each; those live here once. Every selector has the
   same specificity as the old per-template one (.inv:is(...) = .inv.t-ada), and this file is loaded before aqu.css,
   ada.css and dal.css, so their own rules still win where they differ. */
.inv:is(.t-ada, .t-aqu, .t-dal) {
  --hl: color-mix(in srgb, var(--ink) 16%, transparent);
  --txt: color-mix(in srgb, var(--ink) 84%, var(--bg));
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .26 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath d='M8 11H112' stroke='black' stroke-width='.9' fill='none'/%3E%3Cg%3E%3Cellipse cx='34' cy='6' rx='7' ry='2.7' transform='rotate(-32 34 6)'/%3E%3Cellipse cx='34' cy='16' rx='7' ry='2.7' transform='rotate(32 34 16)'/%3E%3Cellipse cx='48' cy='5.2' rx='7.5' ry='2.9' transform='rotate(-32 48 5.2)'/%3E%3Cellipse cx='48' cy='16.8' rx='7.5' ry='2.9' transform='rotate(32 48 16.8)'/%3E%3Cellipse cx='72' cy='5.2' rx='7.5' ry='2.9' transform='rotate(212 72 5.2)'/%3E%3Cellipse cx='72' cy='16.8' rx='7.5' ry='2.9' transform='rotate(148 72 16.8)'/%3E%3Cellipse cx='86' cy='6' rx='7' ry='2.7' transform='rotate(212 86 6)'/%3E%3Cellipse cx='86' cy='16' rx='7' ry='2.7' transform='rotate(148 86 16)'/%3E%3Cellipse cx='60' cy='11' rx='4.4' ry='2.6'/%3E%3C/g%3E%3C/svg%3E");
  --leaf: #6f9078; --ease2: cubic-bezier(.22, .8, .3, 1);
  --strip: color-mix(in srgb, var(--sea) 70%, var(--bg));
  --r: 2px; --ah: center; --ab: center;
  background: var(--paper), var(--bg); color: var(--txt); font-size: calc(21px * var(--zb)); line-height: 1.5;
}
.inv:is(.t-ada, .t-aqu, .t-dal) ::selection { background: color-mix(in srgb, var(--sea) 35%, transparent); }
.inv:is(.t-ada, .t-aqu, .t-dal) :focus-visible { outline: 1px solid var(--sea); outline-offset: 4px; }
.inv:is(.t-ada, .t-aqu, .t-dal) p { max-width: 34ch; margin-inline: auto; }
.inv:is(.t-ada, .t-aqu, .t-dal) .block p, .inv:is(.t-ada, .t-aqu, .t-dal) .block h2:not(.names), .inv:is(.t-ada, .t-aqu, .t-dal) .thanks p { text-align: center; }
.inv:is(.t-ada, .t-aqu, .t-dal) .block { position: relative; background: transparent; text-align: center; padding: 104px 38px 96px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .block.tint { background: transparent; }
.inv:is(.t-ada, .t-aqu, .t-dal) h2:not(.names) { display: block; font-size: calc(36px * var(--zh) * var(--kh)); font-weight: 400; line-height: 1.1; margin: 0 0 6px; color: var(--ch, var(--ink)); letter-spacing: .01em; }
.inv:is(.t-ada, .t-aqu, .t-dal) h2:not(.names)::after, .inv:is(.t-ada, .t-aqu, .t-dal) .foot::before { content: ""; display: block; width: 92px; height: 17px; margin: 14px auto 34px; background: color-mix(in srgb, var(--leaf) 80%, var(--ink)); opacity: .55; -webkit-mask: var(--sprig) center / contain no-repeat; mask: var(--sprig) center / contain no-repeat; }
.inv:is(.t-ada, .t-aqu, .t-dal) .foot { padding: 70px 26px 80px; letter-spacing: .3em; font-size: 12.5px; opacity: 1; color: var(--sea-t); font-family: var(--fh), serif; }
.inv:is(.t-ada, .t-aqu, .t-dal) .foot::before { margin: 0 auto 22px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .hero { background: transparent; min-height: max(740px, var(--vh, 0px)); align-content: center; padding: 128px 34px 120px; gap: 6px; overflow: hidden; }
.inv:is(.t-ada, .t-aqu, .t-dal) .hero::before { content: var(--ini, "&"); display: grid; place-items: center; position: relative; z-index: 1; width: 84px; height: 84px; margin-bottom: 26px; border-radius: 50%; font-family: var(--fn), serif; font-size: 27px; letter-spacing: .02em; color: var(--sea-t); box-shadow: inset 0 0 0 1px var(--hl), inset 0 0 0 5px var(--bg), inset 0 0 0 6px var(--hl); }
.inv:is(.t-ada, .t-aqu, .t-dal) .hero .kicker { font-family: var(--fh), serif; font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 20px; font-weight: 400; color: var(--txt); margin-bottom: 4px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .hero .names { font-size: calc(58px * var(--zn) * var(--kn)); line-height: 1.12; letter-spacing: 0; padding: 4px 0 8px; color: var(--cn, var(--ink)); text-wrap: balance; }
.inv:is(.t-ada, .t-aqu, .t-dal) .hero .names span { display: inline-block; }
.inv:is(.t-ada, .t-aqu, .t-dal) .rule { display: block; width: 104px; height: 19px; margin: 12px 0 8px; background: color-mix(in srgb, var(--leaf) 80%, var(--ink)); opacity: .6; -webkit-mask: var(--sprig) center / contain no-repeat; mask: var(--sprig) center / contain no-repeat; }
.inv:is(.t-ada, .t-aqu, .t-dal) .hero .date { font-family: var(--fn), serif; font-size: calc(30px * var(--zn)); letter-spacing: .01em; text-transform: none; font-weight: 400; color: var(--sea-t); }
.inv:is(.t-ada, .t-aqu, .t-dal) .hero .place { font-family: var(--fh), serif; font-size: 12.5px; letter-spacing: .32em; color: var(--txt); opacity: 1; margin-top: 10px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .hero .arch { display: none; }
.inv:is(.t-ada, .t-aqu, .t-dal).editing .hero .arch { display: block; width: 150px; height: 190px; margin: 18px 0 0; border-radius: 3px; border: 8px solid #fffdf8; box-shadow: 0 1px 2px rgba(60, 40, 30, .12), 0 14px 26px -14px rgba(60, 40, 30, .4); }
.inv:is(.t-ada, .t-aqu, .t-dal) .cd { gap: 0; margin-top: 44px; width: 100%; justify-content: center; }
.inv:is(.t-ada, .t-aqu, .t-dal) .cd div { flex: 1 1 0; max-width: 74px; min-width: 0; padding: 0; background: none; border: 0; }
.inv:is(.t-ada, .t-aqu, .t-dal) .cd div + div { border-left: 1px solid var(--hl); }
.inv:is(.t-ada, .t-aqu, .t-dal) .cd b { font-family: var(--fh), serif; font-style: normal; font-weight: 400; font-size: 34px; color: var(--ink); letter-spacing: .01em; }
.inv:is(.t-ada, .t-aqu, .t-dal) .cd small { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; margin-top: 5px; opacity: .8; }
.inv:is(.t-ada, .t-aqu, .t-dal) .story .ph, .inv:is(.t-ada, .t-aqu, .t-dal) .gal .ph { border: 9px solid #fffdf8; border-radius: 2px; box-shadow: 0 1px 2px rgba(60, 40, 30, .12), 0 16px 30px -16px rgba(60, 40, 30, .42); }
.inv:is(.t-ada, .t-aqu, .t-dal) .story .ph { height: 240px; margin: 14px 4px 22px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .gal { gap: 18px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .gal.n1 .ph { height: 300px; margin: 0 6px; border-radius: 2px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .gal.n3 { grid-auto-rows: 130px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .gal.n3 .ph:first-child { grid-row: span 2; }
.inv:is(.t-ada, .t-aqu, .t-dal) .tt { border: 0; text-align: left; max-width: 330px; margin-inline: auto; }
.inv:is(.t-ada, .t-aqu, .t-dal) .tt div { grid-template-columns: 78px minmax(0, 1fr); border: 0; padding: 14px 0; align-items: baseline; }
.inv:is(.t-ada, .t-aqu, .t-dal) .tt b { font-family: var(--fn), serif; font-weight: 400; font-size: 27px; line-height: 1; color: var(--sea-t); }
.inv:is(.t-ada, .t-aqu, .t-dal) .tt span { overflow-wrap: anywhere; font-size: 22px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .map { border: 0; border-radius: 3px; background: color-mix(in srgb, var(--soft) 60%, var(--bg)); box-shadow: 0 1px 2px rgba(60, 40, 30, .1), 0 14px 26px -16px rgba(60, 40, 30, .35); }
.inv:is(.t-ada, .t-aqu, .t-dal) .m-sea { fill: color-mix(in srgb, var(--sea) 14%, var(--bg)); }
.inv:is(.t-ada, .t-aqu, .t-dal) .m-land { fill: var(--bg); stroke: var(--sea); stroke-opacity: .5; stroke-width: .7; }
.inv:is(.t-ada, .t-aqu, .t-dal) .m-a { fill: var(--ink); }
.inv:is(.t-ada, .t-aqu, .t-dal) .m-b { fill: var(--sea); }
.inv:is(.t-ada, .t-aqu, .t-dal) .m-path { stroke: var(--sea); }
.inv:is(.t-ada, .t-aqu, .t-dal) .places { gap: 34px; text-align: center; margin-top: 8px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .places div { border: 0; padding: 0; }
.inv:is(.t-ada, .t-aqu, .t-dal) .places small { letter-spacing: .3em; font-size: 11.5px; margin-bottom: 4px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .places b { display: block; font-family: var(--fn), serif; font-weight: 400; font-size: 34px; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.inv:is(.t-ada, .t-aqu, .t-dal) .navbtn, .inv:is(.t-ada, .t-aqu, .t-dal) .cal { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 28px; margin-top: 14px; border: 1px solid color-mix(in srgb, var(--sea) 70%, transparent); border-radius: 999px; background: transparent; color: var(--ink); font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; transition: background .35s, color .35s; }
.inv:is(.t-ada, .t-aqu, .t-dal) .navbtn:hover, .inv:is(.t-ada, .t-aqu, .t-dal) .cal:hover { background: var(--sea); color: var(--bg); }
.inv:is(.t-ada, .t-aqu, .t-dal) .menu-course { border: 0; padding: 18px 0; }
.inv:is(.t-ada, .t-aqu, .t-dal) .menu-course b, .inv:is(.t-ada, .t-aqu, .t-dal) .facts2 b { letter-spacing: .3em; font-weight: 500; font-size: 11.5px; color: var(--sea-t); }
.inv:is(.t-ada, .t-aqu, .t-dal) .facts2 { border: 0; text-align: center; gap: 6px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .facts2 div { border: 0; padding: 14px 0; }
.inv:is(.t-ada, .t-aqu, .t-dal) .stays div { border: 0; padding: 16px 0; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.inv:is(.t-ada, .t-aqu, .t-dal) .stays b { font-family: var(--fn), serif; font-weight: 400; font-size: 30px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .stays span { opacity: 1; text-align: center; font-size: 19px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .swatches { justify-content: center; gap: 14px; margin-top: 14px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .swatches i { width: 36px; height: 36px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--hl); }
.inv:is(.t-ada, .t-aqu, .t-dal) details { border: 0; border-top: 1px solid var(--hl); padding: 18px 2px; text-align: left; }
.inv:is(.t-ada, .t-aqu, .t-dal) details:last-child { border-bottom: 1px solid var(--hl); }
.inv:is(.t-ada, .t-aqu, .t-dal) summary { min-height: 44px; align-items: center; font-family: var(--fh), serif; font-style: italic; font-size: 24px; font-weight: 400; line-height: 1.25; }
.inv:is(.t-ada, .t-aqu, .t-dal) summary::after { color: var(--sea); font-size: 26px; font-weight: 300; }
.inv:is(.t-ada, .t-aqu, .t-dal) details p { opacity: 1; margin: 6px 0 0; max-width: none; text-align: left; }
.inv:is(.t-ada, .t-aqu, .t-dal) .contacts div { border: 0; padding: 14px 0; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .contacts b { font-family: var(--fn), serif; font-weight: 400; font-size: 28px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .contacts a, .inv:is(.t-ada, .t-aqu, .t-dal) .stays a { text-decoration-color: var(--sea); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .form { text-align: left; gap: 18px; }
.inv:is(.t-ada, .t-aqu, .t-dal) input[type="text"], .inv:is(.t-ada, .t-aqu, .t-dal) select, .inv:is(.t-ada, .t-aqu, .t-dal) textarea { background: transparent; border: 0; border-bottom: 1px solid var(--hl); border-radius: 0; padding-inline: 2px; min-height: 52px; font-size: 21px; }
.inv:is(.t-ada, .t-aqu, .t-dal) input[type="text"]:focus, .inv:is(.t-ada, .t-aqu, .t-dal) select:focus, .inv:is(.t-ada, .t-aqu, .t-dal) textarea:focus { outline: 0; border-bottom-color: var(--sea); box-shadow: 0 1px 0 var(--sea); }
.inv:is(.t-ada, .t-aqu, .t-dal) .field > label { letter-spacing: .3em; font-size: 11.5px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .ans button, .inv:is(.t-ada, .t-aqu, .t-dal) .seat button, .inv:is(.t-ada, .t-aqu, .t-dal) .step button, .inv:is(.t-ada, .t-aqu, .t-dal) .btn, .inv:is(.t-ada, .t-aqu, .t-dal) .btnlike, .inv:is(.t-ada, .t-aqu, .t-dal) .pick span, .inv:is(.t-ada, .t-aqu, .t-dal) .results button { border: 1px solid color-mix(in srgb, var(--sea) 70%, transparent); border-radius: 999px; min-height: 52px; background: transparent; color: var(--ink); font-family: var(--fh), serif; font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; transition: background .35s, color .35s; }
.inv:is(.t-ada, .t-aqu, .t-dal) .ans button.yes, .inv:is(.t-ada, .t-aqu, .t-dal) .btn.primary, .inv:is(.t-ada, .t-aqu, .t-dal) .btnlike.yes, .inv:is(.t-ada, .t-aqu, .t-dal) .pick input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.inv:is(.t-ada, .t-aqu, .t-dal) .ans button:hover, .inv:is(.t-ada, .t-aqu, .t-dal) .btn:hover, .inv:is(.t-ada, .t-aqu, .t-dal) .seat button:hover, .inv:is(.t-ada, .t-aqu, .t-dal) .step button:hover { background: color-mix(in srgb, var(--sea) 16%, transparent); }
.inv:is(.t-ada, .t-aqu, .t-dal) .ans button.yes:hover, .inv:is(.t-ada, .t-aqu, .t-dal) .btn.primary:hover { background: var(--ink); }
.inv:is(.t-ada, .t-aqu, .t-dal) .thanks { text-align: center; padding-top: 6px; }
.inv:is(.t-ada, .t-aqu, .t-dal) .thanks h3 { font-family: var(--fn), serif; font-style: normal; font-weight: 400; font-size: calc(46px * var(--zn)); }
.inv:is(.t-ada, .t-aqu, .t-dal) .cf-fl { display: grid; place-items: center; height: 128px; margin: 4px 0 0; }
.inv:is(.t-ada, .t-aqu, .t-dal) .cf-fl svg { width: 120px; height: 120px; mix-blend-mode: multiply; }
.inv:is(.t-ada, .t-aqu, .t-dal) .cp { fill: var(--sea); fill-opacity: .24; stroke: var(--sea); stroke-opacity: .35; stroke-width: .8; }
.inv:is(.t-ada, .t-aqu, .t-dal) .cf-fl .cc { fill: color-mix(in srgb, var(--sea) 55%, var(--ink)); fill-opacity: .7; }
.inv:is(.t-ada, .t-aqu, .t-dal) .cf-ru { display: block; position: absolute; left: 0; right: 0; top: 0; height: 190px; overflow: hidden; margin: 0; pointer-events: none; z-index: 2; }
.inv:is(.t-ada, .t-aqu, .t-dal) .bub { top: -12px; bottom: auto; width: calc(var(--s) + 4px); height: calc(var(--s) + 8px); border: 0; border-radius: 0 100% 0 100%; background: var(--sea); opacity: 0; }
.inv:is(.t-ada, .t-aqu, .t-dal) .bub:nth-child(3n + 2) { background: color-mix(in srgb, var(--sea) 45%, var(--soft)); }
.inv:is(.t-ada, .t-aqu, .t-dal) .bub:nth-child(3n) { background: color-mix(in srgb, var(--leaf) 80%, var(--soft)); }
.inv:is(.t-ada, .t-aqu, .t-dal).env-closed > :not(.hero) { display: none; }