@import url("../shared/infikre-base.css");

:root {
  --paper: #fff5ef;
  --surface: #fffdf9;
  --ink: #76515a;
  --muted: #9a777b;
  --line: rgba(118,81,90,.18);
  --accent: #d27c88;
  --opening-bg: #f1c9c4;
  --opening-ink: #76515a;
  --font-display: "Noto Serif Tamil", Latha, Georgia, "Times New Roman", serif;
}
body { background: var(--paper); color: var(--ink); }
.opening-screen { background: radial-gradient(circle at 50% 20%, #fff5ef 0, #f1c9c4 58%, #e7a7aa 100%); }
.opening-inner .eyebrow { color: #b66372; }
.opening-names b { color: var(--accent); font-weight: 400; }
.flower-mark { position: relative; width: 92px; height: 92px; margin: 0 auto 24px; }
.flower-mark span { position: absolute; top: 21px; left: 32px; width: 30px; height: 48px; border: 1px solid var(--accent); border-radius: 60% 40% 60% 40%; transform-origin: 14px 26px; }
.flower-mark span:nth-child(1) { transform: rotate(0); }.flower-mark span:nth-child(2) { transform: rotate(90deg); }.flower-mark span:nth-child(3) { transform: rotate(180deg); }.flower-mark span:nth-child(4) { transform: rotate(270deg); }
.flower-mark b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); font-size: 1.2rem; font-weight: 400; }
.floral-hero { position: relative; min-height: 100svh; padding: 104px 0 64px; overflow: hidden; background: #fffaf7; }
.floral-hero-grid { position: relative; z-index: 1; display: grid; gap: 42px; align-items: center; min-height: calc(100svh - 84px); }
.floral-hero-photo { position: relative; width: min(100%, 430px); margin-inline: auto; padding: 10px; border: 1px solid #e1a0a7; background: #fffdf9; transform: rotate(-2deg); }
.floral-hero-photo::before { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(210,124,136,.55); pointer-events: none; }
.floral-hero-photo img { aspect-ratio: .8; object-fit: cover; }
.photo-stamp { position: absolute; right: 8px; bottom: 22px; padding: 7px 10px; background: var(--accent); color: #fff5ef; font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg); }
.floral-hero-copy { max-width: 580px; }
.floral-hero-copy .eyebrow { color: #b66372; }
.floral-hero-copy h1 { display: grid; margin: 18px 0 24px; font: 400 clamp(4.4rem, 18vw, 10rem)/.75 var(--font-display); letter-spacing: -.1em; }
.floral-hero-copy h1 i { margin-left: .18em; color: var(--accent); font: 400 .46em/1 Georgia, serif; }
.floral-hero-copy > p:not(.eyebrow):not(.hero-date) { max-width: 450px; color: var(--muted); font: 400 1rem/1.65 var(--font-display); }
.floral-hero-copy .hero-date { display: flex; flex-wrap: wrap; gap: 10px; margin: 25px 0 0; color: #b66372; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.floral-petal { position: absolute; z-index: 0; width: 90px; height: 180px; border: 1px solid rgba(210,124,136,.35); border-radius: 60% 40% 60% 40%; }
.petal-one { top: 10%; right: -30px; transform: rotate(30deg); }.petal-two { bottom: 12%; left: -45px; transform: rotate(-45deg); }.petal-three { top: 44%; right: 5%; width: 34px; height: 68px; transform: rotate(72deg); }
.floral-date { background: #f8e4df; }
.floral-date .countdown-block { display: grid; gap: 30px; }
.floral-date .section-heading p:last-child, .floral-date .countdown-label { color: var(--muted); }
.floral-date .countdown-cell { border-radius: 50% 50% 8px 8px; border-color: rgba(210,124,136,.3); background: #fffaf7; }
.floral-story { background: #fffaf7; }
.floral-story .section-heading, .floral-gallery-section .section-heading, .floral-family .section-heading { margin-inline: auto; text-align: center; }
.floral-story .section-heading p:last-child, .floral-gallery-section .section-heading p:last-child, .floral-family .section-heading p:last-child { margin-inline: auto; }
.floral-couple-grid { position: relative; display: grid; gap: 42px; max-width: 860px; margin-inline: auto; }
.floral-profile { text-align: center; }
.floral-portrait { width: min(100%, 250px); margin: 0 auto 20px; padding: 8px; border: 1px solid #e1a0a7; border-radius: 50% 50% 8px 8px; background: #fffdf9; }
.floral-portrait img { aspect-ratio: .78; border-radius: 48% 48% 4px 4px; object-fit: cover; }
.floral-profile--bride .floral-portrait { transform: rotate(2deg); }
.floral-profile h3 { margin: 0; color: var(--ink); font: 400 3rem/.88 var(--font-display); letter-spacing: -.08em; }
.floral-profile .eyebrow { margin: 8px 0 9px; color: var(--accent); }
.floral-profile p:last-child { max-width: 260px; margin: 0 auto; color: var(--muted); font: 400 .9rem/1.55 var(--font-display); }
.floral-connector { position: absolute; top: 47%; left: 50%; color: var(--accent); font: 400 2.6rem/1 var(--font-display); transform: translate(-50%, -50%); }
.floral-story .couple-note { color: var(--muted); }
.floral-events { background: #f8e4df; }
.floral-events .section-heading, .floral-events .section-heading p:last-child { color: var(--ink); }
.floral-events .event-card { border-color: rgba(210,124,136,.28); border-radius: 45% 45% 10px 10px; background: #fffaf7; text-align: center; }
.floral-events .event-index { color: var(--accent); }
.floral-events .event-meta, .floral-events .event-description { justify-content: center; color: var(--muted); }
.floral-events .event-meta strong { color: var(--ink); }
.floral-gallery-section { background: #fffaf7; }
.floral-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin-inline: auto; }
.floral-gallery .gallery-item { padding: 8px 8px 28px; overflow: visible; background: #fff; box-shadow: 0 16px 24px rgba(118,81,90,.1); }
.floral-gallery .gallery-item img { min-height: 180px; }
.floral-gallery .gallery-item figcaption { right: 10px; bottom: 7px; left: 10px; color: var(--ink); text-align: center; text-shadow: none; font-size: .75rem; }
.floral-gallery .gallery-item:nth-child(odd) { transform: rotate(-2.2deg); }.floral-gallery .gallery-item:nth-child(even) { margin-top: 28px; transform: rotate(2.2deg); }
.floral-venue { background: #f8e4df; }
.floral-venue-card { position: relative; max-width: 760px; padding: 50px 28px; border: 1px solid #dfa2aa; background: #fffaf7; text-align: center; }
.venue-flower, .final-flower { margin-bottom: 14px; color: var(--accent); font-size: 2rem; }
.floral-venue-card h2 { margin: 0 auto 20px; max-width: 600px; font: 400 clamp(2.7rem, 10vw, 6.8rem)/.88 var(--font-display); letter-spacing: -.08em; }
.floral-venue-card .venue-name { margin: 0; color: var(--ink); font: 400 1.3rem/1.2 var(--font-display); }
.floral-venue-card .venue-address { margin: 12px auto 0; color: var(--muted); }
.floral-venue-card .map-button { margin-top: 24px; color: var(--ink); }
.floral-family { background: #fffaf7; }
.floral-family .family-card { border-color: rgba(210,124,136,.25); background: #fdf1ed; text-align: center; }
.floral-family .family-card h3 { color: var(--ink); }
.floral-family .family-card p, .floral-family .family-card li { color: var(--muted); }
.floral-rsvp { background: #f8e4df; }
.floral-rsvp .rsvp-button { background: var(--accent); }
.floral-final { min-height: 82vh; background: #f1c9c4; }
.floral-final h2 { color: var(--ink); }
.floral-final p { color: #956b72; }

@media (min-width: 650px) {
  .floral-hero-grid { grid-template-columns: .9fr 1.1fr; }
  .floral-hero-copy { order: -1; }
  .floral-date .countdown-block { grid-template-columns: .85fr 1.15fr; align-items: end; }
  .floral-couple-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .floral-connector { top: 45%; }
  .floral-venue-card { padding: 70px 56px; }
}