/* ===== Dehn Al Oud — advertisement (1080-design-px grid) ===== */
@font-face{font-family:'Amiri';src:url('fonts/Amiri-Regular.ttf') format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'Amiri';src:url('fonts/Amiri-Bold.ttf') format('truetype');font-weight:700;font-display:block}
@font-face{font-family:'ArefRuqaa';src:url('fonts/ArefRuqaa-Regular.ttf') format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'ArefRuqaa';src:url('fonts/ArefRuqaa-Bold.ttf') format('truetype');font-weight:700;font-display:block}
@font-face{font-family:'ReemKufi';src:url('fonts/ReemKufi.ttf') format('truetype');font-weight:100 900;font-display:block}
@font-face{font-family:'Tajawal';src:url('fonts/Tajawal-Regular.ttf') format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'Tajawal';src:url('fonts/Tajawal-Bold.ttf') format('truetype');font-weight:700;font-display:block}
@font-face{font-family:'Cairo';src:url('fonts/Cairo.ttf') format('truetype');font-weight:100 900;font-display:block}

:root{
  --gold-1:#FBF0D2; --gold-2:#E9C87E; --gold-3:#B98A3C; --gold-4:#7E5A1E;
  --ivory:#F6EEDF; --muted:#C6B295;
}
/* 1rem = 10 design px */
html{font-size:calc(100vw / 108);}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#080706;overflow:hidden;}
body{font-family:'Cairo',sans-serif;direction:rtl;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.ad{position:relative;width:100vw;overflow:hidden;
  background:
    radial-gradient(120% 58% at 50% 4%, rgba(233,200,126,.17), transparent 62%),
    radial-gradient(95% 46% at 50% 102%, rgba(186,124,42,.22), transparent 68%),
    radial-gradient(66% 42% at 80% 26%, rgba(126,74,20,.20), transparent 72%),
    linear-gradient(180deg,#0A0908 0%, #161009 36%, #1C130B 64%, #090705 100%);
}
.frame,.frame2{position:absolute;pointer-events:none;z-index:5}
.glowtop{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(58% 24% at 50% 15%, rgba(240,205,130,.20), transparent 72%)}
.frame{inset:3.2rem;border:1px solid rgba(233,200,126,.26)}
.frame2{inset:4.1rem;border:1px solid rgba(233,200,126,.10)}

/* ===== atmosphere layers ===== */
.pattern{position:absolute;inset:0;z-index:1;opacity:.15;
  background-image:
    repeating-linear-gradient(45deg, rgba(233,200,126,.55) 0 1px, transparent 1px 7rem),
    repeating-linear-gradient(-45deg, rgba(233,200,126,.55) 0 1px, transparent 1px 7rem),
    repeating-linear-gradient(0deg, rgba(233,200,126,.30) 0 1px, transparent 1px 7rem),
    repeating-linear-gradient(90deg, rgba(233,200,126,.30) 0 1px, transparent 1px 7rem);
  -webkit-mask-image:radial-gradient(62% 52% at 50% 46%, #000 0%, transparent 76%);
  mask-image:radial-gradient(62% 52% at 50% 46%, #000 0%, transparent 76%);
}
.noise{position:absolute;inset:0;z-index:2;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{position:absolute;inset:0;z-index:3;
  background:radial-gradient(78% 60% at 50% 44%, transparent 40%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.84) 100%);
}

/* ===== content column ===== */
.content{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;width:100%;height:100%;padding:6rem 6.4rem 5.4rem;text-align:center}
.top{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.latin{font-family:'Tajawal';font-size:2rem;letter-spacing:.44em;color:rgba(233,200,126,.72);text-transform:uppercase}
.brand{font-family:'ReemKufi';font-weight:700;font-size:3.6rem;color:var(--gold-2);
  text-shadow:0 .3rem 2.4rem rgba(0,0,0,.85)}
.orn{display:flex;align-items:center;justify-content:center;gap:1.6rem;width:44rem}
.orn i{flex:1;height:1px;display:block;background:linear-gradient(90deg,transparent,var(--gold-2))}
.orn i:last-child{background:linear-gradient(270deg,transparent,var(--gold-2))}
.orn b{width:1.3rem;height:1.3rem;background:var(--gold-2);transform:rotate(45deg);
  box-shadow:0 0 1.6rem rgba(233,200,126,.85)}
h1{font-family:'ArefRuqaa';font-weight:700;font-size:15rem;line-height:1.04;letter-spacing:0;
  background:linear-gradient(178deg,#FDF6E2 2%,#EED9A6 26%,#D3A85C 62%,#C89A44 76%,#F4E4BC 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1.1rem 3.4rem rgba(0,0,0,.70);
  padding:0 .6rem;
}
.sub{font-family:'Amiri';font-size:4.2rem;line-height:1.5;color:#F3E8D1;
  text-shadow:0 .5rem 2.6rem rgba(0,0,0,.9)}

/* ===== bottle stage ===== */
.stage{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  height:54rem;width:100%}
.stage svg{height:100%;width:auto;overflow:visible;
  filter:drop-shadow(0 2.4rem 4.2rem rgba(0,0,0,.6)) drop-shadow(0 0 2.6rem rgba(233,190,110,.16))}
.halo{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:50rem;height:50rem;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, rgba(240,199,118,.34) 0%, rgba(186,116,32,.14) 46%, transparent 72%)}

/* ===== lower copy ===== */
.bottom{display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.desc{font-family:'Cairo';font-weight:300;font-size:2.6rem;line-height:1.8;
  color:rgba(246,238,223,.82);max-width:70rem}
.pills{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap}
.pill{border:1px solid rgba(233,200,126,.42);border-radius:99rem;padding:1rem 2.4rem;
  font-family:'Cairo';font-weight:400;font-size:2.25rem;color:#EAD8B2;
  background:linear-gradient(180deg,rgba(233,200,126,.11),rgba(233,200,126,.03))}
.cta{display:inline-flex;align-items:center;gap:1.5rem;padding:1.9rem 5.2rem;border-radius:.5rem;
  font-family:'Tajawal';font-weight:700;font-size:3.3rem;color:#1B1207;
  background:linear-gradient(135deg,#FBEEC8 0%,#E9C87E 42%,#C09043 78%,#F2DFAD 100%);
  box-shadow:0 1.4rem 4rem rgba(0,0,0,.55), inset 0 .1rem 0 rgba(255,255,255,.75)}
.cap-line{font-family:'Tajawal';font-size:2.2rem;letter-spacing:0;color:rgba(233,200,126,.68)}

/* ===== limited-edition seal ===== */
.f-seal{position:absolute;z-index:6;left:7.6rem;bottom:7rem;width:14.5rem;height:14.5rem;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  border:1px solid rgba(233,200,126,.52);color:var(--gold-2);
  font-family:'ReemKufi';font-size:2.1rem;line-height:1.3;transform:rotate(-7deg);
  background:radial-gradient(circle,rgba(233,200,126,.13),rgba(233,200,126,.02) 70%);
  box-shadow:0 0 2.6rem rgba(233,200,126,.16) inset}
.f-seal:after{content:"";position:absolute;inset:.75rem;border:1px dashed rgba(233,200,126,.34);border-radius:50%}
.f-seal em{font-style:normal;font-family:'Tajawal';font-size:1.5rem;color:rgba(233,200,126,.70)}

/* ===== formats ===== */
body.f-portrait .ad{height:calc(100vw * 1.25)}
body.f-square .ad{height:100vw}
body.f-story .ad{height:calc(100vw * 1.77778)}
body.f-square .content{padding:5.2rem 6rem 4rem}
body.f-square h1{font-size:12rem}
body.f-square .sub{font-size:3.6rem}
body.f-square .stage{height:42rem}
body.f-square .desc{display:none}
body.f-square .bottom{gap:1.2rem}
body.f-square .f-seal{width:12.5rem;height:12.5rem;font-size:1.8rem;left:6.6rem;bottom:6.2rem}
body.f-story .content{padding:10rem 6.4rem 9.4rem}
body.f-square .cta{padding:1.7rem 4.8rem;font-size:3.1rem}
body.f-story h1{font-size:17.4rem}
body.f-story .stage{height:66rem}
body.f-story .sub{font-size:4.8rem}
body.f-story .bottom{gap:2.1rem}
body.f-story .desc{max-width:74rem;font-size:2.8rem}
body.f-story .f-seal{width:16rem;height:16rem;font-size:2.3rem;left:8.4rem;bottom:12rem}