/* =========================================================
   DANANG2NITE — PHASE 40
   MOBILE MAGAZINE VIEW ONLY / PREMIUM NIGHT EDITORIAL
   Loaded only at max-width: 820px.
   PC VIEW, HOME, LIST, Places, Side Menu are untouched.
   ========================================================= */

body.page-magazine-view .site-main{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 8% 1%,rgba(118,0,52,.18),transparent 24%),
    radial-gradient(circle at 93% 9%,rgba(63,0,77,.14),transparent 26%),
    linear-gradient(180deg,#070708 0%,#080709 54%,#070708 100%);
}
body.page-magazine-view .site-main::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 auto;
  height:520px;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.011) 80px,transparent 81px),
    linear-gradient(90deg,rgba(230,37,114,.023),transparent 36%,transparent 68%,rgba(217,185,110,.018));
  mask-image:linear-gradient(to bottom,#000,transparent 100%);
}

.magazine-article{
  position:relative;
}

/* ---------- MOBILE MASTHEAD ---------- */
.magazine-masthead{
  width:calc(100% - 10px);
  margin:7px auto 0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:#0c0b0d;
  box-shadow:
    0 20px 52px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.035);
}
.magazine-masthead__grid{
  display:flex;
  flex-direction:column;
}
.magazine-masthead__media{
  order:1;
  position:relative;
  aspect-ratio:1.30/1;
  overflow:hidden;
  background:#111;
}
.magazine-masthead__media::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:
    radial-gradient(circle at 84% 13%,rgba(230,37,114,.13),transparent 32%),
    linear-gradient(90deg,rgba(62,0,26,.10),transparent 62%);
  pointer-events:none;
}
.magazine-masthead__media::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.01) 0%,rgba(0,0,0,.04) 52%,rgba(0,0,0,.42) 100%);
  box-shadow:inset 0 -1px 0 rgba(230,37,114,.20);
  pointer-events:none;
}
.magazine-masthead__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.magazine-masthead__placeholder{
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 30%,rgba(230,37,114,.09),transparent 34%),
    linear-gradient(145deg,#171519,#0c0c0d);
}
.magazine-masthead__placeholder span{
  color:transparent;
  -webkit-text-stroke:1px rgba(217,185,110,.35);
  font-size:52px;
  font-weight:950;
  letter-spacing:-4px;
  transform:skewX(-8deg);
}

