@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root{--rose:#a84e64;--dark:#713447;--gold:#c89b55;--ink:#46343a;--muted:#806d70}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fffdfb;font-family:'DM Sans',Arial,sans-serif}
.hero{min-height:94vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;isolation:isolate;overflow:hidden;padding:48px 20px;background:#3a2929 url("images/DSC06878.jpeg") center 38%/cover no-repeat}
.hero-photo-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(30,15,20,.52),rgba(72,29,43,.32) 45%,rgba(35,19,22,.58))}
.hero-content{background:rgba(255,250,247,.58);border:1px solid rgba(255,255,255,.62);border-radius:28px;padding:clamp(25px,4vw,44px);box-shadow:0 18px 60px rgba(20,8,12,.18);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
.hero:before,.hero:after{content:"";position:absolute;width:300px;height:300px;border:1px solid #c89b554d;border-radius:50%}.hero:before{left:-190px;top:-130px}.hero:after{right:-190px;bottom:-180px;width:400px;height:400px}
.hero-content{position:relative;z-index:2;max-width:760px;width:min(100%,760px)}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:700;color:var(--rose);margin:0 0 12px}
.little-line{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--rose);font-size:1.25rem;margin:2px 0 0}
h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:500}h1{font-size:clamp(3.8rem,10vw,7.6rem);line-height:.94;margin:8px 0 20px;color:var(--dark)}h1 span{display:block;color:var(--rose);font-style:italic}
.turns{font-size:.85rem;letter-spacing:.26em;color:var(--dark);display:flex;align-items:center;justify-content:center;gap:12px}.turns:before,.turns:after{content:"";width:35px;height:1px;background:var(--gold)}.turns b{font-family:'Playfair Display',Georgia,serif;font-size:1.8rem;color:var(--gold);letter-spacing:0}
.hero-subtitle{color:#775e63;font-size:clamp(.98rem,2vw,1.16rem);line-height:1.7;max-width:510px;margin:20px auto}.created{font-size:.95rem;color:#80636a;margin:14px 0 24px}.created strong{color:var(--dark);font-family:'Playfair Display',Georgia,serif;font-size:1.25rem}
.primary-button{display:inline-flex;gap:12px;align-items:center;background:var(--rose);color:white;text-decoration:none;padding:14px 23px;border-radius:99px;font-weight:700;box-shadow:0 8px 22px #a84e6433;transition:.2s}.primary-button:hover{transform:translateY(-2px);background:var(--dark)}.date-note{font-size:.75rem;letter-spacing:.08em;color:#987d7d;margin:18px 0 0}
.cake{width:130px;height:108px;position:relative;margin:0 auto 12px;filter:drop-shadow(0 7px 5px #6e3c3c14)}.plate{position:absolute;bottom:2px;left:3px;width:124px;height:9px;border-radius:50%;background:#d9b777;border:2px solid #f8e0ae}.bottom{position:absolute;bottom:10px;left:13px;width:104px;height:29px;border-radius:7px 7px 12px 12px;background:linear-gradient(#e7a7ac 0 25%,#fff0e4 26% 100%);border-bottom:4px solid #d78c98}.middle{position:absolute;bottom:36px;left:18px;width:94px;height:28px;border-radius:7px;background:#fff0e5;border-bottom:5px solid #e5a0a8;display:flex;align-items:center;justify-content:center;color:var(--rose);font-size:12px}.icing{position:absolute;bottom:61px;left:23px;width:84px;height:13px;border-radius:50%;background:#fff7ed;border:2px solid #edc3c0}.candle{position:absolute;z-index:2;left:62px;bottom:73px;width:7px;height:25px;border-radius:3px;background:repeating-linear-gradient(135deg,#d4a34f 0 4px,#fff2c9 4px 8px)}.flame{position:absolute;z-index:3;top:1px;left:61px;width:9px;height:13px;background:#efa84e;border-radius:80% 10% 80% 20%;transform:rotate(-20deg);box-shadow:0 0 14px #f4c66f}
.flower,.sparkle,.corner{position:absolute;pointer-events:none;color:#a84e6445}.flower{font-size:4rem}.f1{top:10%;left:8%;transform:rotate(-20deg)}.f2{top:18%;right:8%;font-size:5rem}.f3{bottom:10%;left:13%;font-size:3rem}.sparkle{color:var(--gold);font-size:2rem}.s1{top:27%;left:19%}.corner{font-size:8rem;color:#a84e6421;bottom:-25px}.c1{left:-30px}.c2{right:-30px}
.floral-rule{color:var(--gold);letter-spacing:.15em;margin:20px auto}.intro{text-align:center;max-width:730px;padding:70px 22px 28px;margin:auto}.intro h2,.gallery-heading h2{font-size:clamp(2rem,4vw,3.1rem);margin:10px 0;color:var(--dark)}.intro p:not(.eyebrow){color:var(--muted);line-height:1.9}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:22px}.filter{border:1px solid #e6cfd0;border-radius:99px;padding:10px 17px;background:transparent;color:#704c56;cursor:pointer;font:inherit}.filter.active,.filter:hover{background:var(--rose);color:white;border-color:var(--rose)}
.gallery-section{max-width:1500px;padding:18px 22px 78px;margin:auto}.gallery-heading{text-align:center;margin:15px 0 30px}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.photo-card{margin:0;position:relative;overflow:hidden;border-radius:7px;background:#f5e9e5;cursor:zoom-in;aspect-ratio:3/4;box-shadow:0 5px 18px #5c343a12}.photo-card img{display:block;width:100%;height:100%;object-fit:contain;background:#f5e9e5;transition:transform .25s;image-rendering:auto}.photo-card:hover img{transform:scale(1.035)}.photo-card figcaption{position:absolute;inset:auto 0 0;padding:28px 13px 12px;color:white;font-size:.8rem;background:linear-gradient(transparent,#2d141da6);opacity:0;transition:opacity .2s}.photo-card:hover figcaption{opacity:1}.empty-message{color:var(--muted);text-align:center;padding:35px 15px;line-height:1.7}
footer{background:linear-gradient(120deg,#713447,#93495c);color:#fff;text-align:center;padding:34px 20px}footer p{margin:5px}footer span,.footer-flower{color:#f3d39a}.footer-small{color:#ffffffbf;font-size:.84rem}.footer-flower{font-size:1.6rem;letter-spacing:.4em;margin-bottom:12px}
.lightbox{display:none;position:fixed;inset:0;z-index:1000;background:#160a0ff5;align-items:center;justify-content:center;padding:56px 60px}.lightbox.open{display:flex}.lightbox figure{margin:0;text-align:center;max-width:100%;max-height:100%}.lightbox img{display:block;max-width:min(82vw,1100px);max-height:78vh;object-fit:contain;margin:auto}.lightbox figcaption{color:#fff0e9;margin-top:12px;font-size:.85rem}.lightbox-close,.lightbox-nav{position:absolute;border:0;color:white;background:#ffffff1f;cursor:pointer;display:grid;place-items:center;border-radius:50%}.lightbox-close{top:16px;right:18px;width:44px;height:44px;font-size:2rem}.lightbox-nav{top:50%;transform:translateY(-50%);width:46px;height:58px;font-size:2.5rem;border-radius:8px}.lightbox-nav.prev{left:12px}.lightbox-nav.next{right:12px}
@media(max-width:900px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{min-height:84vh}}
@media(max-width:560px){.hero{min-height:88vh;padding:45px 17px}.f1{left:2%;top:6%;font-size:2.6rem}.f2{right:2%;top:12%;font-size:3rem}.f3{left:4%;bottom:5%}.s1{left:7%;top:30%}.corner{font-size:5rem}.intro{padding-top:48px}.gallery-section{padding:12px 10px 50px}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.photo-card{border-radius:4px}.filters{gap:7px;padding:16px 10px}.filter{padding:9px 12px;font-size:.85rem}.lightbox{padding:54px 8px}.lightbox img{max-width:94vw;max-height:76vh}.lightbox-nav{width:34px;height:48px;font-size:2rem}.lightbox-nav.prev{left:4px}.lightbox-nav.next{right:4px}}

/* Improved gallery clarity and hero photo background */
@media(max-width:560px){
  .hero{min-height:90svh;background-position:center 35%;padding:28px 13px}
  .hero-content{padding:25px 17px;border-radius:22px}
  h1{font-size:clamp(3.1rem,14vw,4.8rem)}
  .hero-subtitle{line-height:1.55}
  .photo-card img{object-fit:contain}
}


/* Transparent birthday card: let Zahra's portrait show through while keeping text readable */
.hero-photo-shade{background:linear-gradient(135deg,rgba(30,15,20,.30),rgba(72,29,43,.16) 45%,rgba(35,19,22,.32))}
.hero-content{background:rgba(255,250,247,.58)}
@media(max-width:560px){.hero-content{background:rgba(255,250,247,.55);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}}


/* Final portrait-first refinement: reveal more of Zahra's face on desktop and mobile */
.hero-photo-shade{background:linear-gradient(135deg,rgba(30,15,20,.20),rgba(72,29,43,.10) 45%,rgba(35,19,22,.23))}
.hero-content{
  background:rgba(255,250,247,.36);
  border-color:rgba(255,255,255,.48);
  backdrop-filter:blur(.5px);
  -webkit-backdrop-filter:blur(.5px);
  transform:translateY(-3vh);
}
.hero-content .eyebrow,.hero-content .little-line,.hero-content h1,.hero-content .turns,
.hero-content .hero-subtitle,.hero-content .created,.hero-content .date-note{
  text-shadow:0 1px 3px rgba(255,250,247,.58);
}
@media(max-width:560px){
  .hero{min-height:90svh;background-position:center 28%;padding:20px 12px}
  .hero-content{padding:19px 14px;border-radius:20px;transform:translateY(-1.5vh);background:rgba(255,250,247,.39)}
  .hero-content .eyebrow{font-size:.62rem;letter-spacing:.15em;margin-bottom:8px}
  .little-line{font-size:1.12rem}
  h1{font-size:clamp(2.85rem,12.5vw,4.25rem);margin:5px 0 12px}
  .turns{gap:8px;font-size:.76rem}
  .turns b{font-size:1.55rem}
  .hero-subtitle{font-size:.93rem;line-height:1.45;margin:13px auto}
  .floral-rule{margin:12px auto}
  .created{margin:10px 0 16px;font-size:.88rem}
  .primary-button{padding:12px 18px}
  .date-note{margin-top:13px;font-size:.68rem}
}


/* Final balance: a readable ivory glass card with Zahra's portrait still visible */
.hero-photo-shade{
  background:linear-gradient(135deg,rgba(30,15,20,.30),rgba(72,29,43,.17) 48%,rgba(35,19,22,.34));
}
.hero-content{
  background:rgba(255,250,247,.78);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 18px 60px rgba(20,8,12,.22);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transform:translateY(-2vh);
}
.hero-content .eyebrow,.hero-content .little-line,.hero-content h1,.hero-content .turns,
.hero-content .hero-subtitle,.hero-content .created,.hero-content .date-note{
  text-shadow:none;
}
@media(max-width:560px){
  .hero{
    min-height:90svh;
    background-position:center 28%;
    padding:18px 12px;
  }
  .hero-content{
    width:100%;
    padding:18px 14px;
    border-radius:20px;
    background:rgba(255,250,247,.76);
    transform:translateY(-1vh);
  }
  .hero-content .eyebrow{font-size:.61rem;letter-spacing:.13em;margin-bottom:7px}
  .little-line{font-size:1.08rem}
  h1{font-size:clamp(2.8rem,12vw,4.1rem);margin:4px 0 10px}
  .turns{gap:7px;font-size:.72rem}
  .turns b{font-size:1.48rem}
  .hero-subtitle{font-size:.91rem;line-height:1.42;margin:11px auto}
  .floral-rule{margin:10px auto}
  .created{margin:9px 0 13px;font-size:.86rem}
  .primary-button{padding:11px 16px}
  .date-note{margin-top:10px;font-size:.66rem}
}