@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Gurmukhi:wght@400;500&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --ivory: #F4EDE0;
  --parchment: #EFE4CE;
  --sandstone: #E8DCC5;
  --navy: #1E2333;
  --gold: #B8863E;
  --bronze: #8B5E2C;
  --max-width: 1100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Lora', serif; background: var(--ivory); color: var(--navy); line-height: 1.7; font-size: 17px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
a { color: inherit; }

.site-header { background: var(--ivory); padding: 32px 24px 18px; text-align: center; }
.ik-onkar { font-family: 'Noto Sans Gurmukhi', sans-serif; font-size: 30px; color: var(--gold); line-height: 1; margin-bottom: 8px; }
.wordmark { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; letter-spacing: 0.01em; margin-bottom: 14px; }
.site-nav ul { list-style: none; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.site-nav a { text-decoration: none; color: var(--navy); padding: 4px 2px; }
.site-nav .sep { color: var(--gold); }

@media (min-width: 768px) {
  .site-header { padding: 44px 24px 22px; }
  .ik-onkar { font-size: 36px; }
  .wordmark { font-size: 23px; margin-bottom: 16px; }
  .site-nav ul { gap: 14px; font-size: 14px; }
}

.hero { padding: 28px 24px 56px; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.hero-cover img { max-width: 280px; width: 100%; border-radius: 3px; box-shadow: 0 18px 40px -14px rgba(30, 35, 51, 0.35); }
.hero-copy .eyebrow { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; }
.hero-copy h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 40px; line-height: 1.12; margin-bottom: 10px; }
.hero-copy .subtitle { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: 18px; color: var(--bronze); margin-bottom: 18px; }
.hero-copy p.desc { max-width: 46ch; margin: 0 auto 26px; font-size: 16.5px; }
.cta-row { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.btn { display: inline-block; text-decoration: none; font-family: 'Lora', serif; font-size: 15px; padding: 13px 30px; border-radius: 3px; width: 100%; max-width: 280px; text-align: center; }
.btn-primary { background: var(--gold); color: var(--ivory); }
.btn-secondary { background: transparent; color: var(--navy); border: 1px solid var(--navy); }

@media (min-width: 768px) {
  .hero { padding: 40px 24px 72px; }
  .hero .wrap { flex-direction: row; text-align: left; align-items: center; gap: 56px; }
  .hero-cover { flex: 0 0 38%; }
  .hero-cover img { max-width: 320px; }
  .hero-copy { flex: 1; }
  .hero-copy h1 { font-size: 52px; }
  .cta-row { flex-direction: row; flex-wrap: wrap; }
  .btn { max-width: none; white-space: nowrap; }
  .btn { width: auto; }
}

@media (min-width: 1024px) {
  .hero-copy h1 { font-size: 58px; }
}

section.block { padding: 56px 24px; }
.bg-ivory { background: var(--ivory); }
.bg-parchment { background: var(--parchment); }
.bg-sandstone { background: var(--sandstone); }
.bg-navy { background: var(--navy); color: var(--ivory); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.section-head .kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; }
.bg-navy .section-head .kicker { color: var(--gold); }
.section-head h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; line-height: 1.25; }
.section-body { max-width: 640px; margin: 0 auto; font-size: 16.5px; }
.section-body p + p { margin-top: 16px; }
blockquote { font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; color: var(--bronze); border-left: 2px solid var(--gold); padding-left: 18px; margin: 24px 0; }

.showcase-grid { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 900px; margin: 0 auto; }
.showcase-item figure { margin: 0; }
.showcase-item img { width: 100%; border-radius: 3px; box-shadow: 0 10px 24px -12px rgba(30, 35, 51, 0.28); }
.showcase-item figcaption { margin-top: 10px; font-size: 14px; color: var(--bronze); text-align: center; }

@media (min-width: 768px) {
  .showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-item:nth-child(3) { grid-column: 1 / span 2; max-width: 60%; margin: 0 auto; }
}

@media (min-width: 1024px) {
  .showcase-grid { grid-template-columns: repeat(3, 1fr); }
  .showcase-item:nth-child(3) { grid-column: auto; max-width: none; margin: 0; }
}

.preview-invite { text-align: center; }
.preview-invite h2 { font-family: 'Fraunces', serif; font-weight: 500; font-style: italic; font-size: 26px; margin-bottom: 14px; }
.preview-invite p { max-width: 480px; margin: 0 auto 26px; color: #D8D3C6; font-size: 16px; }
.bg-navy .btn-primary { background: var(--gold); color: var(--navy); }

.final-cta { text-align: center; }
.final-cta h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 26px; margin-bottom: 22px; max-width: 480px; margin-left: auto; margin-right: auto; }

.site-footer { padding: 32px 24px; text-align: center; font-size: 13px; color: var(--bronze); }
.site-footer .foot-word { font-family: 'Fraunces', serif; font-size: 15px; color: var(--navy); margin-bottom: 6px; }