.magazine-masthead__copy{
  order:2;
  position:relative;
  overflow:hidden;
  padding:23px 17px 20px;
  background:
    radial-gradient(circle at 0 0,rgba(230,37,114,.10),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(217,185,110,.045),transparent 35%),
    #0c0b0d;
}
.magazine-masthead__copy::before{
  content:"D2N";
  position:absolute;
  right:-9px;
  bottom:-14px;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.022);
  font-size:96px;
  line-height:1;
  font-weight:950;
  letter-spacing:-7px;
  transform:skewX(-8deg);
  pointer-events:none;
}
.magazine-masthead__meta{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  color:var(--gold-soft);
  font-size:5px;
  font-weight:950;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.magazine-masthead__meta::before{
  content:"DANANG2NITE";
  padding:4px 6px;
  border:1px solid rgba(217,185,110,.18);
  border-radius:999px;
  color:#d4c398;
  background:rgba(217,185,110,.035);
  font-size:5px;
  letter-spacing:.75px;
}
.magazine-masthead__meta i{
  width:18px;
  height:1px;
  background:linear-gradient(90deg,var(--pink),rgba(217,185,110,.75));
}
.magazine-masthead h1{
  position:relative;
  z-index:1;
  margin:13px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  color:#fffaf3;
  font-size:clamp(34px,10.8vw,47px);
  font-weight:700;
  line-height:.98;
  letter-spacing:-1.35px;
  text-wrap:balance;
  text-shadow:0 6px 22px rgba(0,0,0,.42);
}
.magazine-masthead__subtitle{
  position:relative;
  z-index:1;
  margin:14px 0 0;
  color:#ded5c8;
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;
  line-height:1.5;
  font-style:italic;
}
.magazine-masthead__summary{
  position:relative;
  z-index:1;
  margin:12px 0 0;
  color:#9f9891;
  font-size:10px;
  line-height:1.6;
}
.magazine-masthead__foot{
  position:relative;
  z-index:1;
  margin-top:16px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#6c6661;
  font-size:5px;
  font-weight:900;
  letter-spacing:.85px;
  text-transform:uppercase;
}
.magazine-masthead__foot span:first-child{
  color:#b49657;
}

/* ---------- READING WRAPPER ---------- */
.magazine-reading{
  width:calc(100% - 18px);
  margin:27px auto 0;
  display:block;
}
.magazine-reading__rail{
  display:none;
}
.magazine-reading__body{
  min-width:0;
}
.magazine-reading__intro{
  margin-bottom:23px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  gap:8px;
}
.magazine-reading__intro::before{
  content:"";
  width:26px;
  height:1px;
  flex:0 0 auto;
  background:linear-gradient(90deg,var(--pink),var(--gold));
}
.magazine-reading__intro span{
  color:var(--gold-soft);
  font-size:6px;
  font-weight:950;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.magazine-reading__intro strong{
  min-width:0;
  margin-inline-start:auto;
  overflow:hidden;
  color:#68615c;
  font-size:5px;
  font-weight:800;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* ---------- BODY TYPOGRAPHY ---------- */
.article-body--magazine{
  margin-top:0;
}
.article-body--magazine .block{
  margin:0;
}
.magazine-paragraph{
  margin:0 0 19px!important;
}
.magazine-paragraph p{
  margin:0;
  color:#cbc4bb;
  font-size:15px;
  line-height:1.82;
  letter-spacing:.003em;
}
.magazine-paragraph strong{
  color:#fff6e7;
  font-weight:800;
}
.magazine-paragraph a{
  color:var(--gold-soft);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.magazine-paragraph:first-child p::first-letter{
  float:left;
  margin:4px 7px -2px 0;
  color:var(--gold-soft);
  font-family:Georgia,"Times New Roman",serif;
  font-size:46px;
  line-height:.79;
  text-shadow:0 0 18px rgba(217,185,110,.12);
}

/* ---------- H2 ---------- */
.magazine-section-heading{
  position:relative;
  margin:43px 0 19px!important;
  padding-top:15px;
  display:grid;
  grid-template-columns:39px minmax(0,1fr);
  gap:10px;
  align-items:start;
  border-top:1px solid rgba(255,255,255,.07);
  scroll-margin-top:120px;
}
.magazine-section-heading:first-child{
  margin-top:0!important;
}
.magazine-section-heading::after{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:70px;
  height:1px;
  background:linear-gradient(90deg,var(--pink),var(--gold-soft));
}
.magazine-section-heading__index{
  padding-top:3px;
  color:transparent;
  -webkit-text-stroke:1px rgba(217,185,110,.66);
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px;
  font-weight:700;
  line-height:1;
  letter-spacing:-1px;
  font-style:italic;
}
.magazine-section-heading>div:last-child>span{
  display:block;
  color:#746d65;
  font-size:5px;
  font-weight:950;
  letter-spacing:.9px;
}
.magazine-section-heading h2{
  margin:4px 0 0;
  color:#f8f3ec;
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.55px;
  text-wrap:balance;
}

/* ---------- H3 ---------- */
.magazine-subheading{
  margin:29px 0 13px!important;
}
.magazine-subheading h3{
  margin:0;
  color:#eee8df;
  font-family:Georgia,"Times New Roman",serif;
  font-size:19px;
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.2px;
}
.magazine-subheading.is-numbered{
  position:relative;
  overflow:hidden;
  padding:14px 14px 14px 16px;
  border:1px solid rgba(230,37,114,.15);
  border-radius:12px;
  background:
    radial-gradient(circle at 0 50%,rgba(230,37,114,.07),transparent 42%),
    rgba(255,255,255,.012);
}
.magazine-subheading.is-numbered::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:linear-gradient(to bottom,transparent,var(--pink),transparent);
}
.magazine-subheading.is-numbered h3{
  font-size:18px!important;
}

/* ---------- LIST ---------- */
.magazine-list{
  margin:0 0 21px!important;
  padding:13px 13px 13px 15px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:12px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.019),transparent 60%),
    #0c0c0d;
}
.magazine-list ul{
  margin:0!important;
  padding-inline-start:18px!important;
  color:#d6cfc6!important;
}
.magazine-list li{
  margin:7px 0!important;
  padding-inline-start:2px;
  font-size:14px;
  line-height:1.62;
}
.magazine-list li::marker{
  color:var(--gold);
}

/* ---------- QUOTE ---------- */
.magazine-quote blockquote{
  position:relative;
  margin:25px 0;
  padding:17px 16px 16px 18px;
  overflow:hidden;
  border:1px solid rgba(230,37,114,.14);
  border-inline-start:3px solid var(--pink);
  border-radius:0 12px 12px 0;
  background:
    radial-gradient(circle at 0 0,rgba(230,37,114,.075),transparent 40%),
    rgba(255,255,255,.012);
  color:#eee8df;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.5;
}
.magazine-quote blockquote::before{
  content:"“";
  position:absolute;
  right:10px;
  top:-11px;
  color:rgba(217,185,110,.08);
  font-size:70px;
  line-height:1;
  font-family:Georgia,"Times New Roman",serif;
}

/* ---------- DIVIDER ---------- */
.magazine-divider{
  margin:35px 0!important;
  border:0!important;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,185,110,.27),rgba(230,37,114,.23),transparent);
}

