:root {
  --dm-bg: #070717;
  --dm-panel: #101027;
  --dm-text: #f8f4ff;
  --dm-muted: #aaa4ba;
  --dm-cyan: #52eaff;
  --dm-magenta: #ff47cf;
  --dm-violet: #ad71ff;
}

body.page-magazines { background: var(--dm-bg); }

.df-magazines {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 6%, rgba(50, 217, 255, .10), transparent 25rem),
    radial-gradient(circle at 8% 24%, rgba(192, 45, 255, .12), transparent 32rem),
    var(--dm-bg);
  color: var(--dm-text);
  font-family: "Cairo", "Tajawal", Arial, sans-serif;
}

.df-magazines *, .df-magazines *::before, .df-magazines *::after { box-sizing: border-box; }

.df-magazines__hero {
  min-height: min(76vh, 820px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.35rem;
  padding: clamp(7rem, 11vw, 11rem) 1.5rem 6rem;
  text-align: center;
  position: relative;
  isolation: isolate;
}

.df-magazines__hero::before {
  content: "D";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -51%;
  z-index: -1;
  font: italic 900 clamp(20rem, 48vw, 42rem)/.8 Arial, sans-serif;
  color: transparent;
  -webkit-text-stroke: 1px rgba(104, 226, 255, .09);
  filter: drop-shadow(0 0 30px rgba(194, 45, 255, .12));
}

.df-magazines__eyebrow,
.df-magazines__section-head p,
.df-magazines__promise > div > p {
  margin: 0;
  color: var(--dm-cyan);
  letter-spacing: .2em;
  font-size: .76rem;
  font-weight: 800;
}

.df-magazines__hero h1 {
  margin: 0;
  font: italic 900 clamp(4.3rem, 13vw, 10rem)/.86 Arial, sans-serif;
  letter-spacing: -.075em;
  text-shadow: 0 0 18px rgba(85, 231, 255, .45), 0 0 48px rgba(204, 43, 255, .35);
}

.df-magazines__hero h1 span { color: var(--dm-cyan); }

.df-magazines__lead {
  width: min(760px, 100%);
  margin: .5rem auto 0;
  color: #ded8e8;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 2;
}

.df-magazines__primary {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: .9rem;
  padding: .85rem 1.3rem;
  border: 1px solid rgba(82, 234, 255, .7);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  background: rgba(14, 14, 40, .58);
  box-shadow: 0 0 24px rgba(82, 234, 255, .12);
  transition: .25s ease;
}

.df-magazines__primary:hover { translate: 0 -3px; box-shadow: 0 0 28px rgba(82, 234, 255, .35); color: #fff; }

.df-magazines__archive { width: min(1380px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 8rem; }

.df-magazines__section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.df-magazines__section-head h2 { margin: .55rem 0 0; font-size: clamp(1.7rem, 4vw, 3.2rem); line-height: 1.3; }
.df-magazines__section-head > span { color: var(--dm-magenta); font: 800 1rem/1 Arial, sans-serif; letter-spacing: .15em; }

.df-magazines__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); }

.df-issue {
  position: relative;
  min-width: 0;
  padding: .65rem;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(25, 22, 53, .86), rgba(9, 9, 27, .92));
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.df-issue:hover { transform: translateY(-7px); border-color: rgba(82, 234, 255, .42); box-shadow: 0 18px 50px rgba(0, 0, 0, .32); }
.df-issue.is-live { border-color: rgba(255, 71, 207, .46); box-shadow: 0 0 0 1px rgba(82, 234, 255, .08), 0 16px 60px rgba(164, 40, 255, .15); }

.df-issue__number { position: absolute; left: 1.1rem; top: 1rem; z-index: 4; font: 900 1.7rem/1 Arial, sans-serif; color: #fff; text-shadow: 0 0 16px #000; }
.df-issue__cover { position: relative; aspect-ratio: 1 / 1.414; overflow: hidden; border-radius: .9rem; background: #0a0920; }
.df-issue__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .5s ease; }
.df-issue:hover .df-issue__cover img { transform: scale(1.025); filter: saturate(1.08); }

.df-issue__status { position: absolute; right: .75rem; bottom: .75rem; padding: .45rem .75rem; border-radius: 999px; color: #fff; background: rgba(7, 7, 24, .78); border: 1px solid rgba(82, 234, 255, .48); font-size: .72rem; font-weight: 800; backdrop-filter: blur(12px); }

.df-issue__placeholder { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:.9rem; background:radial-gradient(circle at 50% 36%,rgba(187,51,255,.16),transparent 35%),linear-gradient(145deg,#12122d,#090919); }
.df-issue__placeholder strong { font:italic 900 clamp(4rem,8vw,7rem)/1 Arial,sans-serif; color:transparent; -webkit-text-stroke:1px rgba(82,234,255,.32); text-shadow:0 0 26px rgba(210,50,255,.20); }
.df-issue__placeholder i { display:block; width:5rem; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent); }
.df-issue__placeholder i:nth-of-type(2){width:7rem}.df-issue__placeholder i:nth-of-type(3){width:3.5rem}

.df-issue__meta { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:1rem .35rem .45rem; }
.df-issue__meta p { margin:0 0 .35rem; color:var(--dm-muted); font-size:.72rem; }
.df-issue__meta h3 { margin:0; color:#fff; font-size:1.05rem; line-height:1.45; }
.df-issue__meta a { flex:0 0 auto; color:var(--dm-cyan); text-decoration:none; font-weight:800; font-size:.78rem; white-space:nowrap; }
.df-issue__read { flex:0 0 auto; appearance:none; padding:0; border:0; color:var(--dm-cyan); background:transparent; font:800 .78rem/1.5 inherit; white-space:nowrap; cursor:pointer; }
.df-issue__read:hover,.df-issue__read:focus-visible { color:#fff; text-shadow:0 0 14px rgba(82,234,255,.75); }
.df-issue__soon { color:#817a91; font-size:.75rem; white-space:nowrap; }

body.df-flip-open { overflow:hidden; }
body.df-flip-open .df-magazines { overflow:visible; }
.df-flip[hidden] { display:none; }
.df-flip { position:fixed; inset:0; z-index:999999; display:grid; place-items:center; padding:clamp(.6rem,2vw,1.5rem); }
.df-flip__backdrop { position:absolute; inset:0; background:rgba(2,2,12,.91); backdrop-filter:blur(14px); }
.df-flip__panel { position:relative; width:min(980px,100%); height:min(94vh,980px); display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:1rem; padding:clamp(.8rem,2vw,1.3rem); overflow:hidden; border:1px solid rgba(82,234,255,.35); border-radius:1.5rem; background:linear-gradient(145deg,#11112e,#070718 70%); box-shadow:0 30px 100px rgba(0,0,0,.7),0 0 55px rgba(174,50,255,.15); color:#fff; }
.df-flip__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.df-flip__header small { display:block; color:var(--dm-cyan); font:800 .68rem/1.3 Arial,sans-serif; letter-spacing:.14em; }
.df-flip__header h2 { margin:.25rem 0 0; color:#fff; font-size:clamp(1rem,2.4vw,1.5rem); }
.df-flip__actions { display:flex; align-items:center; gap:.55rem; }
.df-flip__actions a,.df-flip__actions button,.df-flip__controls button { display:inline-grid; place-items:center; min-height:2.5rem; border:1px solid rgba(82,234,255,.36); border-radius:999px; color:#fff; background:rgba(255,255,255,.06); text-decoration:none; font:800 .78rem/1 inherit; cursor:pointer; }
.df-flip__actions a { padding:.2rem .9rem; }
.df-flip__actions button { width:2.5rem; padding:0; font-size:1.55rem; }
.df-flip__book { min-height:0; display:grid; place-items:center; perspective:1800px; overflow:hidden; }
.df-flip__pages { width:auto; height:100%; max-width:100%; justify-self:center; aspect-ratio:745 / 1053; display:grid; place-items:center; transform-origin:right center; transform-style:preserve-3d; overflow:hidden; border-radius:.55rem; background:#fff; box-shadow:0 22px 55px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12); }
.df-flip__pages img { display:block; width:100%; height:100%; max-height:100%; object-fit:contain; border-radius:.45rem; user-select:none; }
.df-flip__book.is-turning-next .df-flip__pages { animation:df-page-next .33s ease-in-out both; }
.df-flip__book.is-turning-prev .df-flip__pages { animation:df-page-prev .33s ease-in-out both; }
.df-flip__controls { display:flex; align-items:center; justify-content:center; gap:1rem; }
.df-flip__controls button { min-width:5.8rem; padding:.2rem 1rem; }
.df-flip__controls button:hover:not(:disabled),.df-flip__actions a:hover,.df-flip__actions button:hover { border-color:var(--dm-cyan); background:rgba(82,234,255,.12); }
.df-flip__controls button:disabled { opacity:.35; cursor:not-allowed; }
.df-flip__controls span { min-width:4.5rem; text-align:center; color:#d9d5e2; font:800 .84rem/1 Arial,sans-serif; direction:ltr; }
@keyframes df-page-next { 0%{transform:rotateY(0);opacity:1} 48%{transform:rotateY(-78deg);opacity:.25} 52%{transform:rotateY(78deg);opacity:.25} 100%{transform:rotateY(0);opacity:1} }
@keyframes df-page-prev { 0%{transform:rotateY(0);opacity:1} 48%{transform:rotateY(78deg);opacity:.25} 52%{transform:rotateY(-78deg);opacity:.25} 100%{transform:rotateY(0);opacity:1} }

.df-magazines__promise { width:min(1180px,calc(100% - 2rem)); margin:0 auto; padding:clamp(1.5rem,4vw,3rem); display:grid; grid-template-columns:auto 1fr 1fr; align-items:center; gap:2rem; border:1px solid rgba(82,234,255,.26); border-radius:2rem; background:linear-gradient(110deg,rgba(29,17,56,.92),rgba(9,10,30,.92)); box-shadow:0 0 55px rgba(180,42,255,.10); }
.df-magazines__promise > span { color:var(--dm-magenta); font-size:3.5rem; text-shadow:0 0 20px var(--dm-magenta); }
.df-magazines__promise h2 { margin:.55rem 0 0; font-size:clamp(1.4rem,3vw,2.25rem); line-height:1.35; }
.df-magazines__promise > p { margin:0; color:#c9c2d4; line-height:1.9; }

.df-magazines__orb { position:absolute; width:18rem; height:18rem; border-radius:50%; filter:blur(90px); opacity:.16; z-index:-1; }
.df-magazines__orb--one { top:20%; right:8%; background:var(--dm-cyan); }
.df-magazines__orb--two { bottom:12%; left:7%; background:var(--dm-magenta); }

@media (max-width: 1050px) { .df-magazines__grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .df-magazines__hero { min-height:620px; padding-top:7.5rem; }
  .df-magazines__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .df-magazines__promise { grid-template-columns:auto 1fr; }
  .df-magazines__promise > p { grid-column:1 / -1; }
}
@media (max-width: 480px) {
  .df-magazines__archive { width:min(100% - 1rem,1380px); }
  .df-magazines__grid { gap:.7rem; }
  .df-issue { padding:.38rem; border-radius:.85rem; }
  .df-issue__cover { border-radius:.62rem; }
  .df-issue__number { top:.72rem; left:.72rem; font-size:1.15rem; }
  .df-issue__status { right:.45rem; bottom:.45rem; padding:.35rem .55rem; }
  .df-issue__meta { display:block; padding:.75rem .2rem .25rem; }
  .df-issue__meta a,.df-issue__read,.df-issue__soon { display:inline-block; margin-top:.6rem; }
  .df-magazines__section-head { align-items:start; }
  .df-flip__panel { height:96vh; border-radius:1rem; }
  .df-flip__header small { display:none; }
  .df-flip__controls { gap:.55rem; }
  .df-flip__controls button { min-width:4.8rem; }
}

@media (prefers-reduced-motion: reduce) { .df-magazines * { transition:none !important; animation:none !important; } }