/* ===== Face Analyzer AI — Editorial Luxury Design System ===== */
:root{
  --bg:#0d0d0c; --bg-elev:#141412; --cream:#f5f0ea; --gold:#c9a96e; --gold-dim:#8a7350;
  --ink:#f5f0ea; --ink-dim:#b9b2a6; --line:rgba(245,240,234,0.1);
  --ease:cubic-bezier(0.32,0.72,0,1);
  --serif:'Cormorant Garamond',serif; --sans:'DM Sans',sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:hidden;
}
.grain-overlay{
  position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; color:var(--cream); letter-spacing:-0.01em;}
h1{font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.05; font-weight:600;}
h2{font-size:clamp(1.7rem,3vw,2.4rem); margin-top:3rem; margin-bottom:1.1rem;}
h3{font-size:1.3rem; margin-bottom:.8rem;}
p{margin-bottom:1.3rem; color:var(--ink-dim);}
p strong{color:var(--cream); font-weight:600;}
a{color:var(--gold); text-decoration:none; transition:color .4s var(--ease);}
a:hover{color:var(--cream);}
img{max-width:100%; display:block;}
.eyebrow{
  display:inline-block; padding:.3rem .9rem; border:1px solid var(--gold-dim);
  border-radius:999px; font-size:.68rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--gold); margin-bottom:1.5rem; font-weight:600;
}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ---- Nav ---- */
.site-nav{position:sticky; top:0; z-index:40; padding:18px 0; background:rgba(13,13,12,.7); backdrop-filter:blur(18px); border-bottom:1px solid var(--line);}
.nav-inner{max-width:1180px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between;}
.nav-logo{font-family:var(--serif); font-size:1.4rem; font-weight:700; color:var(--cream);}
.nav-logo span{color:var(--gold);}
.nav-links{display:flex; gap:28px; font-size:.92rem;}
.nav-links a{color:var(--ink-dim);}
.nav-links a:hover{color:var(--gold);}
.nav-toggle{display:none; background:none; border:0; width:28px; height:20px; position:relative; cursor:pointer;}
.nav-toggle span{position:absolute; left:0; width:100%; height:1.5px; background:var(--cream); transition:transform .5s var(--ease), opacity .3s;}
.nav-toggle span:first-child{top:0;} .nav-toggle span:last-child{bottom:0;}
.nav-toggle.open span:first-child{transform:translateY(9px) rotate(45deg);}
.nav-toggle.open span:last-child{transform:translateY(-9px) rotate(-45deg);}

/* ---- Hero ---- */
.hero{padding:100px 0 80px; position:relative;}
.hero-inner{max-width:820px;}
.hero p.lead{font-size:1.2rem; max-width:640px; margin-top:1.2rem;}
.hero-cta{display:inline-flex; align-items:center; gap:10px; margin-top:2rem; padding:14px 28px; background:var(--gold);
  color:#0d0d0c; border-radius:999px; font-weight:600; font-size:.95rem; transition:transform .5s var(--ease);}
.hero-cta:hover{transform:scale(1.03); color:#0d0d0c;}
.hero-cta .icon-circle{width:26px; height:26px; border-radius:999px; background:rgba(13,13,12,.15); display:flex; align-items:center; justify-content:center; transition:transform .4s var(--ease);}
.hero-cta:hover .icon-circle{transform:translate(3px,-1px);}

/* ---- Bento grid ---- */
.bento-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:40px 0;}
.bento-card{
  grid-column:span 2; background:rgba(245,240,234,.03); border:1px solid var(--line); border-radius:1.75rem;
  padding:2px; transition:transform .6s var(--ease), border-color .4s;
}
.bento-card:hover{transform:translateY(-4px); border-color:var(--gold-dim);}
.bento-card-inner{
  background:var(--bg-elev); border-radius:calc(1.75rem - 2px); padding:32px;
  height:100%; box-shadow:inset 0 1px 1px rgba(255,255,255,.06);
}
.bento-card.wide{grid-column:span 2;}
.bento-card.tall{grid-column:span 1;}
.bento-card h3{margin-bottom:.6rem;}
.bento-card p{font-size:.92rem; margin-bottom:0;}
.card-tag{font-size:.68rem; text-transform:uppercase; letter-spacing:.15em; color:var(--gold); margin-bottom:.7rem; display:block;}

/* ---- Shape grid (8 cards) ---- */
.shape-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:40px 0 60px;}
.shape-card{
  background:rgba(245,240,234,.03); border:1px solid var(--line); border-radius:1.5rem; padding:1.5px;
  transition:transform .5s var(--ease), border-color .4s;
}
.shape-card:hover{transform:translateY(-3px); border-color:var(--gold-dim);}
.shape-card-inner{background:var(--bg-elev); border-radius:calc(1.5rem - 1.5px); padding:26px 22px;}
.shape-card h3{font-size:1.25rem; margin-bottom:.3rem;}
.shape-card .tagline{font-size:.82rem; color:var(--gold); margin-bottom:.6rem; display:block;}
.shape-card p{font-size:.85rem; margin-bottom:0;}