/* ---------- INLINE BODY IMAGE ---------- */
.magazine-media{
  position:relative;
  margin:28px -4px!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:#0c0c0d;
  box-shadow:0 16px 38px rgba(0,0,0,.24);
}
.magazine-media::after{
  content:"D2N / VISUAL";
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:2;
  padding:4px 6px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(7,7,8,.56);
  color:#d9d0c5;
  font-size:4px;
  font-weight:900;
  letter-spacing:.8px;
  backdrop-filter:blur(8px);
}
.magazine-media img{
  width:100%;
  height:auto;
  display:block;
}

/* ---------- VIDEO ---------- */
.magazine-video{
  margin:28px 0!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:#0d0d0e;
  box-shadow:0 15px 36px rgba(0,0,0,.22);
}
.magazine-video iframe{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  display:block;
  border:0;
}

/* ---------- SPONSORED PLACE ---------- */
.magazine-sponsored{
  position:relative;
  overflow:hidden;
  margin:28px 0;
  padding:15px;
  border:1px solid rgba(217,185,110,.19);
  border-radius:13px;
  background:
    radial-gradient(circle at 0 0,rgba(217,185,110,.08),transparent 40%),
    radial-gradient(circle at 100% 100%,rgba(230,37,114,.05),transparent 38%),
    #0e0d0e;
}
.magazine-sponsored::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,var(--gold),var(--pink),transparent 84%);
}
.magazine-sponsored small{
  color:#c7aa68;
  font-size:5px;
  font-weight:950;
  letter-spacing:.85px;
  text-transform:uppercase;
}
.magazine-sponsored h3{
  margin:6px 0 0;
  color:#faf4ec;
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  line-height:1.16;
}
.magazine-sponsored p{
  margin:7px 0 0;
  color:#a8a198!important;
  font-size:9px;
  line-height:1.5;
}
.magazine-sponsored>a{
  min-height:31px;
  margin-top:10px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(217,185,110,.18);
  border-radius:999px;
  color:var(--gold-soft);
  background:rgba(217,185,110,.03);
  font-size:7px;
  font-weight:900;
  text-decoration:none;
}

