/* blog.css — Shared styles for all blog & article pages · Dra. Joicy Stering */
@font-face{font-family:"GP";src:url("/assets/fonts/AGaramondPro-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"GP";src:url("/assets/fonts/AGaramondPro-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"KC";src:url("/assets/fonts/KeplerStd-SemiboldCapt.otf") format("opentype");font-weight:600;font-display:swap}
:root{--bg:#faf6f1;--ink:#2c1f14;--a:#e8917a;--a2:#c97560;--soft:rgba(44,31,20,.55);--hair:rgba(44,31,20,.1);--card:#f0e8dc;--dark:#1c130b;--dark2:#2a1d12;--serif:"GP","EB Garamond",Georgia,serif;--caps:"KC","GP",Georgia,serif;--sans:"Inter",-apple-system,sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--serif);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}

/* NAV */
.blog-nav{position:sticky;top:0;z-index:100;background:rgba(250,246,241,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--hair)}
.blog-nav-inner{max-width:1540px;margin:0 auto;padding:0 48px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.blog-nav-inner .logo img{height:44px;width:auto}
.blog-nav-links{display:flex;gap:32px}
.blog-nav-links a{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:.65;transition:opacity .2s}
.blog-nav-links a:hover{opacity:1;color:var(--a)}
.blog-nav-cta{display:inline-flex;align-items:center;background:var(--a);color:#fff;padding:12px 24px;border-radius:999px;font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;transition:background .2s;white-space:nowrap}
.blog-nav-cta:hover{background:var(--a2)}

/* BREADCRUMB */
.breadcrumb{font-family:var(--sans);font-size:12px;color:var(--soft);margin-bottom:22px}
.breadcrumb a{color:var(--a)}.breadcrumb a:hover{text-decoration:underline}

/* ARTICLE HERO */
.art-hero{background:var(--dark);padding:72px 48px 60px}
.art-hero-inner{max-width:820px;margin:0 auto}
.art-hero .breadcrumb{opacity:.6}
.art-hero .breadcrumb a{color:rgba(232,145,122,.8)}
.art-cat{font-family:var(--caps);font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--a);margin-bottom:20px}
.art-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,54px);line-height:1.06;letter-spacing:-.014em;color:#fff;margin-bottom:24px}
.art-meta{font-family:var(--sans);font-size:13px;color:rgba(255,255,255,.48);letter-spacing:.05em}
.art-meta strong{color:rgba(255,255,255,.75)}

/* ARTICLE BODY */
.art-wrap{max-width:820px;margin:0 auto;padding:64px 48px}
.art-cover{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:48px}
.art-content h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:-.01em;margin:52px 0 18px;color:var(--ink)}
.art-content h2 em{color:var(--a);font-style:italic}
.art-content h3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.5vw,24px);line-height:1.2;margin:36px 0 14px;color:var(--ink)}
.art-content p{font-family:var(--sans);font-size:16px;line-height:1.82;color:var(--ink);margin-bottom:22px}
.art-content ul{padding-left:0;margin-bottom:24px}
.art-content ul li{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink);padding-left:22px;position:relative;margin-bottom:10px}
.art-content ul li::before{content:"—";position:absolute;left:0;color:var(--a);font-size:14px}
.art-content ol{counter-reset:num;padding-left:0;margin-bottom:24px}
.art-content ol li{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink);padding-left:32px;position:relative;margin-bottom:10px;counter-increment:num}
.art-content ol li::before{content:counter(num)".";position:absolute;left:0;color:var(--a);font-weight:600;font-family:var(--sans)}
.art-content blockquote{border-left:3px solid var(--a);padding:18px 24px;background:var(--card);margin:36px 0;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink)}
.art-content strong{font-weight:600}
.art-content em{color:var(--a);font-style:italic}
.art-content .highlight-box{background:var(--card);border-left:4px solid var(--a);padding:20px 24px;margin:32px 0}
.art-content .highlight-box p{margin:0;font-size:15px}

/* ARTICLE CTA */
.art-cta{background:var(--a);padding:44px;margin:56px 0;color:#fff}
.art-cta h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;color:#fff;margin-bottom:12px}
.art-cta p{font-family:var(--sans);font-size:15px;line-height:1.7;color:rgba(255,255,255,.88);margin-bottom:24px}
.art-cta .wa-cta{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--a);padding:16px 30px;border-radius:999px;font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;transition:opacity .2s}
.art-cta .wa-cta:hover{opacity:.9}
.art-cta .wa-cta svg{width:18px;height:18px;fill:var(--a);flex-shrink:0}

/* RELATED */
.art-related{margin-top:52px;padding-top:40px;border-top:1px solid var(--hair)}
.art-related-label{font-family:var(--caps);font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--a);margin-bottom:28px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{background:var(--card);padding:18px;transition:transform .2s}
.rel-card:hover{transform:translateY(-3px)}
.rel-cat{font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--a);margin-bottom:6px}
.rel-title{font-family:var(--serif);font-size:16px;line-height:1.3;color:var(--ink)}

