/* LINESURGE — article layout
   Single column. Shared class names across the site's long-form pages, each
   with a real rule so any article page renders from these three files alone. */

.article-page{max-width:820px;margin:0 auto;padding:34px 24px 60px}

.breadcrumb{font-size:12px;color:var(--text-3);margin:0 0 18px}
.breadcrumb a{color:var(--text-3)}
.breadcrumb a:hover{color:var(--volt)}
.breadcrumb-sep{margin:0 7px;color:var(--line-soft)}

.article-header{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:26px}
.article-h1{margin:0 0 16px;font-size:31px;line-height:1.32;font-weight:700;color:#fff}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;color:var(--text-3)}
.card-meta .cat{color:var(--volt);font-weight:700;letter-spacing:.06em;text-transform:uppercase}

.author-byline{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-3);margin-top:12px}
.author-name{color:var(--text-2);font-weight:700}
.author-sep{color:var(--line-soft)}

.article-hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin:0 0 28px;border:1px solid var(--line)}

.article-lead{font-size:17px;line-height:1.7;color:var(--text-2);margin:0 0 26px;padding-left:16px;
  border-left:3px solid var(--volt)}

.article-body{max-width:760px;margin:0 auto;font-size:15.5px;line-height:1.85;color:var(--text-2)}
.article-body h2{font-size:21px;color:#fff;margin:38px 0 13px;font-weight:700}
.article-body h3{font-size:16.5px;color:var(--text);margin:26px 0 9px;font-weight:700}
.article-body p{margin:0 0 18px}
.article-body ul,.article-body ol{padding-left:22px;margin:0 0 18px}
.article-body li{margin-bottom:8px}
.article-body a{color:var(--volt);text-decoration:underline}
.article-body a:hover{color:#fff}
.article-body img{border-radius:6px;margin:22px 0;border:1px solid var(--line)}
.article-body blockquote{margin:24px 0;padding:16px 18px;background:var(--ink-3);border-left:3px solid var(--magenta);
  color:var(--text-2);font-style:italic}
.article-body code{background:var(--ink-4);padding:2px 6px;border-radius:3px;font-size:13px}
.article-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.article-body th{background:var(--ink-3);color:#fff}

.author-bio-card{display:flex;gap:16px;align-items:flex-start;background:var(--ink-3);border:1px solid var(--line);
  border-radius:6px;padding:20px;margin:44px 0 0}
.author-bio-avatar{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line-soft)}
.author-bio-name{margin:0 0 3px;font-size:15px;font-weight:700;color:#fff}
.author-bio-title{margin:0 0 9px;font-size:12px;color:var(--volt)}
.author-bio-text{margin:0;font-size:13.5px;color:var(--text-3);line-height:1.7}

.faq-section{margin:44px 0 0;border-top:1px solid var(--line);padding-top:30px}
.faq-section h2{font-size:20px;margin:0 0 18px;color:#fff}
#faq-items{display:grid;gap:12px}
#faq-items details{background:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:14px 16px}
#faq-items summary{cursor:pointer;font-weight:700;font-size:14.5px;color:#fff;list-style:none}
#faq-items summary::-webkit-details-marker{display:none}
#faq-items summary::after{content:"+";float:right;color:var(--volt);font-weight:800}
#faq-items details[open] summary::after{content:"−"}
#faq-items p{margin:11px 0 0;font-size:14px;color:var(--text-2);line-height:1.75}

.cta-banner{margin:44px 0 0;background:linear-gradient(115deg,var(--hero-a),var(--hero-b));
  border:1px solid var(--line-soft);border-radius:8px;padding:28px 26px;text-align:center}
.cta-banner h3{margin:0 0 8px;font-size:19px;color:#fff}
.cta-banner p{margin:0 0 16px;color:var(--text-2);font-size:14px}

.related-section{margin:48px 0 0;border-top:1px solid var(--line);padding-top:30px}
.related-section h2{font-size:19px;margin:0 0 18px;color:#fff}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{background:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:15px}
.rel-title{margin:0;font-size:14px;line-height:1.5;font-weight:700;color:var(--text)}

/* ---------- article index cards ---------- */
.article-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.article-card{background:var(--ink-3);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s}
.article-card:hover{transform:translateY(-4px);border-color:var(--line-soft)}
.article-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--ink-4)}
/* higher specificity: bare .article-body is the long-form text column above */
.article-card .article-body{max-width:none;margin:0;padding:15px 16px 18px;display:flex;flex-direction:column;
  flex:1;font-size:14px;line-height:1.6}
.article-meta{display:flex;align-items:center;gap:9px;font-size:11.5px;margin:0 0 9px}
.article-cat{color:var(--volt);font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.article-date{color:var(--text-3)}
.article-excerpt{margin:0 0 14px;font-size:13.5px;color:var(--text-3);line-height:1.65;flex:1}
.article-link{font-size:13px;font-weight:700;color:var(--volt);align-self:flex-start}
.article-link:hover{color:#fff;text-decoration:underline}

@media (max-width:900px){.rel-grid,.article-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){
  .rel-grid,.article-list{grid-template-columns:1fr}
  .article-h1{font-size:24px}
  .author-bio-card{flex-direction:column}
}