/* =============================================================================
   editorial.css — Shared styles for Tobacco Nexus editorial pages
   Included by: about · methodology · resources · the-big-five ·
                tobacco-industry-lobbying · tobacco-front-groups
   ============================================================================= */

/* ─── PAGE LAYOUT ─── */
/* max-width is set per-page since it varies (680px / 780px / 860px) */
.page{position:relative;z-index:1;margin:0 auto;padding:4rem 2.5rem 7rem}

/* ─── PAGE HEADER ─── */
/* .page-label and .page-kicker are aliases — used inconsistently across pages */
.page-label,.page-kicker{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:1rem;
}
.page-title{
  font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);
  font-weight:700;line-height:1.05;margin-bottom:1.2rem;letter-spacing:-.01em;
}
.page-title em{font-style:italic;color:var(--accent)}
.page-intro{
  font-size:.9rem;font-weight:300;color:var(--text2);
  line-height:1.8;max-width:640px;margin-bottom:3rem;
}
.page-intro strong{color:var(--text);font-weight:500}

/* ─── SECTION LABELS ─── */
/* Bumped from 9px to .75rem to maintain proper typographic hierarchy */
.section-label{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:.5rem;
}

/* ─── ABOUT / METHODOLOGY SECTIONS ─── */
.about-section{border-top:1px solid var(--border);padding:2rem 0;display:flex;flex-direction:column;gap:.9rem}
.about-section:last-child{border-bottom:1px solid var(--border)}
.about-section p{font-size:.875rem;font-weight:300;color:var(--text2);line-height:1.75}
.about-section p+p{margin-top:.6rem}
.about-section strong{color:var(--text);font-weight:500}
.about-section a{color:var(--text2);text-decoration:none;border-bottom:1px solid var(--border2);transition:all .15s}
.about-section a:hover{color:var(--text);border-color:var(--text3)}
.about-section em{font-style:italic}

/* ─── DASH LIST (methodology — criteria & categories) ─── */
.dash-list{display:flex;flex-direction:column;gap:.55rem;margin-top:.3rem}
.dash-row{font-size:.84rem;font-weight:300;color:var(--text2);line-height:1.65;padding-left:1.1rem;position:relative}
.dash-row::before{content:'—';position:absolute;left:0;color:var(--text3)}
.dash-row strong{color:var(--text);font-weight:500}

/* ─── LIMITS LIST (about) ─── */
.limits-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.3rem}
.limit-row{font-size:.82rem;font-weight:300;color:var(--text2);line-height:1.6;padding-left:1rem;position:relative}
.limit-row::before{content:'—';position:absolute;left:0;color:var(--text3)}

/* ─── SOURCE LIST ─── */
.source-list{display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem}
.source-row{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--text2);font-weight:300}
.source-row::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--accent);flex-shrink:0;opacity:.6}
.source-row a{color:var(--text2);text-decoration:none;border-bottom:1px solid var(--border2);transition:color .15s}
.source-row a:hover{color:var(--text)}

/* ─── LICENSE ROW ─── */
.license-row{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;font-size:.82rem;color:var(--text2);font-weight:300}

/* ─── TOC ─── */
.toc{border:1px solid var(--border2);border-radius:5px;padding:1.25rem 1.5rem;margin-bottom:3.5rem;background:var(--surface)}
.toc-label{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text3);display:block;margin-bottom:.85rem}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:.25rem}
.toc-list a{font-size:.82rem;color:var(--text2);text-decoration:none;transition:color .15s;display:block;padding:.15rem 0}
.toc-list a:hover{color:var(--text)}

/* ─── CTA BLOCK ─── */
.cta-block{margin-top:4rem;padding:2rem;background:var(--surface);border:1px solid var(--border2);border-radius:6px;text-align:center}
.cta-block h3{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-bottom:.6rem}
.cta-block p{font-size:.85rem;color:var(--text2);font-weight:300;margin-bottom:1.25rem}
.btn-cta{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:.7rem 1.6rem;background:var(--accent);color:#fff;border:2px solid var(--accent);border-radius:4px;text-decoration:none;transition:all .18s;white-space:nowrap}
.btn-cta:hover{background:transparent;color:var(--accent)}
.btn-ghost{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:.7rem 1.3rem;background:transparent;color:var(--text2);border:1.5px solid var(--border2);border-radius:4px;text-decoration:none;transition:all .18s;margin-left:.5rem}
.btn-ghost:hover{color:var(--text);border-color:var(--text3)}

/* ─── MOBILE BASE ─── */
@media(max-width:600px){
  .page{padding:2rem 1.2rem 5rem}
}