/*
Theme Name: QueenMelanin
Theme URI: https://queenmelanin.com
Author: QueenMelanin
Author URI: https://queenmelanin.com
Description: A bold, luxe custom theme for QueenMelanin — clean, melanin-first skincare and a vetted directory of Black-owned beauty brands. Rich plum + gold palette, modern serif display.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: queenmelanin
*/

:root{
  --ink:#241019; --plum:#5E1F3D; --plum-2:#7D2A52; --marigold:#EBA338; --coral:#E4572E;
  --gold:#C9A24A; --gold-lt:#E7CE86;
  --gold-grad:linear-gradient(135deg,#E7CE86 0%,#C9A24A 45%,#9C7A2E 100%);
  --cream:#FBF4E9; --cream-2:#F4E7D3; --white:#fffdf9;
  --shadow:0 18px 50px -20px rgba(36,16,25,.45); --r:22px;
  --serif:'Fraunces',Georgia,serif; --sans:'Poppins',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--serif)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600}

.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:.95rem;padding:15px 30px;border-radius:100px;cursor:pointer;border:none;transition:transform .18s ease,box-shadow .18s ease;letter-spacing:.01em}
.btn-gold{background:var(--gold-grad);color:#2b1a10;box-shadow:0 10px 26px -10px rgba(156,122,46,.8)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(156,122,46,.95)}
.btn-ghost{background:transparent;border:1.5px solid var(--gold);color:var(--gold)}
.btn-ghost:hover{background:var(--gold);color:#2b1a10}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{transform:translateY(-2px)}

.topbar{background:var(--ink);color:var(--cream);text-align:center;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;font-weight:500}
.topbar b{color:var(--gold-lt)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,244,233,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,162,74,.28)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:1200px;margin:0 auto}
.logo{font-family:var(--serif);font-weight:900;font-size:1.5rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.4em}
.logo .crown{font-size:1.15rem}
.logo b{color:var(--plum)}
.nav-links{display:flex;gap:30px;align-items:center;font-size:.92rem;font-weight:500;list-style:none}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--gold-grad);transition:width .25s}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;gap:12px;align-items:center}

.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 88% -10%, rgba(235,163,56,.28), transparent 60%),linear-gradient(160deg,#2E1424 0%, var(--plum) 55%, #4a1733 100%);color:var(--cream)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:70px 0 78px}
.hero-copy .eyebrow{color:var(--gold-lt)}
.hero h1{font-size:clamp(2.7rem,5.4vw,4.6rem);line-height:1.02;font-weight:900;letter-spacing:-.02em;margin:18px 0 20px}
.hero h1 em{font-style:italic;font-weight:500}
.hero p.lede{font-size:1.12rem;max-width:33ch;color:rgba(251,244,233,.9);margin-bottom:30px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.trust{display:flex;gap:22px;flex-wrap:wrap;font-size:.82rem;color:rgba(251,244,233,.78)}
.trust span{display:flex;align-items:center;gap:.45em}
.trust .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-lt)}

.hero-photo{position:relative;justify-self:center;width:100%;max-width:440px;aspect-ratio:3/4}
.hero-photo .frame{position:absolute;inset:0;border-radius:230px 230px 26px 26px;overflow:hidden;box-shadow:var(--shadow);border:2px solid rgba(231,206,134,.55)}
.hero-photo .frame img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero-photo .halo{position:absolute;inset:-22px -22px auto auto;width:120px;height:120px;background:var(--gold-grad);border-radius:50%;filter:blur(2px);opacity:.9;z-index:-1}
.badge-float{position:absolute;left:-26px;bottom:40px;background:var(--cream);color:var(--ink);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:.5em}
.badge-float .b-ico{width:30px;height:30px;border-radius:50%;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;font-size:.9rem}

