/* ============================================================
   ARTICLE / GUIDE STYLES — long-form SEO content (v2)
   ============================================================ */

/* table of contents */
.toc{border:1px solid var(--line);background:linear-gradient(180deg,rgba(17,26,20,.55),rgba(11,19,14,.4));padding:28px 32px;margin-bottom:40px;border-radius:var(--radius);position:relative}
.toc::before{content:"";position:absolute;top:-1px;left:0;width:60px;height:2px;background:var(--grad-gold)}
.toc h4{font-family:'Barlow Condensed',sans-serif;font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--cop-lt);font-weight:500;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:9px}
.toc li{counter-increment:toc;display:flex;gap:12px;align-items:baseline}
.toc li::before{content:counter(toc,decimal-leading-zero);font-family:'Fraunces',serif;font-size:.9rem;color:var(--cop);flex:none}
.toc a{color:rgba(242,236,226,.75);font-size:.95rem;font-weight:300;transition:.2s var(--ease)}
.toc a:hover{color:var(--brass);padding-left:3px}

/* stat band */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:40px 0}
.statband .s{border:1px solid var(--line);background:linear-gradient(180deg,rgba(17,26,20,.55),rgba(11,19,14,.4));padding:24px;text-align:center;border-radius:var(--radius);transition:.3s var(--ease)}
.statband .s:hover{border-color:var(--brass);transform:translateY(-3px)}
.statband .s b{font-family:'Fraunces',serif;font-size:2.1rem;color:var(--brass);display:block;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}
.statband .s span{font-family:'Barlow Condensed',sans-serif;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);margin-top:8px;display:block;line-height:1.4}

/* article body */
.article{max-width:none}
.article h2{font-size:clamp(1.85rem,3.2vw,2.6rem);margin:58px 0 18px;scroll-margin-top:110px;font-weight:500}
.article h2:first-child{margin-top:0}
.article h2 i{font-style:italic}
.article h3{font-size:1.5rem;margin:34px 0 12px;color:var(--bone);font-weight:500}
.article p{color:rgba(242,236,226,.72);font-size:1.03rem;line-height:1.85;font-weight:300;margin-bottom:1.15rem}
.article p strong,.article strong{color:var(--bone);font-weight:600}
.article a.ilink{color:var(--brass);border-bottom:1px solid rgba(217,164,65,.4);transition:.2s var(--ease)}
.article a.ilink:hover{border-color:var(--brass);background:rgba(217,164,65,.08)}
.article ul,.article ol{margin:0 0 1.4rem 0;padding-left:0;list-style:none;display:block}
.article ul li,.article ol li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;color:rgba(242,236,226,.72);font-size:1rem;line-height:1.75;font-weight:300}
.article ul li::before{content:"";position:absolute;left:.2rem;top:.62rem;width:7px;height:7px;background:var(--cop);transform:rotate(45deg)}
.article ol{counter-reset:ol}
.article ol li{counter-increment:ol}
.article ol li::before{content:counter(ol,decimal-leading-zero);position:absolute;left:0;top:0;font-family:'Fraunces',serif;color:var(--cop);font-size:.95rem}
.article li strong,.article li b{font-weight:600;color:var(--bone)}

