/* ============================================================
   layout.css — navigation, hero, sections, footer, structural
   ============================================================ */

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(251,247,240,0.96);backdrop-filter:blur(10px);border-bottom:0.5px solid var(--champagne-dark);padding:0 2.5rem;display:flex;align-items:center;justify-content:space-between;height:58px}
.nav-brand{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;color:var(--mauve-dark);text-decoration:none;letter-spacing:0.02em}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:0.18em;color:var(--ink-light);text-decoration:none;text-transform:uppercase;transition:color 0.2s}
.nav-links a:hover{color:var(--mauve)}

/* HERO */
#hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 2rem 3rem;position:relative;overflow:hidden;background:var(--champagne-pale)}
.hero-border-frame{position:absolute;inset:68px 24px 24px;pointer-events:none}
.hero-border-frame::before{content:'';position:absolute;inset:0;border:0.75px solid var(--bronze-light);opacity:0.55}
.hero-border-frame::after{content:'';position:absolute;inset:6px;border:0.5px solid var(--champagne-dark)}
.hero-flower{position:absolute;width:260px;height:260px;pointer-events:none;opacity:0.85}
.hero-flower.tl{top:58px;left:0}
.hero-flower.tr{top:58px;right:0;transform:scaleX(-1)}
.hero-flower.bl{bottom:0;left:0;transform:scaleY(-1)}
.hero-flower.br{bottom:0;right:0;transform:scale(-1,-1)}
.hero-big-6{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(100px,18vw,200px);color:var(--mauve-dark);line-height:0.9;opacity:0.07;position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;z-index:1;user-select:none;top:50%;margin-top:-0.35em}
.hero-eyebrow{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:0.28em;color:var(--bronze);text-transform:uppercase;margin-bottom:1.4rem}
.hero-e-text{font-family:'Cinzel',serif;font-size:13px;letter-spacing:0.35em;color:var(--mauve);display:block;margin:0.3rem 0}
.divider-row{display:flex;align-items:center;gap:1rem;margin:1.8rem auto;width:300px}
.divider-line{flex:1;height:0.5px;background:linear-gradient(to right,transparent,var(--bronze-light),transparent)}
.divider-ornament{color:var(--mauve-light);font-size:16px;line-height:1}
.hero-date-top{font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.3em;color:var(--ink-light);text-transform:uppercase;margin-bottom:0.3rem}
.countdown{display:flex;gap:2.5rem;margin-top:2rem;justify-content:center;position:relative;z-index:2}
.countdown-item{text-align:center}
.countdown-num{font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:500;color:var(--mauve-dark);line-height:1;display:block}
.countdown-lbl{font-family:'Cinzel',serif;font-size:8.5px;letter-spacing:0.22em;color:var(--bronze);text-transform:uppercase;margin-top:3px}
.countdown-dot{font-family:'Cormorant Garamond',serif;font-size:44px;color:var(--champagne-dark);line-height:1;align-self:flex-start;margin-top:2px}
.hero-quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(14px,1.8vw,17px);color:var(--ink-light);max-width:560px;margin:2rem auto 0;line-height:1.9;position:relative;z-index:2}

/* SECTIONS */
section{padding:7rem 2rem}
.section-inner{max-width:840px;margin:0 auto}
.section-eyebrow{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:0.28em;color:var(--bronze);text-transform:uppercase;display:block;margin-bottom:0.9rem;text-align:center}
.section-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(36px,5vw,58px);color:var(--mauve-dark);text-align:center;line-height:1.1;margin-bottom:3rem}
.ornament-divider{display:flex;align-items:center;gap:1rem;max-width:320px;margin:2.5rem auto}
.ornament-divider-line{flex:1;height:0.5px;background:var(--champagne-dark)}
.ornament-divider-center{color:var(--mauve-light);font-size:18px;line-height:1}


/* FOOTER */
footer{background:var(--ink);color:var(--champagne-dark);text-align:center;padding:5rem 2rem}
.footer-names{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:44px;font-weight:300;color:var(--champagne);margin-bottom:0.5rem}
.footer-date{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:0.3em;text-transform:uppercase;color:var(--bronze-light);margin-bottom:2rem}
.footer-divider{width:50px;height:0.5px;background:var(--bronze-light);margin:0 auto 2rem}
.footer-quote{font-style:italic;font-size:14.5px;max-width:460px;margin:0 auto;color:var(--ink-light);line-height:1.9}


/* =====================
   CORNER FLOWERS
   =====================
   Each corner: the flower PNG is positioned so it "grows"
   from the corner inward. We use a fixed container that clips
   at the section boundary. The image is rotated per corner.
*/
.corner-flowers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.cf {
  position: absolute;
  width: 220px;
  aspect-ratio: 1 / 1;
  opacity: 0.82;
  background-image: var(--cf-img);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* Top-left: normal orientation */
.cf.tl {
  top: 55px; left: -15px;
  transform-origin: top left;
  transform: none;
}
/* Top-right: mirror horizontally */
.cf.tr {
  top: 55px; right: -15px;
  transform-origin: top right;
  transform: scaleX(-1);
}
/* Bottom-left: mirror vertically */
.cf.bl {
  bottom: -15px; left: -15px;
  transform-origin: bottom left;
  transform: scaleY(-1);
}
/* Bottom-right: mirror both axes */
.cf.br {
  bottom: -15px; right: -15px;
  transform-origin: bottom right;
  transform: scale(-1, -1);
}

/* Smaller variant for inner sections */
.cf.sm { width: 160px; opacity: 0.65; }
.cf.xs { width: 110px; opacity: 0.55; }
.story-flower{position:absolute;width:185px;aspect-ratio:1/1;background-image:var(--story-flower);background-size:contain;background-position:center;background-repeat:no-repeat;opacity:0.92;pointer-events:none;z-index:1;}
.story-flower.tl{top:55px;left:0;transform:scaleY(-1);}
.story-flower.tr{top:55px;right:0;transform:scale(-1,-1);}
@media(max-width:640px){.story-flower{width:120px;}}

/* Hero content always above flowers */
#hero > div { position: relative; z-index: 4; }
#hero .hero-border-frame,
#hero .hero-big-6 { z-index: 2; }

/* Dividers */
.divider-img {
  display: block;
  margin: 0 auto;
  max-width: 600px;
  width: 88%;
  pointer-events: none;
  user-select: none;
}
.divider-img.large { max-width: 820px; }
.divider-img.small { max-width: 340px; }
.section-deco { text-align: center; padding: 0.5rem 0; overflow: visible; }

/* Sposi peekaboo — small, bottom corners, fixed */
.sposi-peek {
  position: fixed;
  bottom: 0;
  width: 150px;
  pointer-events: none;
  z-index: 50;
}
.sposi-peek.left { left: 10px; transform-origin: bottom left; }
.sposi-peek.right { display: none; }
@media(max-width:900px){ .sposi-peek { display:none; } }

/* Sci/tennis floats in storia */
.storia-chapter-deco {
  float: right;
  width: 150px;
  margin: 0 0 0.5rem 1.5rem;
  pointer-events: none;
  shape-outside: circle(50%);
  opacity: 0.9;
}
.storia-chapter-deco.left {
  float: left;
  margin: 0 1.5rem 0.5rem 0;
  transform: scaleX(-1);
}


.shop-card.sold-out {
  opacity: 0.6;
  cursor: default;
  background: var(--champagne) !important;
}
.sold-out-badge {
  display: block;
  text-align: center;
  padding: 9px;
  background: var(--champagne-dark);
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-light);
}

@media (max-width: 768px) {
  .nav-links { display: none !important; }
}