/* ============================================================
   Prometheus articles — index and post.
   Loads AFTER redesign.css. Tokens follow pages.css: cream body
   for long-form reading, dark hero and close to match /work.
   Small accent text on light surfaces uses #A62F0F, the AA-safe
   flame; #FF5B23 is reserved for large type, rules, and marks.
   ============================================================ */

.art-page{background:#FAF7F2;color:#111111}
.art-container{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.art-page .skip{position:absolute;left:-9999px}
.art-page .skip:focus{left:16px;top:16px;z-index:200;padding:10px 16px;background:#FF5B23;color:#0A0A0A;font-weight:600}

/* ---- shared eyebrow / mono label ---- */
.art-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#5F5A55}
.art-label--flame{color:#A62F0F}
.art-label--dark{color:#FF5B23}

/* ---- hero (dark, matches case studies) ---- */
.art-hero{padding:calc(66px + clamp(56px,9vh,110px)) 0 clamp(48px,7vh,84px);background:#0A0A0A;color:#FAF0E6;border-bottom:1px solid rgba(250,240,230,.1)}
.art-hero .art-label{color:#FF5B23}
.art-hero h1{margin:14px 0 0;max-width:20ch;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(38px,5.6vw,74px);font-weight:400;line-height:1.02;letter-spacing:-.01em}
.art-hero-lede{margin:18px 0 0;max-width:62ch;font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:#A8A29E}
.art-hero-count{margin:26px 0 0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6B645E}

/* ---- index controls ---- */
.art-controls{position:sticky;top:66px;z-index:20;padding:16px 0;background:rgba(250,247,242,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--sp-line,#E4DED6)}
.art-controls-inner{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.art-search{flex:1 1 260px;min-width:0;position:relative}
.art-search input{width:100%;min-height:44px;padding:11px 14px 11px 38px;font-size:15px;color:#111111;background:#FFFFFF;border:1px solid #DCD8D4;border-radius:0}
.art-search input:focus{outline:none;border-color:#FF5B23}
.art-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#8A8078;pointer-events:none}
.art-filters{display:flex;flex-wrap:wrap;gap:8px}
.art-filter{padding:8px 14px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#5F5A55;background:transparent;border:1px solid #DCD8D4;border-radius:0;cursor:pointer;transition:color 150ms,border-color 150ms,background-color 150ms}
.art-filter:hover{color:#111111;border-color:#B9B2AA}
.art-filter[aria-pressed="true"]{color:#0A0A0A;background:#FF5B23;border-color:#FF5B23}

/* ---- index grid ---- */
.art-grid-wrap{padding:clamp(40px,6vh,72px) 0 clamp(64px,10vh,120px)}
/* auto-fit, not repeat(3): empty tracks collapse, so a partial row never
   leaves the 1px background bleeding through as grey voids. */
.art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1px;background:var(--sp-line,#E4DED6);border:1px solid var(--sp-line,#E4DED6)}
.art-card{display:flex;flex-direction:column;gap:10px;min-height:196px;padding:28px 26px 26px;background:#FAF7F2;color:#111111;transition:background-color 180ms}
.art-card:hover{background:#FFFFFF;color:#111111}
.art-card-cat{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#A62F0F}
.art-card h2,.art-card h3{margin:0;font-size:19px;font-weight:600;line-height:1.28;color:#111111}
.art-card:hover h2,.art-card:hover h3{color:#A62F0F}
.art-card p{margin:0;max-width:60ch;font-size:14.5px;line-height:1.55;color:#4A4A48}
.art-card-meta{margin-top:auto;padding-top:16px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6B645E}
.art-empty{padding:56px 0;font-size:16px;line-height:1.6;color:#4A4A48}

/* ---- post: byline ---- */
.art-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:22px 0 0;font-size:13.5px;color:#A8A29E}
.art-post-meta strong{font-weight:600;color:#FAF0E6}
.art-post-meta .art-dot{color:#4A4540}
.art-back{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#8A8078}
.art-back:hover{color:#FF5B23}

/* ---- post: two-column body with sticky TOC ---- */
.art-body{padding:clamp(48px,7vh,86px) 0 clamp(56px,8vh,96px)}
.art-body-grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.art-toc{position:sticky;top:96px}
.art-toc ol{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--sp-line,#E4DED6)}
.art-toc a{display:block;padding:11px 0;border-bottom:1px solid var(--sp-line,#E4DED6);font-size:13.5px;line-height:1.35;color:#4A4A48}
.art-toc a:hover{color:#A62F0F}
.art-toc a.is-current{color:#111111;font-weight:600;box-shadow:inset 2px 0 0 #FF5B23;padding-left:11px}

/* ---- post: prose ---- */
.art-prose{min-width:0;max-width:74ch}
.art-prose h2{margin:clamp(44px,6vh,72px) 0 0;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(27px,3.1vw,38px);font-weight:400;line-height:1.1;color:#111111;scroll-margin-top:120px}
.art-prose h2:first-child{margin-top:0}
.art-prose h3{margin:34px 0 0;font-size:17.5px;font-weight:600;line-height:1.35;color:#111111;scroll-margin-top:120px}
.art-prose p{margin:15px 0 0;font-size:16.5px;line-height:1.68;color:#33322F}
.art-prose ul,.art-prose ol{margin:16px 0 0;padding-left:22px}
.art-prose li{margin:9px 0 0;font-size:16.5px;line-height:1.62;color:#33322F}
.art-prose li strong{color:#111111}
.art-prose a{color:#111111;text-decoration:underline;text-decoration-color:#FF5B23;text-decoration-thickness:1px;text-underline-offset:3px}
.art-prose a:hover{color:#A62F0F;text-decoration-color:#A62F0F}
.art-prose strong{font-weight:600;color:#111111}

/* ---- post: quick answer (the extraction unit) ---- */
.art-answer{padding:26px 28px;background:#FFFFFF;border:1px solid var(--sp-line,#E4DED6);border-left:3px solid #FF5B23}
.art-answer p{margin:12px 0 0;font-size:17px;line-height:1.62;color:#33322F}
.art-answer p:first-of-type{margin-top:10px}

/* ---- post: table ---- */
.art-table-wrap{margin:26px 0 0;overflow-x:auto;border:1px solid var(--sp-line,#E4DED6)}
.art-table{width:100%;min-width:620px;border-collapse:collapse;background:#FFFFFF;font-size:14.5px}
.art-table th,.art-table td{padding:14px 16px;text-align:left;vertical-align:top;line-height:1.5;border-bottom:1px solid var(--sp-line,#E4DED6)}
.art-table th{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#5F5A55;background:#F4F0EA}
.art-table td{color:#33322F}
.art-table td:first-child{font-weight:600;color:#111111;white-space:nowrap}
.art-table tr:last-child td{border-bottom:0}
.art-caption{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:#6B645E}

/* ---- post: takeaways ---- */
.art-takeaways{margin:clamp(44px,6vh,72px) 0 0;padding:28px;background:#F4F0EA;border:1px solid var(--sp-line,#E4DED6)}
.art-takeaways h2{margin:10px 0 0;font-size:clamp(24px,2.6vw,31px)}
.art-takeaways ul{list-style:none;margin:18px 0 0;padding:0}
.art-takeaways li{position:relative;margin:0;padding:13px 0 13px 22px;border-top:1px solid var(--sp-line,#E4DED6);font-size:15.5px;line-height:1.58}
.art-takeaways li::before{content:'';position:absolute;left:0;top:21px;width:7px;height:1px;background:#FF5B23}

/* ---- post: FAQ ---- */
.art-faq{margin:clamp(44px,6vh,72px) 0 0}
.art-faq-entry{padding:22px 0;border-bottom:1px solid var(--sp-line,#E4DED6)}
.art-faq-entry:first-of-type{border-top:1px solid var(--sp-line,#E4DED6)}
.art-faq-entry h3{margin:0;font-size:17px;font-weight:600;line-height:1.4;color:#111111}
.art-faq-entry p{margin:10px 0 0;max-width:74ch;font-size:15.5px;line-height:1.65;color:#4A4A48}

/* ---- post: mid-article CTA ---- */
.art-cta{margin:clamp(44px,6vh,72px) 0 0;padding:30px 30px 32px;background:#0A0A0A;color:#FAF0E6;border:1px solid #0A0A0A}
.art-cta h3{margin:12px 0 0;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(24px,2.8vw,32px);font-weight:400;line-height:1.1;color:#FAF0E6}
.art-cta p{margin:12px 0 0;max-width:60ch;font-size:15.5px;line-height:1.62;color:#A8A29E}
.art-cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.art-cta-primary{display:inline-flex;align-items:center;font-weight:600;font-size:15px;color:#0A0A0A;background:#FF5B23;border:0;border-radius:999px;padding:13px 24px;cursor:pointer}
.art-cta-secondary{display:inline-flex;align-items:center;font-weight:500;font-size:15px;color:#FAF0E6;background:transparent;border:1px solid rgba(250,240,230,.24);border-radius:999px;padding:13px 24px}
.art-cta-secondary:hover{color:#0A0A0A;background:#FAF0E6}

/* ---- post: sources ---- */
.art-sources{margin:clamp(44px,6vh,72px) 0 0;padding-top:26px;border-top:1px solid var(--sp-line,#E4DED6)}
.art-sources ol{margin:16px 0 0;padding-left:20px}
.art-sources li{margin:11px 0 0;font-size:14.5px;line-height:1.58;color:#4A4A48}

/* ---- post: related ---- */
.art-related{padding:clamp(48px,7vh,84px) 0 clamp(56px,9vh,104px);background:#F4F0EA;border-top:1px solid var(--sp-line,#E4DED6)}
.art-related h2{margin:12px 0 0;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(26px,3vw,36px);font-weight:400;line-height:1.08;color:#111111}
.art-related .art-grid{margin-top:28px}
.art-related .art-card{background:#FAF7F2}
.art-related .art-card:hover{background:#FFFFFF}

/* ---- responsive ---- */
@media (max-width:1080px){
  .art-body-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .art-toc{position:static}
  .art-toc ol{columns:2;column-gap:26px}
  .art-toc a.is-current{box-shadow:none;padding-left:0}
}
@media (max-width:720px){
  .art-toc ol{columns:1}
  .art-controls{position:static;backdrop-filter:none}
  .art-prose{max-width:none}
}