/* Home page only. */

.hero{ position: relative; padding: 56px 0 90px; overflow: hidden; }
.hero__texture{ position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(184,146,74,.16), transparent 60%),
              radial-gradient(ellipse 50% 40% at 0% 100%, rgba(91,26,31,.08), transparent 60%),
              var(--bg); }
.hero__grid{ display: grid; gap: 48px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 960px){ .hero__grid{ grid-template-columns: 1.1fr .9fr; } }

.hero__copy .hero__ctas{ display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 16px; }
.hero__note{ font-size: 14px; color: var(--ink-faint); letter-spacing: .02em; }

.hero__art{ position: relative; height: 420px; }
@media (min-width: 960px){ .hero__art{ height: 480px; } }
.hero__frame{ position: absolute; width: 62%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); border: 6px solid var(--paper); top: 0; left: 8%; transform: rotate(-3deg); }
.hero__frame img{ aspect-ratio: 3/4; object-fit: cover; height: 100%; }
.hero__frame-caption{ position: absolute; bottom: 14px; left: 16px; color: #fff; font-size: 22px; text-shadow: 0 2px 10px rgba(0,0,0,.4); font-family: var(--font-script); }
.hero__frame--small{ width: 42%; left: auto; right: 2%; top: 24%; transform: rotate(4deg); z-index: 2; }
.font-script{ font-family: var(--font-script); }

.featured-grid{ display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 720px){ .featured-grid{ grid-template-columns: repeat(3, 1fr); } }
.featured-card{ display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); box-shadow: var(--shadow-card);
  transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); }
.featured-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.featured-card__media{ aspect-ratio: 4/5; overflow: hidden; }
.featured-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.featured-card:hover .featured-card__media img{ transform: scale(1.05); }
.featured-card__body{ padding: 22px 22px 26px; }
.featured-card__tag{ color: var(--ink-faint); font-size: 14px; margin: 2px 0 14px; }
.featured-card__link{ font-size: 14px; color: var(--gold-deep); font-style: italic; }

.section--alt{ background: var(--bg-alt); }

.occasions-grid{ display: grid; gap: 22px; grid-template-columns: repeat(2,1fr); }
@media (min-width: 720px){ .occasions-grid{ grid-template-columns: repeat(3,1fr); } }
.occasion-card{ position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-card); }
.occasion-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.occasion-card:hover img{ transform: scale(1.06); }
.occasion-card__body{ position: absolute; inset: auto 0 0 0; padding: 16px 16px 18px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(20,16,8,.86)); }
.occasion-card__body h3{ color: #fff; font-size: 1.1rem; margin-bottom: 4px; }
.occasion-card__body p{ color: rgba(255,255,255,.82); font-size: 13.5px; margin-bottom: 8px; display: none; }
@media (min-width: 560px){ .occasion-card__body p{ display: block; } }
.occasion-card__body span{ font-size: 12.5px; color: var(--gold-soft); font-style: italic; }

.steps{ display: grid; gap: 28px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 720px){ .steps{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1100px){ .steps{ grid-template-columns: repeat(5,1fr); } }
.steps li{ padding: 26px 20px; border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--hairline); }
.steps__num{ display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); margin-bottom: 10px; }
.steps li h3{ font-size: 1.05rem; margin-bottom: 6px; }
.steps li p{ font-size: 14.5px; margin: 0; }


.cta-band{ background: linear-gradient(135deg, var(--ink) 0%, #26200f 100%); color: #F4EFE2; }
.cta-band__inner{ text-align: center; max-width: 640px; }
.cta-band h2{ color: #F4EFE2; }
.cta-band p{ color: #CFC4A4; margin-bottom: 28px; }