/* cheek&glow — article page, built around the recurring Expert Debate format. */
/* ---- breadcrumb ---- */
.crumbs{font-size:.78rem;color:var(--ink-dim);display:flex;gap:6px;flex-wrap:wrap;max-width:760px;margin:28px auto 24px;}
.crumbs a{color:var(--ink-dim);transition:color .15s;}
.crumbs a:hover{color:var(--mauve);}
.crumbs .sep{opacity:.5;}
.crumbs .current{color:var(--ink);}

/* ---- article head ---- */
.article-head{max-width:760px;margin:0 auto 30px;}
.article-tag-row{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.article-tag-solid{display:inline-flex;align-items:center;background:var(--ink);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px;}
.article-format{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mauve);}
.article-head h1{font-size:clamp(2.1rem,4.4vw,3.1rem);font-weight:500;line-height:1.1;letter-spacing:-.01em;margin-bottom:22px;}

.byline-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.byline-avatar{width:36px;height:36px;border-radius:999px;background:var(--pastel-pink);color:var(--mauve);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:500;font-size:.92rem;flex-shrink:0;}
.byline-name{font-size:.84rem;color:var(--ink);font-weight:600;}
.byline-item{font-size:.84rem;color:var(--ink-dim);}
.byline-dot{font-size:.84rem;color:var(--border);line-height:1;}
.badge-outline{display:inline-flex;align-items:center;border:1px solid var(--terracotta);color:var(--terracotta);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;}

.article-dek{font-size:1.1rem;line-height:1.6;color:var(--ink-dim);}

/* ---- hero image ---- */
.article-hero{max-width:760px;margin:30px auto 10px;border-radius:14px;overflow:hidden;background:var(--surface-2);}
.article-hero img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;}
.img-caption{font-size:.8rem;color:var(--ink-dim);text-align:center;max-width:720px;margin:10px auto 0;line-height:1.5;}

/* ---- article body ---- */
.article-body{max-width:760px;margin:42px auto 0;}
.article-body > p{font-size:1.05rem;line-height:1.75;color:var(--ink);margin-bottom:22px;}
.article-body h2{font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:500;margin:42px 0 18px;line-height:1.25;}

/* ---- key numbers strip ---- */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:34px 0;}
.stat-strip div{padding:26px 18px;text-align:center;border-left:1px solid var(--border);}
.stat-strip div:first-child{border-left:none;}
.stat-num{display:block;font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.2rem);font-weight:500;color:var(--mauve);line-height:1;margin-bottom:8px;}
.stat-label{font-size:.78rem;color:var(--ink-dim);line-height:1.4;}
@media (max-width:620px){
  .stat-strip{grid-template-columns:1fr;}
  .stat-strip div{border-left:none;border-top:1px solid var(--border);}
  .stat-strip div:first-child{border-top:none;}
}

/* ---- callout ---- */
.callout{background:var(--pastel-blue);border-left:3px solid var(--terracotta);border-radius:4px;padding:22px 26px;margin:34px 0;}
.callout .eyebrow{display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mauve);margin-bottom:10px;}
.callout p{font-size:.98rem;line-height:1.65;color:var(--ink);margin:0;}

/* ---- perspectives ---- */
.perspective{padding:28px 0;border-top:1px solid var(--border);}
.perspective:first-of-type{border-top:none;padding-top:10px;}
.perspective-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.perspective-who{flex:1;min-width:200px;}
.perspective-eyebrow{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px;}
.perspective-head h3{font-size:1.35rem;font-weight:500;}
.perspective-head .cred{font-size:.85rem;color:var(--ink-dim);font-style:italic;margin-top:2px;}
.stance-pill{flex-shrink:0;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 13px;border-radius:999px;white-space:nowrap;margin-top:2px;}
.stance-pro{background:#f3e6e1;color:var(--terracotta);}
.stance-skeptic{background:#efe3e2;color:var(--mauve);}
.stance-depends{background:#e9e3df;color:var(--espresso);}
.perspective-intro{font-size:1.02rem;line-height:1.7;color:var(--ink);margin-bottom:16px;}
.perspective-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.perspective-points li{font-size:.98rem;line-height:1.65;color:var(--ink);padding-left:20px;position:relative;}
.perspective-points li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:999px;background:var(--terracotta);}
.perspective-points strong{font-weight:700;}

/* ---- synthesis ---- */
.synthesis-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:40px 0;}
.synthesis-box{border-radius:14px;padding:24px 26px;}
.synthesis-agree{background:var(--pastel-sage);}
.synthesis-disagree{background:var(--pastel-pink);}
.synthesis-box h3{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;font-family:var(--font-body);}
.synthesis-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.synthesis-box li{font-size:.92rem;line-height:1.6;color:var(--ink);padding-left:20px;position:relative;}
.synthesis-agree li::before{content:"✓";position:absolute;left:0;top:0;color:var(--mauve);font-weight:700;font-size:.85rem;}
.synthesis-disagree li::before{content:"✕";position:absolute;left:0;top:0;color:var(--terracotta);font-weight:700;font-size:.78rem;}
@media (max-width:680px){.synthesis-grid{grid-template-columns:1fr;}}

/* ---- pull statement ---- */
.pull-statement{max-width:640px;margin:50px auto;text-align:center;}
.pull-statement p{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:500;font-style:italic;line-height:1.35;color:var(--ink);}

/* ---- the voices ---- */
.voices-section{padding-block:56px;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.section-head-centered{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:30px;text-align:center;}
.section-head-centered .dots{display:flex;gap:5px;}
.section-head-centered .dots span{width:4px;height:4px;border-radius:999px;background:var(--terracotta);opacity:.7;}
.section-head-centered h2{font-size:clamp(1.7rem,3.2vw,2.2rem);font-weight:500;}
.voices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1080px;margin:0 auto;}
.voice-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:26px 24px;display:flex;flex-direction:column;gap:14px;}
.voice-top{display:flex;align-items:center;gap:12px;}
.voice-avatar{width:44px;height:44px;border-radius:999px;background:var(--pastel-blue);color:var(--mauve);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:500;font-size:1rem;flex-shrink:0;}
.voice-name{font-family:var(--font-display);font-size:1.05rem;font-weight:500;color:var(--ink);}
.voice-title{font-size:.78rem;color:var(--ink-dim);margin-top:2px;}
.voice-stance{align-self:flex-start;}
.voice-quote{font-family:var(--font-display);font-style:italic;font-size:.98rem;line-height:1.55;color:var(--ink);}
@media (max-width:860px){.voices-grid{grid-template-columns:1fr;}}