/* callout */
.callout{border-left:2px solid var(--brass);background:rgba(217,164,65,.08);padding:22px 26px;margin:28px 0;border-radius:0 var(--radius) var(--radius) 0}
.callout p{margin:0;color:rgba(242,236,226,.82);font-size:.99rem;line-height:1.7}
.callout .ct{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass);display:block;margin-bottom:8px}
.callout.warn{border-color:#d98a7a;background:rgba(217,138,122,.08)}
.callout.warn .ct{color:#d98a7a}

/* data table */
.dtable{width:100%;border-collapse:collapse;margin:26px 0;font-size:.94rem}
.dtable th{font-family:'Barlow Condensed',sans-serif;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cop-lt);text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font-weight:500}
.dtable td{padding:13px 16px;border-bottom:1px solid rgba(79,146,104,.14);color:rgba(242,236,226,.74);font-weight:300}
.dtable tr:hover td{background:rgba(17,26,20,.5)}
.dtable td b{color:var(--brass);font-weight:500}

/* source cite */
.src{font-size:.82rem;color:var(--mut);font-style:italic;margin-top:-.6rem;margin-bottom:1.6rem;display:block;font-weight:300}
.src a{color:var(--cop-lt);border-bottom:1px solid rgba(217,164,65,.3)}
.src a:hover{color:var(--brass)}

/* guide layout w/ sidebar */
.glayout{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
.gside{position:sticky;top:110px;display:grid;gap:18px}
.gside .card2{border:1px solid var(--line);background:linear-gradient(180deg,rgba(17,26,20,.65),rgba(11,19,14,.5));padding:26px;border-radius:var(--radius);transition:.3s var(--ease)}
.gside .card2:hover{border-color:var(--line)}
.gside .card2 h4{font-family:'Barlow Condensed',sans-serif;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass);margin-bottom:14px;font-weight:500}
.gside .card2 p{font-size:.9rem;color:var(--mut);line-height:1.65;font-weight:300;margin-bottom:14px}
.gside .lrow2{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dotted rgba(79,146,104,.2);font-size:.86rem}
.gside .lrow2:last-of-type{border:0}
.gside .lrow2 span{color:var(--mut);font-family:'Barlow Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.gside .lrow2 b{color:var(--brass);font-family:'Fraunces',serif;font-weight:500;font-variant-numeric:tabular-nums}

/* related links */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.rl{border:1px solid var(--line);background:rgba(17,26,20,.45);padding:22px;transition:.28s var(--ease);display:block;border-radius:var(--radius)}
.rl:hover{border-color:var(--brass);transform:translateY(-4px);box-shadow:var(--shadow)}
.rl .k{font-family:'Barlow Condensed',sans-serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cop-lt);display:block;margin-bottom:8px}
.rl h4{font-family:'Fraunces',serif;font-size:1.15rem;color:var(--bone);font-weight:500;line-height:1.3}

@media(max-width:1100px){
  .glayout{grid-template-columns:1fr;gap:36px}
  .gside{position:static}
  .statband{grid-template-columns:1fr 1fr}
  .related{grid-template-columns:1fr}
}
@media(max-width:680px){
  .statband{grid-template-columns:1fr 1fr;gap:10px}
  .statband .s{padding:16px}
  .statband .s b{font-size:1.5rem}
  .dtable{font-size:.85rem}
  .dtable th,.dtable td{padding:9px 8px}
  .toc{padding:20px}
}

/* ---- mobile hardening (Spotlight reskin) ---- */
.glayout{min-width:0}
.glayout > *{min-width:0}
.article{min-width:0;overflow-wrap:break-word}
@media(max-width:680px){
  .dtable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .dtable thead,.dtable tbody,.dtable tr{display:table;width:100%;table-layout:fixed}
}
.article ul li, .article ol li{min-width:0}
.article ul li strong, .article ol li strong{overflow-wrap:break-word}

/* ============================================================
   LIGHT-THEME OVERRIDES — article/guide content
   (article.css hardcodes near-white text; remap for light bg)
   ============================================================ */
[data-theme="light"] .toc{background:linear-gradient(180deg,#ffffff,#f6f2e9)}
[data-theme="light"] .toc a{color:#33413a}
[data-theme="light"] .toc a:hover{color:var(--brass)}
[data-theme="light"] .toc li::before{color:#a97817}
[data-theme="light"] .article p{color:#33413a}
[data-theme="light"] .article ul li,
[data-theme="light"] .article ol li{color:#33413a}
[data-theme="light"] .article ul li::before,
[data-theme="light"] .article ol li::before{color:#1f7a52;background:#1f7a52}
[data-theme="light"] .article ol li::before{background:none}
[data-theme="light"] .article li strong,
[data-theme="light"] .article li b,
[data-theme="light"] .article p strong{color:#16241c}
[data-theme="light"] .callout p{color:#33413a}
[data-theme="light"] .dtable td{color:#3a473f}
[data-theme="light"] .statband .s{background:linear-gradient(180deg,#ffffff,#f6f2e9)}
[data-theme="light"] .gside .card2{background:linear-gradient(180deg,#ffffff,#f6f2e9)}
[data-theme="light"] .gside .card2 p{color:#5c6b60}
[data-theme="light"] .rl{background:#ffffff}