@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,600&display=swap');

.ypg-section{
  --ypg-black:#050505;
  --ypg-card:#0d0d0c;
  --ypg-card-2:#12110f;
  --ypg-paper:#f3efe5;
  --ypg-soft:rgba(243,239,229,.66);
  --ypg-muted:rgba(243,239,229,.46);
  --ypg-line:rgba(243,239,229,.13);
  --ypg-line-strong:rgba(216,200,171,.38);
  --ypg-gold:#d8c8ab;
  --ypg-gold-2:#b69054;
  --ypg-display:"Bodoni Moda","Times New Roman",Georgia,serif;
  --ypg-font:"Aptos","Segoe UI",Arial,sans-serif;
  --ypg-ease:cubic-bezier(.18,.86,.28,1);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(62px,7vw,108px) 0;
  color:var(--ypg-paper);
  background:
    radial-gradient(circle at 10% 8%,rgba(216,200,171,.09),transparent 31rem),
    radial-gradient(circle at 88% 58%,rgba(135,148,137,.07),transparent 28rem),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 34%),
    var(--ypg-black);
  font-family:var(--ypg-font);
  box-sizing:border-box;
}
.ypg-section *{box-sizing:border-box;}
.ypg-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(90deg,transparent calc(100% - 1px),rgba(243,239,229,.07) calc(100% - 1px)),
    linear-gradient(180deg,transparent calc(100% - 1px),rgba(243,239,229,.045) calc(100% - 1px));
  background-size:120px 100%,100% 120px;
  mask-image:linear-gradient(90deg,#000,transparent 72%);
}
.ypg-shell{
  width:min(80%,1280px);
  margin-inline:auto;
}
.ypg-layout{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(380px,.98fr);
  gap:clamp(42px,5.6vw,82px);
  align-items:center;
}

.ypg-gallery{min-width:0;}
.ypg-stage{
  --mx:50%;
  --my:50%;
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
  border:1px solid var(--ypg-line);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),transparent 36%),
    linear-gradient(180deg,#11110f,#070707);
  box-shadow:0 34px 100px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035);
}
.ypg-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 54%,rgba(5,5,5,.74)),
    linear-gradient(135deg,rgba(216,200,171,.08),transparent 44%);
  opacity:.72;
}
.ypg-main-link{
  position:absolute;
  inset:0;
  display:block;
  cursor:zoom-in;
  text-decoration:none!important;
}
.ypg-main-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform-origin:var(--mx) var(--my);
  transform:scale(1.001);
  filter:brightness(.9) contrast(1.05) saturate(.9);
  transition:transform .75s var(--ypg-ease),filter .55s ease,opacity .24s ease;
}
.ypg-stage:hover .ypg-main-img{
  transform:scale(1.08);
  filter:brightness(1) contrast(1.07) saturate(.96);
}
.ypg-fit-contain .ypg-main-img{
  object-fit:contain;
  padding:clamp(18px,3vw,34px);
  background:radial-gradient(circle at center,rgba(255,255,255,.035),transparent 62%);
}
.ypg-zoom-mark{
  position:absolute;
  z-index:5;
  top:18px;
  right:18px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(216,200,171,.35);
  border-radius:999px;
  color:#efe4cf;
  background:rgba(5,5,5,.52);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-size:20px;
  line-height:1;
  opacity:.86;
  transition:transform .25s var(--ypg-ease),border-color .25s ease,background .25s ease;
}
.ypg-stage:hover .ypg-zoom-mark{transform:scale(1.05);border-color:rgba(216,200,171,.72);background:rgba(5,5,5,.72);}
.ypg-photo-caption{
  position:absolute;
  z-index:4;
  left:22px;
  right:92px;
  bottom:20px;
  color:rgba(243,239,229,.78);
  font-size:12px;
  font-weight:700;
  letter-spacing:.11em;
  line-height:1.45;
  text-transform:uppercase;
}
.ypg-nav{
  position:absolute;
  z-index:7;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:42px;
  height:58px;
  border:1px solid rgba(243,239,229,.14);
  color:#f2eadc;
  background:rgba(5,5,5,.46);
  cursor:pointer;
  font-size:32px;
  line-height:1;
  transition:background .22s ease,border-color .22s ease,transform .22s var(--ypg-ease),opacity .22s ease;
  opacity:.75;
}
.ypg-prev{left:14px;border-radius:999px 7px 7px 999px;}
.ypg-next{right:14px;border-radius:7px 999px 999px 7px;}
.ypg-nav:hover{background:rgba(15,14,12,.88);border-color:rgba(216,200,171,.55);opacity:1;}
.ypg-prev:hover{transform:translate(-2px,-50%);}
.ypg-next:hover{transform:translate(2px,-50%);}
.ypg-thumbs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.ypg-thumb{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
  padding:0;
  border:1px solid rgba(243,239,229,.12);
  border-radius:9px;
  background:#0a0a09;
  cursor:pointer;
  opacity:.62;
  transition:opacity .25s ease,transform .25s var(--ypg-ease),border-color .25s ease,box-shadow .25s ease;
}
.ypg-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:brightness(.84) saturate(.86);
  transition:transform .35s var(--ypg-ease),filter .25s ease;
}
.ypg-fit-contain .ypg-thumb img{object-fit:contain;padding:7px;}
.ypg-thumb:hover,.ypg-thumb.is-active{opacity:1;border-color:rgba(216,200,171,.66);transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.28);}
.ypg-thumb:hover img,.ypg-thumb.is-active img{filter:brightness(1) saturate(.96);transform:scale(1.04);}