/* ---------- ARTICLE END ---------- */
.magazine-article-end{
  margin-top:43px;
  padding:18px 0 47px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.magazine-article-end>div:first-child{
  display:grid;
  gap:5px;
}
.magazine-article-end span{
  color:#6b655f;
  font-size:5px;
  font-weight:900;
  letter-spacing:.85px;
}
.magazine-article-end strong{
  color:#f5efe7;
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;
  letter-spacing:.65px;
}
.magazine-article-end__actions{
  display:flex;
  gap:5px;
}
.magazine-article-end__actions a{
  min-height:30px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  display:flex;
  align-items:center;
  color:#918a83;
  background:rgba(255,255,255,.01);
  font-size:6px;
  font-weight:900;
  text-decoration:none;
}

/* ---------- SCRIPT-SAFE TYPOGRAPHY ---------- */
html[lang^="zh"] .magazine-masthead h1,
html[lang="ja"] .magazine-masthead h1,
html[lang="ko"] .magazine-masthead h1,
html[lang="th"] .magazine-masthead h1,
html[lang="hi"] .magazine-masthead h1,
html[lang="ar"] .magazine-masthead h1,
html[lang^="zh"] .magazine-masthead__subtitle,
html[lang="ja"] .magazine-masthead__subtitle,
html[lang="ko"] .magazine-masthead__subtitle,
html[lang="th"] .magazine-masthead__subtitle,
html[lang="hi"] .magazine-masthead__subtitle,
html[lang="ar"] .magazine-masthead__subtitle,
html[lang^="zh"] .magazine-section-heading h2,
html[lang="ja"] .magazine-section-heading h2,
html[lang="ko"] .magazine-section-heading h2,
html[lang="th"] .magazine-section-heading h2,
html[lang="hi"] .magazine-section-heading h2,
html[lang="ar"] .magazine-section-heading h2,
html[lang^="zh"] .magazine-subheading h3,
html[lang="ja"] .magazine-subheading h3,
html[lang="ko"] .magazine-subheading h3,
html[lang="th"] .magazine-subheading h3,
html[lang="hi"] .magazine-subheading h3,
html[lang="ar"] .magazine-subheading h3,
html[lang^="zh"] .magazine-sponsored h3,
html[lang="ja"] .magazine-sponsored h3,
html[lang="ko"] .magazine-sponsored h3,
html[lang="th"] .magazine-sponsored h3,
html[lang="hi"] .magazine-sponsored h3,
html[lang="ar"] .magazine-sponsored h3{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",sans-serif;
}
html[lang^="zh"] .magazine-masthead h1,
html[lang="ja"] .magazine-masthead h1,
html[lang="ko"] .magazine-masthead h1{
  font-size:35px;
  line-height:1.05;
  letter-spacing:-1.1px;
}
html[lang="th"] .magazine-masthead h1,
html[lang="hi"] .magazine-masthead h1,
html[lang="ar"] .magazine-masthead h1{
  font-size:34px;
  line-height:1.08;
  letter-spacing:-.9px;
}
html[lang^="zh"] .magazine-section-heading h2,
html[lang="ja"] .magazine-section-heading h2,
html[lang="ko"] .magazine-section-heading h2{
  font-size:23px;
  line-height:1.2;
}
html[lang="th"] .magazine-section-heading h2,
html[lang="hi"] .magazine-section-heading h2,
html[lang="ar"] .magazine-section-heading h2{
  font-size:22px;
  line-height:1.23;
}

/* Arabic logical alignment remains native. */
html[dir="rtl"] .magazine-masthead__copy::before{
  right:auto;
  left:-9px;
}
html[dir="rtl"] .magazine-section-heading::after{
  left:auto;
  right:0;
}
html[dir="rtl"] .magazine-paragraph:first-child p::first-letter{
  float:right;
  margin:4px 0 -2px 7px;
}
html[dir="rtl"] .magazine-quote blockquote::before{
  right:auto;
  left:10px;
}

/* ---------- NARROW PHONES ---------- */
@media(max-width:430px){
  .magazine-masthead{
    width:calc(100% - 6px);
    border-radius:16px;
  }
  .magazine-masthead__media{
    aspect-ratio:1.24/1;
  }
  .magazine-masthead__copy{
    padding-inline:15px;
  }
  .magazine-masthead h1{
    font-size:34px;
  }
  .magazine-reading{
    width:calc(100% - 14px);
  }
  .magazine-paragraph p{
    font-size:14.5px;
    line-height:1.8;
  }
  .magazine-section-heading{
    grid-template-columns:36px minmax(0,1fr);
  }
  .magazine-section-heading h2{
    font-size:24px;
  }
  .magazine-media{
    margin-inline:-2px!important;
  }
}
