/* =====================================================================
   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:Georgia,"Times New Roman",serif;font-weight:400;font-size:20px;line-height:34px;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:inline-block;width:9px;height:9px;background:#8a6d3b;margin:0 0 0 10px;vertical-align:baseline}   /* right after the last word */
#cma.cma-end-logo .cma-end{display:none}
#cma.cma-end-logo .cma-body::after{content:"";display:block;width:46px;height:59px;margin:34px auto 6px;background:url(/resources/logo/tab.webp) center/contain no-repeat}
#cma .cma-rule{display:none}
#cma section.chr .chr-h{border-top:0}   /* no line above "More from" either */
@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:18px;line-height:30px}
#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}
}

/* the quote, newer style (article.json "quoteStyle":"mark"): balanced lines, who said it; a little wider than the text on desktop */
#cma .cma-quote.cma-quote-mark{width:calc(100% + 120px);margin:58px -60px;padding:0;border:0;text-align:center}
#cma .cma-body .cma-quote.cma-quote-mark p{font:italic 400 38px/1.25 "Times New Roman",Times,serif;color:#21282e;margin:0;text-wrap:balance}
#cma .cma-quote.cma-quote-mark cite{display:block;font:400 11px/1 cma-helv,Helvetica,Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8a6d3b;font-style:normal;margin-top:20px}
/* in-text headings */
/* larger lines in the text: the same size against the text as in Elements (text 20px there and here) */
#cma .cma-body h2.cma-h{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#21282e;line-height:1.15;margin:40px 0 14px}
#cma .cma-body h2.cma-h-5xl,#cma .cma-body h2.cma-h-4xl{font-size:48px}
#cma .cma-body h2.cma-h-3xl{font-size:30px}
#cma .cma-body h2.cma-h-2xl{font-size:24px}
#cma .cma-body h2.cma-h-b{font-weight:700}
/* 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,#cma.cma-end-logo:has(.chw-gate) .cma-body::after{display:none}
@media (max-width:760px){
#cma .cma-quote.cma-quote-mark{width:100%;margin:42px 0}
#cma .cma-body .cma-quote.cma-quote-mark p{font-size:29px}
#cma .cma-body h2.cma-h{margin:32px 0 12px}
#cma .cma-body h2.cma-h-5xl,#cma .cma-body h2.cma-h-4xl{font-size:38px}
#cma .cma-body h2.cma-h-3xl{font-size:26px}
#cma .cma-body h2.cma-h-2xl{font-size:21px}
}