/* ---- the edit's take ---- */
.edits-take{max-width:760px;margin:48px auto 0;padding:0 0 10px;}
.edits-take .eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mauve);margin-bottom:10px;}
.edits-take h2{font-size:clamp(1.5rem,2.8vw,1.9rem);font-weight:500;margin-bottom:16px;}
.edits-take p{font-size:1rem;line-height:1.75;color:var(--ink);margin-bottom:16px;}
.edits-sig{font-size:.9rem;color:var(--ink-dim);font-style:italic;}

/* ---- keep reading ---- */
.keep-reading{max-width:760px;margin:52px auto 0;padding-top:30px;border-top:1px solid var(--border);}
.keep-reading h3{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px;}
.keep-reading ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.keep-reading li{border-top:1px solid var(--border);}
.keep-reading li:first-child{border-top:none;}
.keep-reading a{display:flex;align-items:baseline;gap:14px;padding:16px 0;color:var(--ink);transition:color .15s;flex-wrap:wrap;}
.keep-reading a:hover{color:var(--terracotta);}
.keep-reading .kr-tag{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mauve);flex-shrink:0;width:72px;}
.keep-reading .kr-title{font-family:var(--font-display);font-size:1.03rem;font-weight:500;}

.article-shell{padding-bottom:10px;}


/* ===== Live-site additions: real article bodies and the platform's editorial blocks ===== */

.article-column { max-width: 760px; margin-inline: auto; }
.article-tag-solid:hover { background: var(--mauve); }

/* Whatever an editor or the writing pipeline puts in the body */
.article-body p { font-size: 1.05rem; line-height: 1.75; color: var(--ink); margin-bottom: 22px; }
.article-body h3 { font-size: 1.3rem; font-weight: 500; line-height: 1.3; margin: 34px 0 14px; }
.article-body h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.3; margin: 28px 0 12px; }
.article-body h5, .article-body h6 { font-family: var(--font-body); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 26px 0 12px; }
.article-body a { color: var(--mauve); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--espresso); }
.article-body > ul, .article-body > ol { margin: 0 0 22px; padding-left: 22px; font-size: 1.02rem; line-height: 1.7; }
.article-body > ul li, .article-body > ol li { margin-bottom: 8px; }
.article-body li::marker { color: var(--terracotta); }
.article-body img { display: block; max-width: 100%; height: auto; border-radius: 14px; }
.article-body figure { margin: 34px 0; }
.article-body figcaption { font-size: .8rem; color: var(--ink-dim); text-align: center; margin-top: 10px; line-height: 1.5; }
.article-body table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: .92rem; }
.article-body th, .article-body td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.article-body th { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--surface); }
.article-body blockquote { max-width: 640px; margin: 50px auto; text-align: center; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; font-style: italic; line-height: 1.35; color: var(--ink); }
.article-body blockquote p { font: inherit; margin: 0; color: inherit; }

.callout .callout-text { font-size: .98rem; line-height: 1.65; color: var(--ink); }
.callout .callout-text + .callout-text { margin-top: 12px; }
.perspective .cred { font-size: .85rem; color: var(--ink-dim); font-style: italic; margin-top: 2px; }
.perspective p { font-size: .98rem; line-height: 1.65; margin-bottom: 14px; }
.perspective .perspective-intro { font-size: 1.02rem; line-height: 1.7; margin-bottom: 16px; }
.perspective:first-of-type { border-top: 1px solid var(--border); padding-top: 28px; }
.synthesis-box ul { padding: 0; }
.voice-avatar { overflow: hidden; }
.voice-avatar img { width: 100%; height: 100%; object-fit: cover; }
.voice-name a:hover { color: var(--terracotta); }

