/* ASIAN BEAUTY BIZ — Editorial redesign
   Bootstrap 5 compatible. Replace demo image classes with your own images.
*/
:root{
  --ink:#171717; --muted:#6d6864; --line:#ddd6d1; --cream:#f8f4f0;
  --rose:#b98273; --rose-dark:#966457; --white:#fff;
  --serif:"Playfair Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:#fff;font-family:var(--sans);font-size:14px;line-height:1.65}
a{color:inherit;text-decoration:none}
.topbar{border-bottom:1px solid #eee;padding:9px 0;font-size:10px;letter-spacing:.13em;color:#777}
.topbar strong{color:var(--ink);font-weight:700}
.top-social{display:flex;gap:13px;color:#222}
.site-header{padding:22px 0 18px;text-align:center}
.brand-row{position:relative;display:flex;align-items:center;justify-content:center}
.brand{font:600 clamp(42px,6vw,72px)/1 var(--serif);letter-spacing:-.035em}
.tagline{margin:8px 0 0;font-size:9px;letter-spacing:.28em;color:#777}
.mobile-menu,.search-btn{position:absolute;background:none;border:0;font-size:22px}
.mobile-menu{left:0}.search-btn{right:0}
.main-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between}
.main-nav a{display:block;padding:13px 8px;font-size:10px;font-weight:600;letter-spacing:.08em;position:relative}
.main-nav li.active a:after{content:"";position:absolute;height:2px;background:var(--rose);left:8px;right:8px;bottom:-1px}
.hero-section{padding-top:20px}
.hero-card{position:relative;min-height:535px;overflow:hidden;background:var(--cream)}
.image{background-size:cover;background-position:center}
.image-hero{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(30,22,20,.42),rgba(30,22,20,.02)),url("https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&w=1500&q=85")}
.hero-copy{position:absolute;left:34px;bottom:34px;max-width:510px;color:#fff}
.eyebrow{display:inline-block;font-size:9px;letter-spacing:.12em;font-weight:700;background:rgba(185,130,115,.94);color:#fff;padding:4px 7px;margin-bottom:10px}
.hero-copy h1{font:600 clamp(34px,4.3vw,58px)/1.05 var(--serif);margin:0 0 14px}
.hero-copy p{font:16px/1.55;margin:0 0 17px;max-width:520px}
.read-more{font-size:10px;letter-spacing:.1em;font-weight:700}
.side-story{display:grid;grid-template-columns:38% 62%;gap:18px;padding:0 0 18px;margin-bottom:18px}
.side-story.border-top{border-top:1px solid var(--line);padding-top:18px}
.side-image{min-height:190px;background-size:cover;background-position:center}
.image-spa{background-image:url("https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&w=700&q=85")}
.image-cosmetics{background-image:url("https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?auto=format&fit=crop&w=700&q=85")}
.side-copy h2{font:500 23px/1.18 var(--serif);margin:0 0 9px}
.side-copy p{font-size:12px;color:var(--muted);margin:0 0 10px}
.section-block{padding-top:46px}
.section-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:20px}
.section-heading h2{font:500 26px var(--serif);letter-spacing:.01em;margin:0;padding-bottom:8px}
.section-heading a{font-size:9px;font-weight:700;letter-spacing:.1em}
.news-image{height:190px;margin-bottom:13px;background-size:cover;background-position:center}
.image-event{background-image:url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=800&q=85")}
.image-makeup{background-image:url("https://images.unsplash.com/photo-1487412912498-0447578fcca8?auto=format&fit=crop&w=800&q=85")}
.image-skin{background-image:url("https://images.unsplash.com/photo-1556228578-8c89e6adf883?auto=format&fit=crop&w=800&q=85")}
.image-hair{background-image:url("https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=800&q=85")}
.news-card h3{font:500 20px/1.25 var(--serif);margin:0 0 7px}
.news-card p{font-size:12px;color:var(--muted);margin:0 0 9px}
.news-card small{font-size:9px;color:#777;letter-spacing:.08em}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.compact{margin-bottom:12px}.compact h2{font-size:19px}
.mini-story{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:center}
.mini-img{height:65px;background-size:cover;background-position:center}
.mini-story h3{font:500 15px/1.22 var(--serif);margin:0 0 4px}
.mini-story i{font-size:12px}.section-link{display:inline-block;margin-top:14px;font-size:9px;font-weight:700;letter-spacing:.09em}
.mini-market{background-image:url("https://images.unsplash.com/photo-1512453979798-5ea266f8880c?auto=format&fit=crop&w=300&q=80")}
.mini-tech{background-image:url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=300&q=80")}
.mini-retail{background-image:url("https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=300&q=80")}
.mini-serum{background-image:url("https://images.unsplash.com/photo-1612817288484-6f916006741a?auto=format&fit=crop&w=300&q=80")}
.mini-makeup{background-image:url("https://images.unsplash.com/photo-1512496015851-a90fb38ba796?auto=format&fit=crop&w=300&q=80")}
.mini-haircare{background-image:url("https://images.unsplash.com/photo-1559599101-f09722fb4948?auto=format&fit=crop&w=300&q=80")}
.portrait-a{background-image:url("https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=300&q=80")}
.portrait-b{background-image:url("https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=300&q=80")}
.portrait-c{background-image:url("https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=300&q=80")}
.event-row{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.event-row>strong{font-size:9px;line-height:1.15;color:#777;letter-spacing:.08em;text-align:center;background:var(--cream);padding:8px 2px}
.event-row b{font:600 22px var(--serif);color:var(--ink)}
.event-row h3{font:500 15px/1.2 var(--serif);margin:0}.event-row p{font-size:10px;color:var(--muted);margin:3px 0 0}
.promo-section{display:grid;grid-template-columns:1fr 1fr;margin-top:46px;margin-bottom:48px}
.promo{min-height:245px;padding:30px;display:flex;align-items:center;gap:28px}
.emag{background:#f1e2dc}.newsletter{background:#f8f4f0}
.promo h2{font:500 31px var(--serif);margin:0 0 7px}.promo p{font-size:12px;color:var(--muted);margin:0 0 15px}
.cover-placeholder{width:110px;height:145px;flex:0 0 110px;background:#222;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;font:600 17px var(--serif);box-shadow:10px 10px 0 rgba(0,0,0,.08)}
.cover-placeholder span{font:8px var(--sans);letter-spacing:.16em;margin-top:4px}
.btn-rose{display:inline-block;background:var(--rose);color:#fff;padding:10px 15px;font-size:9px;font-weight:700;letter-spacing:.08em}
.newsletter form{display:flex;max-width:500px}.newsletter input{flex:1;border:1px solid #d4ccc7;padding:11px 13px;background:#fff;font-size:12px}.newsletter button{border:0;background:var(--rose);color:#fff;padding:0 17px;font-size:9px;font-weight:700;letter-spacing:.08em}
.site-footer{background:#1d1d1d;color:#eee;padding:42px 0 18px}.footer-brand{font:500 28px var(--serif)}.site-footer p,.site-footer small{font-size:9px;letter-spacing:.07em;color:#aaa}.site-footer h4{font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 12px}.site-footer a{display:block;color:#bbb;font-size:11px;margin:5px 0}.footer-cols{display:grid;grid-template-columns:1fr 1.5fr}.footer-social{display:flex;gap:15px;font-size:16px;margin-bottom:12px}.copyright{border-top:1px solid #444;margin-top:28px;padding-top:15px;font-size:9px;color:#888}.copyright span{margin-left:14px}
.offcanvas .offcanvas-body>a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.08em}
@media(max-width:991px){.feature-grid{grid-template-columns:repeat(2,1fr)}.promo-section{grid-template-columns:1fr}.brand{font-size:44px}}
@media(max-width:767px){.brand{font-size:32px}.tagline{font-size:7px;letter-spacing:.18em}.hero-card{min-height:500px}.hero-copy{left:22px;right:22px;bottom:24px}.hero-copy h1{font-size:37px}.side-story{grid-template-columns:34% 66%;gap:13px}.side-copy h2{font-size:18px}.side-copy p{font-size:11px}.side-image{min-height:145px}.section-block{padding-top:35px}.section-heading h2{font-size:23px}.feature-grid{grid-template-columns:1fr}.promo{padding:25px;min-height:220px}.cover-placeholder{width:90px;height:125px;flex-basis:90px}.newsletter form{display:block}.newsletter input{width:100%;margin-bottom:8px;height:42px}.newsletter button{height:42px;width:100%}}
/* ADVERTISEMENT */
.media-ad {
  padding: 24px 0;
}

.media-ad .ad {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4ded9;
  background: #faf8f6;
  color: #999;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* =========================================
   TOP BANNER AD
   ========================================= */

.top-banner-ad {
  padding-top: 24px;
  padding-bottom: 24px;
}

.top-banner-ad .ad {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf8f6;
  border: 1px solid #e4ded9;
  color: #999;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}


/* =========================================
   BOTTOM BANNER AD
   ========================================= */

.bottom-banner-ad {
  padding-top: 24px;
  padding-bottom: 24px;
}

.bottom-banner-ad .ad {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf8f6;
  border: 1px solid #e4ded9;
  color: #999;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* =========================================
   TOP & BOTTOM BANNER ADS
   ========================================= */

.top-banner-ad,
.bottom-banner-ad {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.top-banner-ad img,
.bottom-banner-ad img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}