/* ---- Article ---- */
.article-page{padding:70px 0 100px;}
.article-header{max-width:900px; margin:0 auto 40px;}
.byline{color:var(--ink-dim); font-size:.85rem; margin-top:1rem;}
.byline a{color:var(--gold);}
.article-layout{display:grid; grid-template-columns:1fr 300px; gap:50px; max-width:1180px; margin:0 auto; align-items:start;}
.article-body{max-width:760px;}
.article-body .lede{font-size:1.15rem; color:var(--ink);}
.quick-facts{background:rgba(245,240,234,.03); border:1px solid var(--line); border-radius:1.5rem; padding:24px; position:sticky; top:100px;}
.quick-facts h3{color:var(--gold); font-size:1rem;}
.quick-facts ul{list-style:none;}
.quick-facts li{font-size:.85rem; padding:8px 0; border-bottom:1px solid var(--line); color:var(--ink-dim);}
.quick-facts li strong{color:var(--cream); display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px;}
.ad-slot{margin:32px 0; min-height:90px;}
.breadcrumbs{font-size:.8rem; color:var(--ink-dim); margin-bottom:24px; max-width:1180px;}
.breadcrumbs a{color:var(--ink-dim);}
.breadcrumbs a:hover{color:var(--gold);}

/* ---- Related ---- */
.related-section{max-width:1180px; margin:60px auto 0;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;}
.related-card{background:rgba(245,240,234,.03); border:1px solid var(--line); border-radius:1rem; padding:18px 20px; font-size:.9rem; color:var(--ink); transition:border-color .4s, transform .5s var(--ease);}
.related-card:hover{border-color:var(--gold-dim); transform:translateY(-2px); color:var(--gold);}

/* ---- Section wrappers ---- */
.section{padding:80px 0;}
.section-head{max-width:700px; margin-bottom:44px;}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--line); padding:70px 0 30px; margin-top:100px;}
.footer-inner{max-width:1180px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;}
.footer-col p{font-size:.85rem; margin-top:.8rem;}
.footer-col h4{color:var(--cream); font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem;}
.footer-col a{display:block; color:var(--ink-dim); font-size:.9rem; margin-bottom:.6rem;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{max-width:1180px; margin:40px auto 0; padding:20px 24px 0; border-top:1px solid var(--line); font-size:.78rem; color:var(--ink-dim);}

/* ---- Reveal on scroll ---- */
.reveal{opacity:0; transform:translateY(24px); filter:blur(4px); transition:all .9s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0); filter:blur(0);}

@media (max-width:900px){
  .article-layout{grid-template-columns:1fr;}
  .quick-facts{position:static;}
  .bento-grid, .shape-grid{grid-template-columns:1fr 1fr;}
  .bento-card{grid-column:span 2 !important;}
  .related-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .nav-links{position:fixed; inset:0; top:64px; background:rgba(13,13,12,.97); backdrop-filter:blur(24px);
    flex-direction:column; padding:40px 24px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .5s var(--ease);}
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-links a{font-size:1.3rem; padding:14px 0; border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
  .shape-grid, .bento-grid{grid-template-columns:1fr;}
  .hero{padding:60px 0 50px;}
}