/* The take: flat on white by default, a panel if Site Config picks another colour */
.edits-take { background: var(--take-bg, transparent); color: var(--take-text, var(--ink)); }
.edits-take .eyebrow { color: var(--take-accent, var(--mauve)); }
.edits-take p { color: inherit; }
.edits-take-filled { padding: 30px 32px; border-radius: 14px; }
.edits-verdict { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.5; }
.edits-body { font-size: 1rem; line-height: 1.75; margin-bottom: 16px; }
.edits-body a { text-decoration: underline; }
.edits-sig { color: inherit; opacity: .72; }

/* Reader vote */
.vote-meter, .reactions, .article-quiz, .article-refs, .spinoffs { margin-top: 44px; }
.vote-meter { padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.vote-meter h3, .reactions h3, .article-refs h3, .spinoffs h3, .comments h3 { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); font-family: var(--font-body); margin-bottom: 14px; }
.vote-buttons { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.vote-buttons button, .reaction-buttons button { flex: 1; min-width: 120px; padding: 12px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; color: var(--ink); font-size: .9rem; font-weight: 600; transition: border-color .15s, color .15s; }
.vote-buttons button:hover:not(:disabled), .reaction-buttons button:hover:not(:disabled) { border-color: var(--terracotta); color: var(--mauve); }
.vote-buttons button:disabled, .reaction-buttons button:disabled { opacity: .55; cursor: default; }
.vote-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vote-bar span { display: block; height: 100%; background: var(--terracotta); transition: width .3s; }
.vote-legend { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; font-size: .8rem; color: var(--ink-dim); flex-wrap: wrap; }
.reaction-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.reaction-buttons [data-count] { color: var(--ink-dim); font-weight: 500; margin-left: 4px; }

/* References, disclaimer, tags, share */
.article-refs ol { margin: 0; padding-left: 22px; }
.article-refs li { font-size: .92rem; line-height: 1.6; margin-bottom: 10px; }
.article-refs li::marker { color: var(--terracotta); }
.article-refs a { color: var(--mauve); text-decoration: underline; text-underline-offset: 2px; }
.ref-source { display: block; margin-top: 2px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.article-disclaimer { margin-top: 36px; font-size: .8rem; line-height: 1.55; color: var(--ink-dim); }
.article-foot { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.article-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.article-tags a { padding: 5px 12px; background: var(--surface-2); border-radius: 999px; font-size: .74rem; color: var(--ink-dim); transition: color .15s; }
.article-tags a:hover { color: var(--mauve); }
.article-share { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: .82rem; }
.article-share span { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.article-share a { color: var(--mauve); font-weight: 600; }
.article-share a:hover { color: var(--espresso); }

/* Spin-offs */
.spinoff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.spinoff { padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.spinoff-title { font-family: var(--font-display); font-size: 1rem; font-weight: 500; line-height: 1.35; }
.spinoff-premise { margin-top: 6px; font-size: .84rem; line-height: 1.5; color: var(--ink-dim); }
@media (max-width: 620px) { .spinoff-grid { grid-template-columns: 1fr; } }

/* Keep reading: the tag column has to hold a longer category name than the mockup's */
.keep-reading .kr-tag { width: 92px; }
.keep-reading a { flex-wrap: nowrap; }
@media (max-width: 540px) { .keep-reading a { flex-wrap: wrap; gap: 4px 14px; } }

/* Previous / next */
.article-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border); }
.article-pager a { font-family: var(--font-display); font-size: 1rem; font-weight: 500; line-height: 1.35; transition: color .15s; }
.article-pager a:hover { color: var(--terracotta); }
.article-pager a span { display: block; margin-bottom: 6px; font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.article-pager .next { text-align: right; grid-column: 2; }
@media (max-width: 540px) { .article-pager { grid-template-columns: 1fr; } .article-pager .next { text-align: left; grid-column: 1; } }

/* Comments */
.comments { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--border); scroll-margin-top: 100px; }
.comment { padding: 16px 0; border-bottom: 1px solid var(--border); font-size: .95rem; line-height: 1.6; }
.comment-head { font-size: .8rem; color: var(--ink-dim); margin-bottom: 4px; }
.comment-head strong { color: var(--ink); font-weight: 600; }
.comment-flash { padding: 12px 16px; background: var(--pastel-sage); border-radius: 10px; font-size: .9rem; margin-bottom: 10px; }

/* The body's heading rules are broader than these components' own, so restate them. */
.article-body .perspective-head h3 { font-size: 1.35rem; margin: 0; }
.article-body .synthesis-box h3 { font-family: var(--font-body); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 14px; }
.article-body .synthesis-box p, .article-body .synthesis-box li { font-size: .92rem; line-height: 1.6; }

/* Columns follow however many numbers the post has; phones keep the design's single stack. */
@media (min-width: 621px) { .stat-strip { grid-template-columns: repeat(var(--stat-cols, 3), 1fr); } }