/* VOXELREACH — 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:840px;margin:0 auto;padding:36px 28px 64px}

.breadcrumb{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:0 0 20px}
.breadcrumb a{color:var(--text-3)}
.breadcrumb a:hover{color:var(--acid)}
.breadcrumb-sep{margin:0 8px;color:var(--line-2)}

.article-header{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:28px}
.article-h1{margin:0 0 16px;font-size:34px;line-height:1.22;font-weight:700;letter-spacing:-.4px;color:#fff}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:11px;font-size:11.5px;color:var(--text-3);
  letter-spacing:.06em}
.card-meta .cat{color:var(--acid);font-weight:700;letter-spacing:.14em;text-transform:uppercase}

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

.article-hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;margin:0 0 30px;border:2px solid var(--acid)}

.article-lead{font-size:17px;line-height:1.72;color:var(--text-2);margin:0 0 28px;padding:18px 20px;
  background:var(--panel);border-left:3px solid var(--acid)}

.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:23px;color:#fff;margin:40px 0 14px;font-weight:700;letter-spacing:-.2px}
.article-body h3{font-size:16px;color:var(--acid);margin:28px 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(--acid);text-decoration:underline}
.article-body a:hover{color:#fff}
.article-body img{margin:24px 0;border:1px solid var(--line)}
.article-body blockquote{margin:26px 0;padding:18px 20px;background:var(--panel-2);
  border-left:3px solid var(--magenta);color:#fff;font-size:17px}
.article-body code{background:var(--panel-2);padding:2px 6px;font-size:13px;color:var(--acid)}
.article-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
.article-body th,.article-body td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.article-body th{background:var(--panel);color:#fff;letter-spacing:.06em}

.author-bio-card{display:flex;gap:18px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  padding:24px;margin:46px 0 0}
.author-bio-avatar{width:64px;height:64px;object-fit:cover;flex:none;border:1px solid var(--acid)}
.author-bio-name{margin:0 0 4px;font-size:16px;font-weight:700;color:#fff}
.author-bio-title{margin:0 0 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acid)}
.author-bio-text{margin:0;font-size:13.5px;color:var(--text-3);line-height:1.7}

.faq-section{margin:46px 0 0;border-top:1px solid var(--line);padding-top:32px}
.faq-section h2{font-size:22px;margin:0 0 18px;color:#fff}
#faq-items{display:grid;gap:12px}
#faq-items details{background:var(--panel);border:1px solid var(--line);padding:15px 18px}
#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(--acid);font-weight:700}
#faq-items details[open] summary::after{content:"\2013"}
#faq-items p{margin:12px 0 0;font-size:14px;color:var(--text-2);line-height:1.75}

.cta-banner{margin:46px 0 0;border:2px solid var(--acid);background:var(--panel);padding:32px 28px;text-align:center}
.cta-banner h3{margin:0 0 9px;font-size:21px;color:#fff}
.cta-banner p{margin:0 0 18px;color:var(--text-2);font-size:14.5px}

.related-section{margin:50px 0 0;border-top:1px solid var(--line);padding-top:32px}
.related-section h2{font-size:20px;margin:0 0 18px;color:#fff}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{background:var(--panel);border:1px solid var(--line);padding:16px}
.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(--panel);border:1px solid var(--line);display:flex;flex-direction:column;transition:.18s}
.article-card:hover{border-color:var(--acid)}
.article-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.8}
/* higher specificity: bare .article-body is the long-form text column above */
.article-card .article-body{max-width:none;margin:0;padding:18px 20px 22px;display:flex;flex-direction:column;
  flex:1;font-size:14px;line-height:1.6}
.article-meta{display:flex;align-items:center;gap:10px;font-size:10.5px;margin:0 0 10px;letter-spacing:.08em}
.article-cat{color:var(--acid);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.article-date{color:var(--text-3)}
.article-excerpt{margin:0 0 15px;font-size:13.5px;color:var(--text-3);line-height:1.65;flex:1}
.article-link{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acid);
  align-self:flex-start}
.article-link:hover{color:#fff}

@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:26px}
  .author-bio-card{flex-direction:column}
}