/* Kiniththa V5.2: local design lab. New concepts; production V5.0.2 is unchanged. */
:root { font-synthesis:none }
.template-body { background:color-mix(in srgb,var(--haze) 55%,#e5ded5) }
.invitation-frame { isolation:isolate }
.template-body .hero { overflow:hidden; position:relative }
.hero-copy-inner { display:flex;align-items:center;flex-direction:column;justify-content:center;gap:0;max-width:100% }
.hero-copy-inner h1 { overflow-wrap:normal }
.hero-copy .overline { margin-top:0 }
.hero-copy .hero-place { max-width:190px }
.hero-image img { object-position:50% 45% }
.countdown-panel { padding-top:16px;padding-bottom:18px }
.countdown-grid { margin-top:9px }
.countdown-grid strong { font-size:27px }
.story-copy { padding-right:12px }
.story-block>img { object-position:center center }
.note-block{padding:0;overflow:hidden;display:grid;grid-template-columns:47% 53%;min-height:203px;align-items:stretch}
.note-media{min-height:205px;position:relative;overflow:hidden}
.note-media img{display:block;position:absolute;width:100%;height:100%;object-fit:cover;object-position:center}
.note-copy{padding:20px 18px 12px;align-self:center;min-width:0}
.note-copy h2{font:italic 25px/1.06 Georgia,serif;margin:8px 0 12px;color:var(--deep)}
.note-copy p{font:12px/1.47 Georgia,serif;color:var(--ink);margin:0 0 8px}
.agenda-block{padding:20px 12px 17px}
.agenda-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:18px;position:relative}
.agenda-track:before{content:"";position:absolute;left:8%;right:8%;height:1px;background:var(--tint);top:24px;opacity:.7}
.agenda-step{position:relative;display:flex;align-items:center;flex-direction:column;text-align:center;min-width:0;padding:0 3px}
.agenda-symbol{height:47px;width:47px;display:grid;place-items:center;border:1px solid var(--edge);background:var(--paper);border-radius:50%;font-size:19px;color:var(--deep);position:relative;z-index:1;box-shadow:0 4px 12px #1a1a1a08}
.agenda-step strong{font:700 11px/1.3 Georgia,serif;margin-top:10px;color:var(--ink)}
.agenda-step>span:last-child{font:10px/1.3 Georgia,serif;margin-top:4px;color:var(--secondary);overflow-wrap:break-word}
.agenda-block .sample-note{text-align:center;margin-bottom:0}
.gallery-block{padding-bottom:12px}
.gallery-caption{font:12px/1.5 Georgia,serif;color:var(--secondary);margin:-4px 0 14px}
.gallery-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:78px;gap:5px}
.gallery-mosaic .mosaic-item{background:#e9dfce;padding:0;overflow:hidden;display:block;min-width:0;min-height:0;border-radius:7px;border:1px solid #fff8}
.gallery-mosaic .mosaic-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .23s ease,filter .23s ease}
.gallery-mosaic .mosaic-item:hover img{transform:scale(1.075);filter:saturate(1.13)}
.mosaic-1{grid-column:span 3;grid-row:span 2}
.mosaic-2{grid-column:span 2}
.mosaic-3{grid-column:span 1}
.mosaic-4{grid-column:span 3}
.mosaic-5{grid-column:span 2}
.mosaic-6{grid-column:span 2}
.mosaic-7{grid-column:span 2}
.mosaic-8{grid-column:span 6;max-height:78px}
.mosaic-8 img{object-position:center 63%}
.gallery-footnote{text-align:center;font:italic 11px Georgia,serif;margin-top:12px;color:var(--secondary)}
.contact-row>div{background:#fffc}
.mobile-footer{backdrop-filter:blur(11px)}
.menu-popover{top:87px}
.preview-toolbar{margin-bottom:42px}
/* Each KF demo has an intentionally different hero composition, not only a palette change. */
/* KF-001: Botanical split magazine cover with image on the left */
.botanical .hero{display:grid;grid-template-columns:54% 46%;height:422px;min-height:422px;background:#fcf9f0}
.botanical .hero-image{height:100%;min-height:0;clip-path:none}
.botanical .hero-image img{object-position:47% 49%}
.botanical .hero-copy{margin:0;padding:64px 7px 25px;align-self:stretch;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 100% 10%,#e7eddb88,transparent 55%)}
.botanical .hero-copy-inner{border:1px solid #b58f5c65;border-left:0;border-radius:0 90px 90px 0;padding:22px 5px 28px;min-height:245px;width:100%}
.botanical .hero h1{font:italic 34px/1.12 Georgia,serif;letter-spacing:-.06em}
.botanical .hero .main-cta{font-size:10.5px;padding:12px 13px}
.botanical .note-media{order:2}.botanical .note-copy{order:1}
/* KF-002: romantic cinematic photo above a separate ornamental name card */
.blush .hero{display:grid;grid-template-columns:1fr;grid-template-rows:258px auto;min-height:465px;background:#feece7}
.blush .hero-image{grid-column:1;grid-row:1;min-height:0;height:258px;clip-path:none}
.blush .hero-image img{object-position:50% 30%}
.blush .hero-copy{grid-column:1;grid-row:2;position:relative;margin:-37px 14px 12px;background:#fff8f3ee;border:1px solid #eec9bc;border-radius:90px 90px 17px 17px;padding:22px 7px 16px;align-self:auto;box-shadow:0 7px 26px #a8686235}
.blush .hero-copy .hero-place{max-width:none;margin-bottom:12px}
.blush .hero h1{font:italic 36px/1 Georgia,serif;margin:8px 0}
.blush .hero .main-cta{padding:9px 28px}
.blush .note-block{grid-template-columns:52% 48%}.blush .note-media{order:1}.blush .note-copy{order:2}
.blush .note-copy h2{color:#b85452}
.blush .countdown-panel{background:#fff4ef}
/* KF-003: inverted editorial: typography at left, photography at right */
.navy .hero{display:grid;grid-template-columns:49% 51%;height:430px;min-height:430px;background:linear-gradient(130deg,#fffdfa,#f2f2ee)}
.navy .hero-image{grid-column:2;grid-row:1;min-height:0;height:100%;clip-path:none}
.navy .hero-image img{object-position:45% 50%}
.navy .hero-copy{grid-column:1;grid-row:1;margin:0;padding:75px 18px 20px;align-self:center;text-align:left}
.navy .hero-copy-inner{align-items:flex-start}
.navy .hero h1{font:38px/.99 Georgia,serif;letter-spacing:-.07em;margin:25px 0 23px}
.navy .hero .hero-date{letter-spacing:.14em}
.navy .hero .main-cta{margin-top:7px}
.navy .note-block{grid-template-columns:43% 57%}.navy .note-media{order:1}.navy .note-copy{order:2}
.navy .note-copy h2{font-style:normal}
.navy .block{border-radius:7px}
/* KF-004: full photographic cover and floating terracotta invitation card */
.terracotta .hero{display:block;min-height:470px;height:470px;background:#b86d55}
.terracotta .hero-image{position:absolute;inset:0;width:100%;height:100%;min-height:0;clip-path:none}
.terracotta .hero-image img{object-position:45% 50%;filter:saturate(.9) brightness(.85)}
.terracotta .hero-copy{position:absolute;right:12px;bottom:29px;width:60%;min-height:280px;margin:0;padding:33px 12px 25px;background:#fff6ebed;border:1px solid #ffedde;border-radius:100px 100px 14px 14px;box-shadow:0 10px 28px #331c1c55}
.terracotta .hero h1{font:italic 35px/1.07 Georgia,serif}
.terracotta .hero .hero-place{max-width:none}
.terracotta .note-copy{order:1}.terracotta .note-media{order:2}
/* KF-005: lavender moonlit art direction with a translucent floating oval card */
.lavender .hero{display:block;min-height:483px;height:483px;background:#584273}
.lavender .hero-image{position:absolute;inset:0;min-height:0;height:100%;width:100%;clip-path:none}
.lavender .hero-image img{object-position:49% 45%;filter:saturate(.84) brightness(.84)}
.lavender .hero-copy{position:absolute;width:81%;left:9.5%;bottom:24px;padding:30px 17px 25px;margin:0;border-radius:46% 46% 18px 18px / 33% 33% 18px 18px;border:1px solid #fffe;background:#faf4f6e8;box-shadow:0 9px 30px #24133266;backdrop-filter:blur(9px)}
.lavender .hero h1{font:38px/1.05 Georgia,serif;margin:15px 0 9px}
.lavender .hero .hero-place{max-width:none}
.lavender .note-block{grid-template-columns:1fr;min-height:0}
.lavender .note-media{height:160px;min-height:160px;order:1}
.lavender .note-media img{object-position:center 44%}
.lavender .note-copy{order:2;text-align:center;padding:14px 27px 18px}
.lavender .note-copy h2{margin:5px auto 8px;font-size:25px}
.lavender .note-copy p{font-size:12px}
@media(max-width:395px){
  .botanical .hero,.navy .hero{height:404px;min-height:404px}
  .botanical .hero h1{font-size:29px!important}
  .navy .hero h1{font-size:33px!important}
  .blush .hero h1{font-size:33px!important}
  .terracotta .hero h1{font-size:32px!important}
  .lavender .hero h1{font-size:34px!important}
  .terracotta .hero-copy{width:64%;right:9px}
  .agenda-step strong{font-size:9px}.agenda-step>span:last-child{font-size:9px}
  .agenda-symbol{height:39px;width:39px;font-size:16px}
  .agenda-track:before{top:20px}
  .note-copy h2{font-size:21px}.note-copy p{font-size:11px}
  .gallery-mosaic{grid-auto-rows:68px}
}