/* =====================================================================
   CHARLATAN ARTICLE LAYOUT  -  /app/article/article.css
   For the pages /app/build-articles.php writes (plain, secondary photos,
   quote). Same as article-layouts/ in the editor folder.
   ===================================================================== */
@font-face{font-family:cma-helv;src:url(/resources/fonts/helvetica.ttf) format("truetype");font-display:swap}
@font-face{font-family:cma-helvb;src:url(/resources/fonts/helvetica-bold.ttf) format("truetype");font-display:swap}
#cma{color:#21282e;padding:40px 0 24px}
#cma .cma-head{max-width:820px;margin:0 auto;padding:0 24px;text-align:center}
#cma .cma-k{font:400 11px/1 cma-helv,Helvetica,Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8a6d3b;margin:0 0 18px}
#cma .cma-k a{color:inherit;text-decoration:none}
#cma h1{font:400 60px/1.05 "Playfair Display",Georgia,serif;letter-spacing:-.02em;margin:0 0 18px}
#cma .cma-sub{font:italic 500 22px/1.4 "Cormorant Garamond",Georgia,serif;margin:0 auto 22px;max-width:640px}
#cma .cma-by{display:flex;justify-content:center;align-items:center;gap:12px;font:400 11px/1.4 cma-helv,Helvetica,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#7b8187;margin:0 0 34px}
#cma .cma-by b{font-weight:400;color:#21282e}
#cma .cma-by .cma-date{font-family:cma-helvb,Helvetica,Arial,sans-serif;font-weight:400;color:#8a6d3b}
#cma .cma-by i{width:4px;height:4px;border-radius:50%;background:#8a6d3b;display:inline-block}
#cma .cma-share{display:flex;justify-content:center;gap:10px;margin:-16px 0 34px}
#cma .cma-share a{width:36px;height:36px;border:1px solid #cfcac2;border-radius:50%;display:grid;place-items:center;color:#21282e;transition:background .15s,color .15s,border-color .15s}
#cma .cma-share a:hover{background:#f4f2ee;color:#8a6d3b;border-color:#8a6d3b}
#cma .cma-share a.cma-sms{display:none}
@media (hover:none) and (pointer:coarse){#cma .cma-share a.cma-sms{display:grid}
}
#cma.cma-mac .cma-share a.cma-sms{display:grid}
#cma figure{margin:0}
#cma .cma-hero{max-width:1048px;margin:0 auto 46px;padding:0 24px}
#cma .cma-hero.tall{max-width:680px}
#cma .cma-hero img{width:100%;height:auto;max-height:70vh;object-fit:cover;display:block;border-radius:3px}
#cma figcaption{font:400 11px/1.4 cma-helv,Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8b8e98;margin-top:10px;text-align:right}
#cma figcaption span{color:#8a6d3b}
#cma .cma-body{max-width:680px;margin:0 auto;padding:0 24px}
#cma .cma-body p{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:23px;line-height:35px;color:#2a3138;margin:0 0 24px}
#cma .cma-body p.first::first-letter{float:left;font:400 82px/.84 "Playfair Display",Georgia,serif;color:#b3111b;margin:7px 12px 0 0}
#cma .cma-mid{width:100%;margin:44px 0}
#cma .cma-mid.tall{width:min(520px,100%);margin-left:auto;margin-right:auto}
#cma .cma-mid img{width:100%;height:auto;max-height:70vh;object-fit:contain;display:block;border-radius:3px}
#cma .cma-quote{margin:48px 0;padding:30px 8px 32px;border-top:1px solid #8a6d3b;border-bottom:1px solid #8a6d3b;text-align:center}
#cma .cma-body .cma-quote p{font:italic 400 34px/1.3 "Times New Roman",Times,serif;color:#21282e;margin:0}
#cma .cma-end{display:block;width:9px;height:9px;background:#8a6d3b;margin:6px 0 0 auto}
#cma .cma-rule{max-width:680px;margin:40px auto 0;border:0;border-top:1px solid #e7e3dc}
@media (max-width:760px){#cma{padding:24px 0 12px}
#cma h1{font-size:40px}
#cma .cma-sub{font-size:19px}
#cma .cma-by{flex-wrap:wrap;gap:8px;margin-bottom:24px}
#cma .cma-hero{padding:0;margin-bottom:30px}
#cma .cma-hero img{border-radius:0}
#cma figcaption{padding:0 20px}
#cma .cma-body{padding:0 20px}
#cma .cma-body p{font-size:21px;line-height:32px}
#cma .cma-body p.first::first-letter{font-size:66px}
#cma .cma-mid{margin:32px 0}
#cma .cma-quote{margin:36px 0;padding:22px 4px 24px}
#cma .cma-body .cma-quote p{font-size:26px}
}

/* in-text headings */
#cma .cma-body h2.cma-h{font:400 30px/1.2 "Playfair Display",Georgia,serif;color:#21282e;letter-spacing:-.01em;margin:46px 0 16px}
/* the read-more wall (/app/wall/wall.js): it shows the opening only, fading, then its box */
#cma .chw-gate{margin-top:8px}
#cma .cma-body .chw-gate p{font:400 14px/1.5 chw-helv,Helvetica,Arial,sans-serif;color:#7b8187;margin:12px 0 0;max-width:460px}
#cma .cma-body .chw-gate p.chw-k{font:400 11px/1.4 chw-helv,Helvetica,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8a6d3b;margin:0 0 6px}
#cma:has(.chw-gate) .cma-rule,#cma:has(.chw-gate) section.chr{display:none}
@media (max-width:760px){
#cma .cma-body h2.cma-h{font-size:25px;margin:36px 0 12px}
}