*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Georgia,serif;background:#2b0714;color:#7d2945}body{overflow:hidden}button{font:inherit}
.lock{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:linear-gradient(90deg,#21030dcc,#6e143477,#21030dcc),url("assets/rose-bg.jpg") center/cover}.lock-panel{width:270px;min-height:460px;border-radius:40px;padding:58px 30px;text-align:center;color:#fff;background:#4b1028a8;box-shadow:0 25px 80px #0008;backdrop-filter:blur(8px)}.tiny{font:21px "Segoe Script",cursive}.dots{height:35px;padding-top:15px}.dot{display:inline-block;width:8px;height:8px;border:1px solid #fff;border-radius:50%;margin:0 4px}.dot.on{background:#fff}.pad{display:grid;grid-template-columns:repeat(3,48px);gap:10px;justify-content:center}.pad button{width:48px;height:48px;border:1px solid #ffffff33;border-radius:50%;background:#fff2;color:white}.lock small{display:block;margin-top:24px;font-size:10px}
.intro{display:none;position:fixed;inset:0;z-index:45;background:#fff;overflow:hidden}.intro.show{display:block}#rings{position:absolute;left:50%;top:50%;width:1px;height:1px;animation:zoom 6.8s ease-in-out forwards}.ring{position:absolute;animation:spin var(--speed) linear infinite}.rose{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:url("assets/flower.png") center/cover;box-shadow:0 4px 20px #b3205966}.introText,.introFinal{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#d02661;text-shadow:0 2px 10px white}.introText{animation:firstWords 6.8s forwards}.introText span{font:28px "Segoe Script",cursive}.introText em{font:64px "Segoe Script",cursive}.introText b{font-size:28px}.introFinal{opacity:0;animation:finalWords 6.8s forwards}.introFinal small{letter-spacing:.2em}.introFinal strong{font:clamp(48px,9vw,90px) "Segoe Script",cursive}.introFinal i{font-size:28px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes zoom{0%{transform:scale(.05) rotate(-12deg)}55%{transform:scale(.65)}100%{transform:scale(1.8) rotate(15deg)}}@keyframes firstWords{0%,15%{opacity:0}25%,48%{opacity:1}58%,100%{opacity:0}}@keyframes finalWords{0%,55%{opacity:0}68%,91%{opacity:1}100%{opacity:0}}
#site{display:none;height:100vh;overflow:auto;background:#f8dfe6}header{height:54px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:#fff5f7ee;border-bottom:1px solid #d97b9533;color:#9d3152;font-size:12px;backdrop-filter:blur(10px)}header nav{color:#81505e}header button{border:0;background:none;color:#a63255}
.hero{min-height:calc(100vh - 54px);position:relative;overflow:hidden;padding:26px 2% 24px;display:grid;grid-template-columns:minmax(128px,168px) minmax(360px,1fr) minmax(230px,338px);grid-template-areas:"left center right" "left music right";align-items:start;justify-items:center;gap:18px 24px;background:linear-gradient(#ffcfdb66,#e65b7d22),url("assets/rose-bg.jpg") center/cover}.dream{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,#fff9 0 12%,transparent 42%),linear-gradient(#ffffff18,#a5143d33)}
.center{grid-area:center;position:relative;z-index:12;left:auto;right:auto;top:auto;width:min(100%,640px);margin-top:10px;text-align:center;color:#fff;text-shadow:0 3px 18px #7a1637}.center small{letter-spacing:.2em}.center h1{font:clamp(46px,6vw,76px) "Segoe Script",cursive;margin:0}.center .heart{font-size:22px}.center p{font:17px "Segoe Script",cursive;margin:14px 0 0}.mainPhoto{position:relative;width:min(420px,100%);height:390px;margin:8px auto 0;border-radius:50% 50% 35% 35%;overflow:hidden;border:8px solid #fff5;box-shadow:0 15px 45px #741c3f66}.mainPhoto>img{width:100%;height:100%;object-fit:cover}.loveOverlay{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:80%;max-width:290px;filter:drop-shadow(0 7px 12px #5b173b66)}.loveOverlay img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:22px;border:4px solid #fff;box-shadow:0 4px 16px #54122f55;background:#fff;padding:4px}.loveOverlay img+img{margin-left:0}.loveOverlay img:nth-child(1),.loveOverlay img:nth-child(2),.loveOverlay img:nth-child(3),.loveOverlay img:nth-child(4){transform:none}
.leftCards,.rightCards{position:relative;z-index:11;top:auto;left:auto;right:auto;display:grid;gap:12px;align-self:center}.leftCards{grid-area:left;justify-self:start;grid-template-columns:1fr;width:100%;max-width:160px}.rightCards{grid-area:right;justify-self:end;grid-template-columns:repeat(2,minmax(108px,1fr));width:100%;max-width:338px}figure{margin:0;width:100%;background:#fff;padding:6px 6px 24px;box-shadow:0 9px 25px #55142c66}figure img{width:100%;height:150px;object-fit:contain;background:#fff6f8;padding:4px}figcaption{text-align:center;font:14px "Segoe Script",cursive;margin-top:4px}.leftCards figure:nth-child(odd){transform:rotate(-6deg)}.leftCards figure:nth-child(even){transform:rotate(5deg)}.rightCards figure:nth-child(odd){transform:rotate(5deg)}.rightCards figure:nth-child(even){transform:rotate(-5deg)}
.musicBox{grid-area:music;position:relative;z-index:13;left:auto;bottom:auto;transform:none;width:min(720px,100%);padding:12px 16px;border:1px solid #fff5;border-radius:12px;background:#7b2440d9;color:#fff;backdrop-filter:blur(12px);align-self:end;margin-top:6px}.musicHead{display:flex;justify-content:space-between;align-items:center;font-size:11px;gap:10px;flex-wrap:wrap}.musicHead label{padding:6px 10px;border-radius:7px;background:#ffffff20;cursor:pointer}.musicHead input{display:none}.player{display:flex;align-items:center;gap:10px;margin-top:10px}.player button{border:0;background:none;color:#fff}.player div{min-width:120px;display:grid}.player strong{font-size:10px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player span{font-size:9px;opacity:.75}.player input#seek{flex:1}.player input#vol{width:70px}
.petal{position:absolute;z-index:2;top:-10%;font-size:20px;animation:fall var(--t) linear infinite;opacity:.75}@keyframes fall{to{transform:translate(90px,115vh) rotate(720deg)}}
.letter{min-height:100vh;display:grid;place-items:center;padding:40px;background:linear-gradient(#fff4f6dd,#f6d1dadd),url("assets/flower.png") center/cover fixed}.paper{max-width:680px;padding:45px;text-align:center;background:#fffaf8;box-shadow:0 18px 50px #7a27402f}.paper h2,.paper strong{font:38px "Segoe Script",cursive}.paper p{line-height:1.8}
@media(max-width:1024px){.hero{grid-template-columns:minmax(112px,146px) minmax(320px,1fr) minmax(210px,290px);gap:16px 18px}.mainPhoto{width:min(390px,100%);height:370px}.rightCards{grid-template-columns:repeat(2,minmax(96px,1fr));max-width:290px}figure img{height:132px}}
@media(max-width:850px){header nav{display:none}.hero{min-height:auto;padding:22px 4% 26px;grid-template-columns:1fr;grid-template-areas:"center" "left" "right" "music";gap:18px}.center{width:min(100%,560px);margin-top:6px}.mainPhoto{width:min(420px,84vw);height:390px}.loveOverlay{width:82%;max-width:270px}.leftCards,.rightCards{justify-self:center;max-width:min(100%,620px);width:100%;display:flex;overflow-x:auto;gap:12px;padding:4px 4px 10px;scroll-snap-type:x proximity}.leftCards figure,.rightCards figure{min-width:128px;max-width:128px;flex:0 0 128px}.leftCards figure img,.rightCards figure img{height:118px}.musicBox{width:min(100%,620px)}}
@media(max-width:600px){.hero{padding:18px 3% 20px}.center{width:100%}.center small{font-size:11px}.center h1{font-size:clamp(40px,12vw,62px);line-height:1}.mainPhoto{width:min(86vw,390px);height:370px}.loveOverlay{width:84%;max-width:250px;gap:8px}.leftCards figure,.rightCards figure{min-width:114px;max-width:114px;flex-basis:114px}.leftCards figure img,.rightCards figure img{height:100px}.musicBox{width:94vw}.player{flex-wrap:wrap}.player div{width:100%;min-width:0}.player input#seek{width:100%}.player input#vol{display:none}}
/* V3: make CHELSIE LIU clearly readable over the flowers */
.introFinal{
  z-index:20;
  padding:24px;
}
.introFinal:before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:min(680px,88vw);
  height:190px;
  transform:translate(-50%,-50%);
  border-radius:40px;
  background:radial-gradient(ellipse,#fff 0%,#fffdfde8 46%,#fff8 67%,transparent 78%);
  filter:blur(2px);
  z-index:-1;
}
.introFinal small{
  color:#9f244b;
  font-weight:700;
  letter-spacing:.24em;
  text-shadow:0 2px 10px #fff,0 0 18px #fff;
}
.introFinal strong{
  color:#c32159;
  font-weight:700;
  line-height:1.05;
  text-shadow:0 3px 0 #fff,0 0 14px #fff,0 5px 24px #821b3c55;
}
.introFinal i{color:#c32159;text-shadow:0 2px 8px #fff}

.center{
  z-index:12;
  text-shadow:0 3px 18px #5b0c29,0 0 6px #5b0c29;
}
.center:before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;top:-18px;
  width:min(610px,90vw);
  height:170px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,#65142d70 0%,#65142d32 45%,transparent 72%);
}
.center h1{
  color:#fff;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 3px 1px #9b2147,0 0 12px #4c0a21,0 0 28px #fff8;
}
.center small{
  color:#fff;
  font-weight:700;
  text-shadow:0 2px 8px #65142d,0 0 12px #65142d;
}

@media(max-width:600px){.loveOverlay img{border-width:3px;padding:3px;border-radius:18px}}


/* V7 — all photos visible, no clipping, responsive gallery */
.hero{
  min-height:auto!important;
  height:auto!important;
  overflow:visible!important;
  padding:28px 4% 34px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:22px!important;
}
.center{
  position:relative!important;
  inset:auto!important;
  width:min(100%,760px)!important;
  margin:0 auto!important;
  order:1;
}
.center:before{width:min(650px,94vw)!important}
.mainPhoto{
  width:min(430px,88vw)!important;
  height:390px!important;
  margin:10px auto 0!important;
}
.photoGallery{
  order:2;
  position:relative;
  z-index:12;
  width:min(1180px,100%);
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:16px;
  align-items:start;
  justify-content:center;
  margin:4px auto 0;
}
.photoGallery figure{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:7px 7px 25px!important;
  background:#fff!important;
  box-shadow:0 10px 28px #55142c55!important;
  transform:none!important;
  border-radius:3px;
}
.photoGallery figure:nth-child(odd){transform:rotate(-2deg)!important}
.photoGallery figure:nth-child(even){transform:rotate(2deg)!important}
.photoGallery figure img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:3/4;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff6f8!important;
  padding:3px!important;
}
.photoGallery figcaption{
  font-size:clamp(10px,1vw,14px)!important;
  white-space:normal;
  line-height:1.2;
  min-height:30px;
}
.musicBox{
  order:3;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:min(760px,96vw)!important;
  margin:4px auto 0!important;
}
@media(max-width:1200px){
  .photoGallery{grid-template-columns:repeat(4,minmax(0,1fr));max-width:880px}
  .photoGallery figure:nth-child(n+5){transform:rotate(-1deg)!important}
}
@media(max-width:850px){
  .hero{padding:22px 4% 28px!important}
  .mainPhoto{width:min(420px,86vw)!important;height:380px!important}
  .photoGallery{grid-template-columns:repeat(3,minmax(0,1fr));max-width:650px;gap:14px}
  .photoGallery figure{padding:6px 6px 23px!important}
  .photoGallery figure img{aspect-ratio:3/4}
}
@media(max-width:600px){
  .hero{padding:18px 12px 24px!important;gap:18px!important}
  .center{width:100%!important}
  .center h1{font-size:clamp(38px,12vw,58px)!important}
  .center p{font-size:15px!important;padding:0 8px}
  .mainPhoto{width:min(92vw,390px)!important;height:360px!important}
  .loveOverlay{width:86%!important;max-width:250px!important}
  .photoGallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:430px}
  .photoGallery figure{padding:6px 6px 22px!important}
  .photoGallery figure img{aspect-ratio:3/4!important}
  .photoGallery figcaption{font-size:12px!important;min-height:28px}
  .musicBox{width:100%!important}
  .musicHead{gap:8px}
  .player{flex-wrap:wrap}
  .player div{width:100%!important;min-width:0!important}
  .player input#seek{width:100%!important;flex-basis:100%}
  .player input#vol{display:none}
}
@media(max-width:380px){
  .photoGallery{grid-template-columns:1fr;max-width:250px}
  .photoGallery figure img{aspect-ratio:auto!important;max-height:none!important}
}


/* V8 — make center collage fully visible and keep all 7 photos visible in the hero */
.hero{
  min-height:auto!important;
  height:auto!important;
  overflow:visible!important;
  padding:26px 4% 28px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:16px!important;
}
.center{
  order:1;
  width:min(100%,760px)!important;
  margin:0 auto!important;
}
.mainPhoto{
  width:min(470px,92vw)!important;
  height:440px!important;
  margin:10px auto 0!important;
  border-radius:44% 44% 36% 36%/38% 38% 34% 34%!important;
  background:linear-gradient(180deg,#ffffff33,#ffd7e566)!important;
}
.mainPhoto>img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  filter:blur(4px) brightness(.75) saturate(.9);
  transform:scale(1.05);
  opacity:.7;
}
.loveOverlay{
  top:50%!important;
  bottom:auto!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  width:86%!important;
  max-width:340px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.loveOverlay img{
  width:100%!important;
  aspect-ratio:1/1!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
  padding:5px!important;
  border-radius:18px!important;
  border:4px solid #fff!important;
  box-shadow:0 10px 26px #4f102766!important;
}
.underGallery{
  order:2;
  position:relative;
  z-index:12;
  width:min(820px,100%);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:start;
  justify-content:center;
  margin:2px auto 0;
}
.underGallery figure{
  margin:0;
  width:100%;
  background:#fff;
  padding:8px 8px 26px;
  box-shadow:0 10px 28px #55142c55;
  border-radius:4px;
}
.underGallery figure:nth-child(1){transform:rotate(-3deg)}
.underGallery figure:nth-child(2){transform:rotate(1.5deg)}
.underGallery figure:nth-child(3){transform:rotate(3deg)}
.underGallery img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:contain;
  object-position:center;
  background:#fff6f8;
  padding:4px;
}
.underGallery figcaption{
  text-align:center;
  font:15px "Segoe Script",cursive;
  margin-top:5px;
  line-height:1.2;
  color:#9d3152;
}
.musicBox{
  order:3;
  width:min(760px,96vw)!important;
  margin-top:6px!important;
}
/* neutralize V7 big gallery */
.photoGallery{display:none!important}

@media(max-width:850px){
  .hero{padding:22px 4% 24px!important;gap:14px!important}
  .mainPhoto{width:min(430px,90vw)!important;height:410px!important}
  .loveOverlay{width:86%!important;max-width:320px!important;gap:10px!important}
  .underGallery{width:min(620px,100%);grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media(max-width:600px){
  .center h1{font-size:clamp(38px,12vw,58px)!important}
  .center p{font-size:15px!important;padding:0 6px}
  .mainPhoto{width:min(92vw,390px)!important;height:385px!important}
  .loveOverlay{width:87%!important;max-width:290px!important;gap:8px!important}
  .loveOverlay img{padding:4px!important;border-width:3px!important}
  .underGallery{width:100%;max-width:430px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .underGallery figure:nth-child(3){grid-column:1 / -1;max-width:210px;justify-self:center}
  .musicBox{width:100%!important}
}
@media(max-width:380px){
  .mainPhoto{height:360px!important}
  .underGallery{grid-template-columns:1fr;max-width:250px}
  .underGallery figure:nth-child(3){grid-column:auto;max-width:none}
}


/* V9 — show all 11 photos in one desktop screen, arranged neatly */
.underGallery{display:none!important}
.hero{
  min-height:calc(100vh - 54px)!important;
  box-sizing:border-box;
  display:grid!important;
  grid-template-columns:minmax(148px,170px) minmax(360px,470px) minmax(248px,320px)!important;
  grid-template-areas:"left center right" "left music right"!important;
  align-items:start!important;
  justify-content:center!important;
  gap:12px 24px!important;
  padding:18px 2.2% 18px!important;
  overflow:hidden!important;
}
.center{grid-area:center;order:unset!important;width:100%!important;align-self:start!important}
.mainPhoto{width:min(470px,100%)!important;height:360px!important;margin:6px auto 0!important}
.mainPhoto>img{filter:blur(4px) brightness(.72) saturate(.92)!important;transform:scale(1.05)!important;opacity:.72!important}
.loveOverlay{width:84%!important;max-width:324px!important;gap:10px!important}
.loveOverlay img{padding:4px!important;border-width:3px!important;border-radius:16px!important}
.center p{margin-top:10px!important;font-size:15px!important}
.memoryLeft,.memoryRight{position:relative;z-index:12}
.memoryLeft{grid-area:left;display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:165px;align-self:center}
.memoryRight{grid-area:right;display:grid;grid-template-columns:repeat(2,minmax(110px,1fr));gap:10px;width:100%;max-width:300px;align-self:center}
.memoryLeft figure,.memoryRight figure{
  margin:0;background:#fff;padding:6px 6px 22px;box-shadow:0 9px 24px #55142c55;border-radius:4px;width:100%;
}
.memoryLeft figure:nth-child(1){transform:rotate(-5deg)}
.memoryLeft figure:nth-child(2){transform:rotate(4deg)}
.memoryLeft figure:nth-child(3){transform:rotate(-3deg)}
.memoryRight figure:nth-child(1){transform:rotate(-4deg)}
.memoryRight figure:nth-child(2){transform:rotate(3deg)}
.memoryRight figure:nth-child(3){transform:rotate(2deg)}
.memoryRight figure:nth-child(4){transform:rotate(-3deg)}
.memoryLeft img,.memoryRight img{
  width:100%;height:115px;object-fit:contain;object-position:center;background:#fff6f8;padding:3px;
}
.memoryLeft figcaption,.memoryRight figcaption{
  text-align:center;font:13px "Segoe Script",cursive;margin-top:4px;line-height:1.15;color:#9d3152;
}
.musicBox{grid-area:music;order:unset!important;width:min(100%,560px)!important;margin:2px auto 0!important;padding:10px 14px!important}

@media(max-width:1100px){
  .hero{grid-template-columns:minmax(126px,150px) minmax(330px,430px) minmax(220px,280px)!important;gap:12px 18px!important}
  .mainPhoto{height:340px!important}
  .memoryRight{max-width:280px}
  .memoryLeft img,.memoryRight img{height:104px}
  .center h1{font-size:clamp(40px,5vw,62px)!important}
}
@media(max-width:860px){
  .hero{min-height:auto!important;grid-template-columns:1fr!important;grid-template-areas:"center" "left" "right" "music"!important;gap:14px!important;padding:18px 3.5% 22px!important;overflow:visible!important}
  .center{max-width:470px!important}
  .mainPhoto{width:min(92vw,430px)!important;height:370px!important}
  .memoryLeft,.memoryRight{width:min(100%,690px);max-width:min(100%,690px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;justify-self:center}
  .memoryLeft{grid-template-columns:repeat(3,minmax(0,1fr))}
  .memoryLeft img,.memoryRight img{height:110px}
  .memoryLeft figure,.memoryRight figure{transform:none!important}
  .musicBox{width:min(100%,690px)!important}
}
@media(max-width:600px){
  .hero{padding:16px 12px 20px!important}
  .center h1{font-size:clamp(34px,11vw,52px)!important}
  .mainPhoto{width:min(92vw,390px)!important;height:330px!important}
  .loveOverlay{width:84%!important;max-width:270px!important;gap:8px!important}
  .memoryLeft,.memoryRight{width:100%;max-width:420px;gap:8px}
  .memoryLeft{grid-template-columns:repeat(3,minmax(0,1fr))}
  .memoryRight{grid-template-columns:repeat(4,minmax(0,1fr))}
  .memoryLeft figure,.memoryRight figure{padding:4px 4px 18px}
  .memoryLeft img,.memoryRight img{height:72px;padding:2px}
  .memoryLeft figcaption,.memoryRight figcaption{font-size:10px}
  .musicBox{width:100%!important}
}
@media(max-width:390px){
  .mainPhoto{height:310px!important}
  .memoryLeft img,.memoryRight img{height:64px}
  .center p{font-size:14px!important}
}


/* V10 — click any of the 11 photos to zoom */
.loveOverlay img,.memoryLeft img,.memoryRight img{
  cursor:zoom-in;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.loveOverlay img:hover,.memoryLeft img:hover,.memoryRight img:hover{
  transform:scale(1.025)!important;
  filter:brightness(1.035);
  box-shadow:0 12px 30px #54122f66!important;
}
.photoLightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(27,5,15,.91);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.photoLightbox.open{display:flex}
.lightboxFrame{
  position:relative;
  margin:0;
  width:min(92vw,1050px);
  height:min(88vh,900px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  padding:16px 16px 13px;
  border-radius:22px;
  background:rgba(255,247,250,.98);
  box-shadow:0 28px 90px #0009;
  transform:none!important;
}
.lightboxFrame img{
  display:block;
  max-width:100%;
  max-height:calc(88vh - 90px);
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:14px;
  box-shadow:none!important;
  cursor:zoom-out;
}
.lightboxFrame figcaption{
  min-height:0!important;
  margin:0!important;
  padding:0 48px;
  color:#8e2d4e;
  text-align:center;
  font:16px "Segoe Script",cursive!important;
  line-height:1.25;
}
.lightboxCounter{
  position:absolute;
  right:16px;
  bottom:13px;
  padding:4px 8px;
  border-radius:999px;
  background:#9d315218;
  color:#8e2d4e;
  font:12px Arial,sans-serif;
}
.lightboxClose{
  position:fixed;
  top:max(16px,env(safe-area-inset-top));
  right:max(18px,env(safe-area-inset-right));
  z-index:10002;
  width:48px;
  height:48px;
  border:1px solid #ffffff55;
  border-radius:50%;
  background:#ffffff20;
  color:white;
  font:34px/1 Arial,sans-serif;
  cursor:pointer;
}
.lightboxNav{
  position:fixed;
  top:50%;
  z-index:10001;
  width:52px;
  height:62px;
  transform:translateY(-50%);
  border:1px solid #ffffff44;
  border-radius:16px;
  background:#ffffff1c;
  color:white;
  font:48px/1 Arial,sans-serif;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.lightboxPrev{left:max(16px,env(safe-area-inset-left))}
.lightboxNext{right:max(16px,env(safe-area-inset-right))}
.lightboxClose:hover,.lightboxNav:hover{background:#ffffff35}
body.lightbox-open{overflow:hidden!important}

@media(max-width:650px){
  .photoLightbox{padding:10px}
  .lightboxFrame{
    width:96vw;
    height:88vh;
    padding:10px 10px 12px;
    border-radius:16px;
  }
  .lightboxFrame img{max-height:calc(88vh - 72px);border-radius:10px}
  .lightboxFrame figcaption{font-size:13px!important;padding:0 35px}
  .lightboxClose{width:42px;height:42px;font-size:30px;top:10px;right:10px}
  .lightboxNav{width:40px;height:54px;font-size:38px;border-radius:12px}
  .lightboxPrev{left:8px}.lightboxNext{right:8px}
  .lightboxCounter{right:11px;bottom:10px;font-size:11px}
}