.ypg-content{
  min-width:0;
  padding:clamp(24px,3.2vw,44px);
  border:1px solid rgba(243,239,229,.13);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.05),transparent 34%),
    rgba(12,12,11,.78);
  box-shadow:0 28px 90px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.ypg-kicker{
  margin:0 0 16px;
  color:var(--ypg-gold);
  font-size:11px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ypg-title{
  margin:0;
  max-width:690px;
  font-family:var(--ypg-display);
  font-size:clamp(42px,4.4vw,72px);
  font-weight:500;
  line-height:1.01;
  letter-spacing:-.035em;
  background:linear-gradient(180deg,#f7f4ed 0%,#f0ebe1 72%,#d8c8ab 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 10px 32px rgba(0,0,0,.48),0 2px 8px rgba(0,0,0,.24);
  text-wrap:balance;
}
.ypg-description{
  max-width:660px;
  margin-top:22px;
  color:var(--ypg-soft);
  font-size:15px;
  line-height:1.78;
}
.ypg-description > *:first-child{margin-top:0;}
.ypg-description > *:last-child{margin-bottom:0;}
.ypg-category{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  margin-top:20px;
  padding:0 11px;
  border:1px solid rgba(216,200,171,.28);
  border-radius:999px;
  color:rgba(239,220,178,.88)!important;
  background:rgba(216,200,171,.055);
  font-size:11px;
  font-weight:760;
  letter-spacing:.08em;
  text-decoration:none!important;
  transition:border-color .22s ease,background .22s ease,color .22s ease;
}
.ypg-category:hover{border-color:rgba(216,200,171,.62);background:rgba(216,200,171,.095);color:#fff4dc!important;}
.ypg-features{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:25px;
}
.ypg-features span{
  display:inline-flex;
  align-items:center;
  min-height:35px;
  padding:0 12px;
  border:1px solid rgba(243,239,229,.11);
  border-radius:7px;
  color:rgba(243,239,229,.68);
  background:rgba(255,255,255,.028);
  font-size:12px;
  line-height:1.3;
}
.ypg-details{
  overflow:hidden;
  margin-top:26px;
  border:1px solid rgba(243,239,229,.11);
  border-radius:10px;
  background:rgba(5,5,5,.28);
}
.ypg-detail-row{
  display:grid;
  grid-template-columns:minmax(118px,.34fr) minmax(0,1fr);
  gap:20px;
  align-items:center;
  min-height:52px;
  padding:15px 18px;
  border-bottom:1px solid rgba(243,239,229,.09);
}
.ypg-detail-row:last-child{border-bottom:0;}
.ypg-detail-row strong{
  color:rgba(216,200,171,.82);
  font-size:10px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.ypg-detail-row span{
  color:rgba(243,239,229,.72);
  font-size:13px;
  line-height:1.6;
}
.ypg-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.ypg-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 22px;
  border-radius:8px;
  font-size:13px;
  font-weight:760;
  letter-spacing:.02em;
  text-decoration:none!important;
  transition:transform .22s var(--ypg-ease),filter .22s ease,border-color .22s ease,background .22s ease,color .22s ease;
}
.ypg-button:hover{transform:translateY(-2px);}
.ypg-button-primary{
  border:1px solid rgba(216,200,171,.74);
  color:#080705!important;
  background:linear-gradient(135deg,#f3dca9,#c59a53 54%,#8d662d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 18px 46px rgba(214,181,109,.18);
}
.ypg-button-primary:hover{filter:brightness(1.08);color:#050505!important;}
.ypg-button-secondary{
  border:1px solid rgba(243,239,229,.16);
  color:rgba(243,239,229,.82)!important;
  background:rgba(255,255,255,.025);
}
.ypg-button-secondary:hover{border-color:rgba(216,200,171,.44);background:rgba(216,200,171,.06);color:#fff!important;}
.ypg-note{
  margin:20px 0 0;
  color:var(--ypg-muted);
  font-size:12px;
  line-height:1.65;
}

.ypg-lightbox{
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  padding:clamp(28px,4vw,58px);
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease,visibility .24s ease;
}
.ypg-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto;}
body.ypg-lightbox-open{overflow:hidden;}
.ypg-lightbox-img{
  max-width:min(92vw,1320px);
  max-height:78vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border:1px solid rgba(216,200,171,.26);
  border-radius:8px;
  background:#080808;
  box-shadow:0 34px 120px rgba(0,0,0,.72);
}
.ypg-lightbox-caption{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  max-width:min(88vw,920px);
  margin:0;
  color:rgba(243,239,229,.72);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
}
.ypg-lightbox-close,.ypg-lightbox-arrow{
  position:fixed;
  z-index:2;
  display:grid;
  place-items:center;
  border:1px solid rgba(243,239,229,.16);
  color:#f5eee2;
  background:rgba(10,10,10,.56);
  cursor:pointer;
  transition:background .22s ease,border-color .22s ease,transform .22s var(--ypg-ease);
}
.ypg-lightbox-close{top:24px;right:24px;width:48px;height:48px;border-radius:999px;font-size:30px;line-height:1;}
.ypg-lightbox-arrow{top:50%;width:54px;height:76px;font-size:42px;line-height:1;transform:translateY(-50%);}
.ypg-lightbox-prev{left:24px;border-radius:999px 8px 8px 999px;}
.ypg-lightbox-next{right:24px;border-radius:8px 999px 999px 8px;}
.ypg-lightbox-close:hover,.ypg-lightbox-arrow:hover{background:rgba(20,18,15,.92);border-color:rgba(216,200,171,.58);}
.ypg-lightbox-prev:hover{transform:translate(-2px,-50%);}
.ypg-lightbox-next:hover{transform:translate(2px,-50%);}
.ypg-lightbox-close:hover{transform:scale(1.04);}

@media (max-width:1180px){
  .ypg-shell{width:min(90%,1180px);}
  .ypg-layout{grid-template-columns:1fr;gap:34px;}
  .ypg-content{order:2;}
  .ypg-gallery{order:1;}
  .ypg-stage{aspect-ratio:16/10;}
}
@media (max-width:767px){
  .ypg-section{padding:52px 0;}
  .ypg-shell{width:min(calc(100% - 28px),720px);}
  .ypg-stage{border-radius:10px;aspect-ratio:1/1;}
  .ypg-title{font-size:clamp(36px,10.5vw,50px);line-height:1.04;}
  .ypg-content{padding:22px;border-radius:10px;}
  .ypg-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
  .ypg-nav{width:36px;height:50px;font-size:28px;}
  .ypg-prev{left:9px;}.ypg-next{right:9px;}
  .ypg-photo-caption{left:16px;right:68px;bottom:15px;font-size:10px;}
  .ypg-zoom-mark{top:13px;right:13px;width:38px;height:38px;font-size:18px;}
  .ypg-detail-row{grid-template-columns:1fr;gap:6px;padding:14px 15px;}
  .ypg-actions{flex-direction:column;}
  .ypg-button{width:100%;}
  .ypg-lightbox{padding:18px;}
  .ypg-lightbox-img{max-width:92vw;max-height:72vh;}
  .ypg-lightbox-close{top:14px;right:14px;width:42px;height:42px;font-size:27px;}
  .ypg-lightbox-arrow{width:42px;height:60px;font-size:34px;}
  .ypg-lightbox-prev{left:10px;}.ypg-lightbox-next{right:10px;}
  .ypg-lightbox-caption{bottom:17px;font-size:10px;}
}