/* BLOG INDEX */
.blog-index-hero{background:var(--dark);padding:84px 48px 72px}
.blog-index-hero-inner{max-width:1100px;margin:0 auto}
.blog-index-hero .label{font-family:var(--caps);font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--a);margin-bottom:22px}
.blog-index-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,84px);line-height:1.02;letter-spacing:-.016em;color:#fff}
.blog-index-hero h1 em{color:var(--a)}
.blog-index-hero p{font-family:var(--sans);font-size:16px;line-height:1.75;color:rgba(255,255,255,.6);max-width:560px;margin-top:20px}
.blog-grid-section{max-width:1100px;margin:0 auto;padding:64px 48px}
.blog-grid-section .section-label{font-family:var(--caps);font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--a);margin-bottom:28px}
.blog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:56px}
.blog-card{background:var(--card);display:flex;flex-direction:column;overflow:hidden;transition:transform .25s,box-shadow .25s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(44,31,20,.1)}
.blog-card-img{aspect-ratio:3/2;overflow:hidden}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.blog-card:hover .blog-card-img img{transform:scale(1.04)}
.blog-card-body{padding:24px 20px;flex:1;display:flex;flex-direction:column;gap:8px}
.blog-card-cat{font-family:var(--sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--a)}
.blog-card-title{font-family:var(--serif);font-size:20px;line-height:1.2;color:var(--ink);flex:1}
.blog-card-date{font-family:var(--sans);font-size:11px;color:var(--soft);margin-top:4px}
.blog-card a.read-more{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--a);margin-top:10px;transition:opacity .2s}
.blog-card a.read-more:hover{opacity:.7}

/* FOOTER */
.blog-footer{background:var(--dark);color:rgba(250,246,241,.5);padding:64px 48px 36px}
.blog-footer-grid{max-width:1540px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:56px;padding-bottom:48px;border-bottom:1px solid rgba(250,246,241,.1);margin-bottom:28px}
.blog-footer-brand img{height:48px;width:auto;opacity:.85;margin-bottom:16px}
.blog-footer-brand p{font-family:var(--sans);font-size:13px;line-height:1.7;max-width:260px;color:rgba(250,246,241,.45)}
.blog-footer-col h4{font-family:var(--caps);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--a);margin-bottom:16px}
.blog-footer-col ul{display:flex;flex-direction:column;gap:8px}
.blog-footer-col ul a{font-family:var(--sans);font-size:13px;color:rgba(250,246,241,.45);transition:color .2s}
.blog-footer-col ul a:hover{color:rgba(250,246,241,.8)}
.blog-footer-col .fci{font-family:var(--sans);font-size:13px;color:rgba(250,246,241,.45);margin-bottom:8px;line-height:1.5}
.blog-fbot{max-width:1540px;margin:0 auto;display:flex;justify-content:space-between;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,246,241,.25)}
.blog-fbot a{color:rgba(250,246,241,.4)}.blog-fbot a:hover{color:rgba(250,246,241,.7)}

/* RESPONSIVE */
@media(max-width:1024px){
  .blog-nav-inner,.blog-footer-grid{padding-left:32px;padding-right:32px}
  .art-wrap,.blog-grid-section{padding-left:32px;padding-right:32px}
  .blog-index-hero{padding-left:32px;padding-right:32px}
  .blog-cards{grid-template-columns:repeat(2,1fr)}
  .blog-footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:768px){
  .blog-nav-inner{padding:0 20px}
  .blog-nav-links{display:none}
  .blog-nav-cta{padding:10px 16px;letter-spacing:.18em;font-size:10px}
  .art-hero{padding:52px 20px 44px}
  .art-wrap{padding:40px 20px}
  .related-grid{grid-template-columns:1fr}
  .art-cta{padding:32px 20px}
  .art-cta .wa-cta{letter-spacing:.16em;padding:14px 20px;font-size:10px}
  .blog-index-hero{padding:60px 20px 52px}
  .blog-grid-section{padding:40px 20px}
  .blog-cards{grid-template-columns:1fr}
  .blog-footer{padding:48px 20px 28px}
  .blog-footer-grid{grid-template-columns:1fr;gap:32px;padding-bottom:32px}
  .blog-fbot{flex-direction:column;gap:8px}
}
@media(max-width:480px){
  .blog-nav-inner{height:60px}
  .blog-nav-inner .logo img{height:36px}
  .blog-nav-cta{display:none}
  .art-hero h1{font-size:28px}
  .art-content h2{font-size:22px}
  .art-content h3{font-size:18px}
  .art-content p,.art-content ul li,.art-content ol li{font-size:15px}
  .art-cta h3{font-size:22px}
  .blog-index-hero h1{font-size:36px}
  .blog-card-title{font-size:18px}
}