.marquee{background:var(--marigold);color:#3a1a05;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.76rem;padding:12px;text-align:center}
.marquee b{color:var(--plum)}

section{padding:78px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 46px}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.01em;line-height:1.08}
.sec-head p{margin-top:12px;color:#6b5560}
.divider{width:60px;height:3px;background:var(--gold-grad);border-radius:3px;margin:14px auto 0}
.concerns{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ccard{border-radius:var(--r);padding:26px 22px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;color:var(--cream);position:relative;overflow:hidden;transition:transform .2s}
.ccard:hover{transform:translateY(-6px)}
.ccard h3{font-size:1.35rem;font-weight:600;line-height:1.1}
.ccard p{font-size:.86rem;opacity:.9;margin-top:8px}
.ccard .go{font-size:.82rem;font-weight:600;color:var(--gold-lt);letter-spacing:.04em}
.ccard .num{font-family:var(--serif);font-weight:900;font-size:2.4rem;opacity:.25;position:absolute;top:12px;right:18px}
.c1{background:linear-gradient(155deg,#7D2A52,#4a1733)}
.c2{background:linear-gradient(155deg,#E4572E,#a5300f)}
.c3{background:linear-gradient(155deg,#EBA338,#a96a12);color:#2b1a05}
.c3 .go{color:#3a1a05}
.c4{background:linear-gradient(155deg,#3f7d6b,#1f4438)}

.dir{background:var(--ink);color:var(--cream)}
.dir .sec-head h2{color:var(--cream)}
.dir .sec-head p{color:rgba(251,244,233,.72)}
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bcard{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(201,162,74,.3);border-radius:16px;padding:22px}
.bcard .tag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);font-weight:600}
.bcard h4{font-family:var(--serif);font-size:1.25rem;font-weight:700;margin:8px 0 6px}
.bcard p{font-size:.84rem;color:rgba(251,244,233,.75)}
.bcard .verified{margin-top:12px;font-size:.74rem;color:var(--gold-lt);display:flex;align-items:center;gap:.4em}
.dir-cta{text-align:center;margin-top:38px}

.lead{background:var(--gold-grad);color:#2b1a10}
.lead-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.lead h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:900;line-height:1.05}
.lead p{margin:14px 0 0;font-size:1.02rem;max-width:40ch;font-weight:500}
.optin{background:var(--white);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.optin label{font-size:.8rem;font-weight:600;color:#6b5560}
.optin input{width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid #e5d6bd;margin:8px 0 14px;font-family:var(--sans);font-size:.95rem}
.optin input:focus{outline:none;border-color:var(--gold)}
.optin .btn{width:100%;justify-content:center}
.optin small{display:block;text-align:center;color:#9a8a80;margin-top:10px;font-size:.72rem}

.blueprint-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.bp-visual{background:linear-gradient(160deg,#5E1F3D,#2E1424);border-radius:var(--r);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;color:var(--gold-lt);box-shadow:var(--shadow);position:relative;overflow:hidden;text-align:center;padding:30px}
.bp-visual .ph{font-family:var(--serif);font-style:italic;font-size:1.4rem}
.bp-visual::after{content:'';position:absolute;inset:auto -40px -60px auto;width:200px;height:200px;background:var(--gold-grad);opacity:.35;border-radius:50%;filter:blur(6px)}
.bp-copy .eyebrow{color:var(--coral)}
.bp-copy h2{font-size:clamp(2rem,3.4vw,2.8rem);font-weight:700;margin:14px 0 16px;line-height:1.06}
.bp-list{list-style:none;margin:20px 0 26px}
.bp-list li{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;font-size:.98rem}
.bp-list .ck{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold-grad);color:#2b1a10;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;margin-top:2px}
.price{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.price .now{font-family:var(--serif);font-weight:900;font-size:2rem;color:var(--plum)}
.price .old{color:#9a8a80;text-decoration:line-through}

.site-footer{background:var(--ink);color:rgba(251,244,233,.75);padding:60px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:40px}
.site-footer h5{font-family:var(--serif);color:var(--cream);font-size:1.05rem;margin-bottom:14px;font-weight:600}
.site-footer .logo{color:var(--cream);margin-bottom:12px}
.site-footer a{display:block;font-size:.88rem;padding:5px 0;color:rgba(251,244,233,.7)}
.site-footer a:hover{color:var(--gold-lt)}
.foot-bottom{border-top:1px solid rgba(201,162,74,.25);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.78rem}

/* ---- Blog / Pages ---- */
.page-hero{background:linear-gradient(160deg,#2E1424,var(--plum));color:var(--cream);text-align:center;padding:90px 0 60px}
.page-hero .eyebrow{color:var(--gold-lt)}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800}
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:1200px;margin:0 auto;padding:70px 28px 100px}
.post-list article a{text-decoration:none;color:inherit}
.post-list .thumb{aspect-ratio:4/3;background:linear-gradient(150deg,#7D2A52,#2E1424);border-radius:14px;overflow:hidden}
.post-list .thumb img{width:100%;height:100%;object-fit:cover}
.post-list .cat{margin-top:16px;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep,#B48A3C);font-weight:700}
.post-list h2{font-size:1.4rem;margin-top:8px;line-height:1.25;font-weight:700}
.post-list time{display:block;margin-top:8px;font-size:.72rem;color:#6b5560}
.content-area{max-width:760px;margin:0 auto;padding:70px 28px 110px}
.content-area p{margin:0 0 1.3rem;line-height:1.85}
.content-area h2{font-size:1.9rem;margin:2.4rem 0 1rem}
.content-area h3{font-size:1.4rem;margin:2rem 0 .8rem}
.content-area img{margin:1.6rem 0;border-radius:12px}
.content-area a{color:var(--plum);text-decoration:underline}
.pagination{max-width:1200px;margin:0 auto;padding:0 28px 80px;display:flex;gap:14px;justify-content:center}
.pagination .page-numbers{padding:10px 16px;border-radius:100px;border:1px solid var(--line,rgba(36,16,25,.15));font-size:.9rem}
.pagination .current{background:var(--gold-grad);border:none}

.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ink);color:var(--cream);padding:12px 18px;font-size:.8rem}
.skip-link:focus{left:8px;top:8px}
a:focus-visible,button:focus-visible,input:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}}

@media(max-width:900px){
  .hero-grid,.lead-inner,.blueprint-inner{grid-template-columns:1fr}
  .hero-photo{grid-row:1;max-width:360px}
  .concerns,.brands,.post-list{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.concerns,.brands,.foot-grid,.post-list{grid-template-columns:1fr}}