 :root{
    --gold:#C8A66A; --gold-dark:#b08f52; --navy:#0d1520; --ink:#111111;
    --muted:#5B6670; --faint:#9aa2a9; --bg:#ffffff; --bg-soft:#F7F7F7;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font-family: 'Inter', sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
  a { color: var(--gold); text-decoration: none; }
  a:hover { color: var(--gold-dark); }
  img { max-width: 100%; }
  ::selection { background: var(--gold); color: #111; }
  h1,h2,h3 { font-family: 'Cormorant Garamond', serif; margin: 0; }

  @keyframes pulsering { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .7; transform: scale(1.06); } }
  @keyframes fadeUp { from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:translateY(0);} }
  [data-reveal]{ opacity:0; animation: fadeUp .8s cubic-bezier(.22,.61,.36,1) forwards; }

  /* ---- NAV (same as blog main) ---- */
  nav.site-nav{ position:fixed; top:0; left:0; right:0; z-index:50; height:74px; transition:background .4s,box-shadow .4s,border-color .4s; background:rgb(13 21 32); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid rgba(0,0,0,.06); }
  .nav-inner{ max-width:1280px; margin:0 auto; padding:0 clamp(20px,4vw,56px); height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
  .nav-brand{ display:flex; align-items:center; gap:12px; color:inherit; }
  .nav-word span:first-child{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:19px; letter-spacing:.5px; line-height:1; display:block; color:#111; }
  .nav-word span:last-child{ font-size:9.5px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); font-weight:600; }
  .nav-links{ display:flex; align-items:center; gap:clamp(14px,1.6vw,30px); }
  .nav-links a.nl{ font-size:13.5px; font-weight:500; letter-spacing:.2px; color:#fff; }
  .nav-cta{ font-size:13px; font-weight:600; letter-spacing:.3px; padding:10px 20px; border-radius:30px; background:var(--gold); color:#111; transition:background .3s; }
  .nav-cta:hover{ background:var(--gold-dark); color:#111; }
  .mnav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:none; border:none; cursor:pointer; padding:9px; }
  .mnav-toggle span{ display:block; width:24px; height:2px; border-radius:2px; background:#111; }
  .mnav-panel{ display:none; position:fixed; top:74px; left:0; right:0; z-index:49; background:#fff; border-bottom:1px solid rgba(0,0,0,.08); box-shadow:0 20px 40px rgba(0,0,0,.12); padding:14px clamp(20px,4vw,56px) 24px; opacity:0; transform:translateY(-10px); transition:opacity .3s,transform .3s; pointer-events:none; }
  .mnav-panel.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .mnav-panel a{ display:block; padding:15px 4px; font-size:17px; font-weight:500; color:#111; border-bottom:1px solid #eee; }
  @media (max-width:900px){
    .mnav-toggle{ display:inline-flex; }
    .nav-cta.desktop-only{ display:none !important; }
    .mnav-panel{ display:block; }
    .nav-links a.nl{ display:none; }
  }

  /* ---- BREADCRUMB ---- */
  .breadcrumb-bar{ background:var(--navy); padding:120px clamp(20px,4vw,56px) 40px; position:relative; overflow:hidden; }
  .breadcrumb-bar .ring{ position:absolute; top:-160px; right:-120px; width:480px; height:480px; border:1px solid rgba(200,166,106,.18); border-radius:50%; animation:pulsering 9s ease-in-out infinite; }
  .breadcrumb-inner{ position:relative; z-index:2; max-width:820px; margin:0 auto; }
  .crumbs{ font-size:12.5px; color:rgba(255,255,255,.5); margin-bottom:22px; }
  .crumbs a{ color:rgba(255,255,255,.5); }
  .crumbs a:hover{ color:var(--gold); }
  .eyebrow{ display:inline-flex; align-items:center; gap:12px; margin-bottom:20px; font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); font-weight:600; }
  .eyebrow .ln{ width:34px; height:1px; background:var(--gold); }
  .article-title{ color:#fff; font-weight:500; font-size:clamp(30px,4.4vw,52px); line-height:1.08; letter-spacing:-.4px; margin-bottom:24px; }
  .article-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:rgba(255,255,255,.55); font-size:13.5px; }
  .article-meta .avatar{ width:38px; height:38px; border-radius:50%; background:rgba(200,166,106,.15); border:1px solid var(--gold); color:var(--gold); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:16px; }
  .article-meta .who{ color:#fff; font-weight:500; }

  /* ---- COVER IMAGE ---- */
  .cover-wrap{ max-width:960px; margin:-22px auto 0; padding:0 clamp(20px,4vw,56px); position:relative; z-index:3; }
  
  .cover-img img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* ---- LAYOUT ---- */
  .article-layout{     max-width: 75%;
    margin: 0 auto;
    padding: 56px clamp(20px, 4vw, 56px) 40px; }
  article.article-body{ font-size:16.5px; line-height:1.85; color:#333; font-weight:300; }
  article.article-body p{ margin:0 0 24px; }
  article.article-body h2{ font-weight:500; font-size:clamp(24px,2.6vw,32px); color:#111; margin:44px 0 18px; line-height:1.2; }
  article.article-body h3{ font-weight:600; font-size:20px; color:#111; margin:32px 0 14px; font-family:'Inter',sans-serif; }
  article.article-body ul{ margin:0 0 24px; padding-left:22px; }
  article.article-body li{ margin-bottom:10px; }
  article.article-body blockquote{ margin:34px 0; padding:24px 28px; background:var(--bg-soft); border-left:3px solid var(--gold); border-radius:0 14px 14px 0; font-family:'Cormorant Garamond',serif; font-size:21px; font-style:italic; color:#111; line-height:1.55; }
  article.article-body strong{ color:#111; font-weight:600; }

  .toc{ position:sticky; top:100px; }
  .toc-label{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:16px; }
  .toc a{ display:block; font-size:13.5px; color:var(--muted); padding:9px 0; border-bottom:1px solid #eee; }
  .toc a:hover{ color:var(--gold); }
  .toc-cta{ margin-top:26px; background:var(--navy); border-radius:16px; padding:24px 20px; text-align:center; }
  .toc-cta p{ color:rgba(255,255,255,.7); font-size:13px; line-height:1.6; margin:0 0 16px; }
  .toc-cta a{ display:inline-block; background:var(--gold); color:#111; padding:12px 22px; border-radius:30px; font-size:13px; font-weight:600; }

  /* ---- TAGS / SHARE ---- */
  .tags-share{ max-width:960px; margin:0 auto; padding:0 clamp(20px,4vw,56px) 50px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; border-bottom:1px solid #ececec; padding-bottom:36px; }
  .tag-list{ display:flex; gap:10px; flex-wrap:wrap; }
  .tag-pill{ font-size:12.5px; color:#111; background:#F7F5F0; padding:7px 15px; border-radius:20px; }
  .share-row{ display:flex; gap:10px; align-items:center; }
  .share-row span{ font-size:12.5px; color:var(--faint); }
  .share-btn{ width:36px; height:36px; border-radius:50%; border:1px solid #ececec; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--muted); transition:.3s; }
  .share-btn:hover{ background:var(--gold); border-color:var(--gold); color:#111; }

  /* ---- AUTHOR ---- */
  section.author-box{ max-width:960px; margin:0 auto; padding:50px clamp(20px,4vw,56px); }
  .author-card{ display:flex; gap:24px; align-items:center; background:var(--bg-soft); border-radius:20px; padding:32px; }
  .author-avatar{ flex:none; width:78px; height:78px; border-radius:50%; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:30px; }
  .author-card h4{ font-weight:600; font-size:19px; color:#111; margin-bottom:6px; }
  .author-card p{ color:var(--muted); font-size:14px; line-height:1.7; font-weight:300; margin:0; }

  /* ---- FOLLOW / SOCIAL ---- */
  section.follow-box{ max-width:960px; margin:0 auto; padding:0 clamp(20px,4vw,56px) 50px; }
  .follow-row{ display:flex; gap:18px; }
  .social-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:12px; padding:22px 20px; border-radius:16px; font-size:15px; font-weight:600; letter-spacing:.3px; color:#fff; transition:transform .3s ease, box-shadow .3s ease, filter .3s ease; }
  .social-btn:hover{ transform:translateY(-3px); filter:brightness(1.06); }
  .social-btn svg{ flex:none; width:22px; height:22px; }
  .social-btn.instagram{ background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); box-shadow:0 14px 34px rgba(221,42,123,.28); }
  .social-btn.linkedin{ background:#0A66C2; box-shadow:0 14px 34px rgba(10,102,194,.3); }
  .social-btn.youtube{ background:#FF0000; box-shadow:0 14px 34px rgba(255,0,0,.28); }
  @media (max-width:640px){
    .follow-row{ flex-direction:column; }
  }

  /* ---- RELATED ---- */
  section.related{ background:var(--bg-soft); padding:clamp(60px,7vw,100px) clamp(20px,4vw,56px); }
  .related-inner{ max-width:1180px; margin:0 auto; }
  .related-inner > .eyebrow{ color:var(--gold); }
  .related-inner h2{ font-weight:500; font-size:clamp(28px,3.4vw,40px); color:#111; margin:14px 0 36px; }
  .related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .post-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #ececec; border-radius:18px; overflow:hidden; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; color:inherit; }
  .post-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(17,17,17,.1); border-color:var(--gold); }
  .post-thumb{ aspect-ratio:16/10; overflow:hidden; }
  .post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .post-card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; }
  .post-card-body .tag{ display:inline-block; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:600; background:#F7F5F0; padding:6px 14px; border-radius:20px; width:fit-content; }
  .post-card-body h3{ font-weight:600; font-size:17.5px; line-height:1.3; color:#111; font-family:'Cormorant Garamond',serif; }
  .post-card-body span.date{ font-size:12px; color:var(--faint); }

  /* ---- FOOTER ---- */
  footer.site-footer{ background:#0a0f16; color:rgba(255,255,255,.7); padding:clamp(56px,7vw,80px) clamp(20px,4vw,56px) 40px; }
  .foot-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
  .foot-grid h4{ font-family:'Inter',sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:18px; }
  .foot-grid p{ font-size:14px; line-height:1.7; max-width:320px; font-weight:300; color:rgba(255,255,255,.55); margin:0 0 20px; }
  .foot-links{ display:flex; flex-direction:column; gap:11px; }
  .foot-links a{ color:rgba(255,255,255,.62); font-size:14px; font-weight:300; }
  .foot-links a:hover{ color:var(--gold); }
  .foot-bar{ max-width:1180px; margin:24px auto 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:rgba(255,255,255,.4); }

  @media (max-width:900px){
    .article-layout{ grid-template-columns:1fr;     max-width: 100%;}
    .toc{ position:static; order:2; }
    .related-grid{ grid-template-columns:1fr 1fr; }
    .foot-grid{ grid-template-columns:1fr; gap:30px; }
  }
  @media (max-width:640px){
    .related-grid{ grid-template-columns:1fr; }
    .cover-wrap{ margin-top:-24px; }
  }