/* ————————————————————————————————————————————
   LIVE TODOS SANTOS — article layer
   (loads after site.css)
   ———————————————————————————————————————————— */

/* progress bar */
.progress{ position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--terra); z-index: 200; transform: scaleX(0); transform-origin: left center; }
@supports (animation-timeline: scroll()){
  .progress{ animation: reading-progress auto linear; animation-timeline: scroll(root); }
  @keyframes reading-progress{ to{ transform: scaleX(1); } }
}

/* ——— ARTICLE HEADER ——— */
.ahead{ padding-top: 150px; }
.ahead .kicker{ display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.ahead .kicker .rule{ width: 56px; height: 1px; background: var(--line); }
.ahead h1{
  font-size: clamp(40px, 5.6vw, 92px);
  line-height: 1.02; letter-spacing: -.022em;
  max-width: 18ch; text-wrap: balance;
}
.ahead h1 i{ font-style: italic; }
.ahead .standfirst{
  font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5;
  color: var(--ink-60); max-width: 52ch; margin: 28px 0 0;
}
.ahead .metarow{
  display: flex; gap: 40px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
}
.ahead .metarow div b{ display: block; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 5px; }
.ahead .metarow div span{ font-size: 14.5px; font-weight: 500; }

.ahero{ margin-top: 56px; height: 66vh; min-height: 420px; overflow: hidden; position: relative; }
.ahero img{ width: 100%; height: 100%; object-fit: cover; }
.ahero .cap{ position: absolute; right: 20px; bottom: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* ——— BODY GRID ——— */
.abody{ display: grid; grid-template-columns: 200px minmax(0, 680px) 260px; gap: clamp(40px, 5vw, 90px); justify-content: center; padding: clamp(72px, 9vh, 120px) 0; }
@media (max-width: 1200px){ .abody{ grid-template-columns: 180px minmax(0, 640px); } .aside-cta{ display: none; } }
@media (max-width: 860px){ .abody{ grid-template-columns: minmax(0, 1fr); } .toc{ display: none; } }

/* TOC */
.toc{ position: sticky; top: 110px; align-self: start; }
.toc h6{ font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-30); margin: 0 0 18px; }
.toc a{ display: block; font-size: 13px; line-height: 1.4; padding: 7px 0 7px 14px; color: var(--ink-60); border-left: 1px solid var(--line); transition: color .2s, border-color .2s; }
.toc a.act{ color: var(--ink); border-left-color: var(--terra); font-weight: 500; }
.toc a:hover{ color: var(--ink); }

/* sidebar CTA */
.aside-cta{ position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; gap: 16px; }
.cta-card{ border: 1px solid var(--line); padding: 26px 24px; background: var(--paper); }
.cta-card h2{ font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -.01em; margin: 0 0 8px; line-height: 1.1; }
.cta-card h2 i{ font-style: italic; }
.cta-card p{ font-size: 13px; line-height: 1.55; color: var(--ink-60); margin: 0 0 18px; }
.cta-card form{ display: flex; border-bottom: 1px solid var(--ink); padding-bottom: 5px; }
.cta-card input{ flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: var(--sans); font-size: 13.5px; padding: 5px 0; color: var(--ink); }
.cta-card input::placeholder{ color: var(--ink-30); }
.cta-card button{ background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.cta-card .newsletter-status{ display: grid; padding: 12px; text-align: center; gap: 10px; }
.cta-card .newsletter-status a{ justify-content: center; padding: 0 8px; font-size: 9px; }
.cta-card.wa-card{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cta-card.wa-card p{ color: rgba(250,248,243,.7); }
.cta-card .wa-btn{ display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(250,248,243,.35); border-radius: 999px; padding: 9px 16px; font-size: 12.5px; transition: all .25s; }
.cta-card .wa-btn:hover{ background: var(--paper); color: var(--ink); }
.cta-card .wa-btn .dot{ width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }

/* ——— PROSE ——— */
.prose{ font-size: 17.5px; line-height: 1.75; }
.prose > p{ margin: 0 0 26px; }
.prose .lede::first-letter{
  font-family: var(--serif); font-size: 4.6em; line-height: .82;
  float: left; padding: 8px 14px 0 0; color: var(--terra);
}
.prose h2{
  font-size: clamp(27px, 2.6vw, 38px); letter-spacing: -.015em; line-height: 1.12;
  margin: 64px 0 22px; scroll-margin-top: 110px;
}
.prose h2 .no{ font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-30); display: block; margin-bottom: 10px; }
.prose h3{ font-size: 21px; margin: 40px 0 14px; font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
.prose b, .prose strong{ font-weight: 600; }
.prose a{ border-bottom: 1px solid var(--ink-30); transition: border-color .2s; }
.prose a:hover{ border-color: var(--ink); }
.prose ul{ padding-left: 22px; margin: 0 0 26px; }
.prose li{ margin-bottom: 10px; }

/* pull quote */
.prose .pull{
  font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.3; letter-spacing: -.01em; font-style: italic;
  border: 0; margin: 54px 0; padding: 0 0 0 28px;
  border-left: 2px solid var(--terra);
}

/* callout */
.callout{ background: var(--paper-2); border: 1px solid var(--line); padding: 28px 30px; margin: 44px 0; }
.callout .lbl{ display: block; margin-bottom: 12px; }
.callout p{ margin: 0; font-size: 15.5px; line-height: 1.65; }
.callout p + p{ margin-top: 12px; }

/* inline figure */
.prose figure{ margin: 52px 0; }
.prose figure.wide{ margin-left: clamp(-120px, -8vw, 0px); margin-right: clamp(-120px, -8vw, 0px); }
@media (max-width: 1100px){ .prose figure.wide{ margin-left: 0; margin-right: 0; } }
body{ overflow-x: clip; }
.prose figure img{ width: 100%; }
.prose figcaption{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-30); margin-top: 12px; }

/* data table */
.dtable{ width: 100%; border-collapse: collapse; margin: 40px 0; font-size: 15px; }
.dtable th{ font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-30); text-align: left; padding: 0 18px 12px 0; border-bottom: 1px solid var(--ink); }
.dtable td{ padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.dtable td:first-child{ font-weight: 500; }
.dtable .num{ font-family: var(--mono); font-size: 13px; }

/* signature + bio */
.sig-block{ margin-top: 72px; padding-top: 36px; border-top: 1px solid var(--ink); }
.sig-block .sig{ font-family: var(--serif); font-style: italic; font-size: 26px; margin-bottom: 22px; }
.bio{ display: flex; gap: 20px; align-items: center; background: var(--paper-2); border: 1px solid var(--line); padding: 22px 24px; }
.bio img{ width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.bio p{ margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-60); }
.bio p b{ color: var(--ink); font-weight: 600; }

/* next article */
.next{ border-top: 1px solid var(--line); }
.next a{ display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: clamp(48px, 8vh, 88px) 0; }
.next .lbl{ display: block; margin-bottom: 16px; }
.next h3{ font-size: clamp(30px, 3.6vw, 56px); letter-spacing: -.02em; line-height: 1.02; max-width: 20ch; }
.next h3 i{ font-style: italic; }
.next .arr{ font-family: var(--serif); font-size: clamp(36px, 4vw, 64px); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.next a:hover .arr{ transform: translateX(14px); }
.next a:hover h3{ font-style: italic; }

@media (max-width: 700px){
  .ahead{ padding-top: 126px; }
  .ahead .metarow{ gap: 22px; }
  .ahero{ height: 48vh; min-height: 300px; margin-top: 38px; }
  .abody{ padding-top: 56px; }
  .next a{ align-items: flex-end; }
}