/* ============================================================
   SCRUPLE — writing / long-form pages
   Extends style.css. Tokens come from :root there.
   ============================================================ */

.art{max-width:74ch;margin:0 auto;padding-inline:var(--edge)}

.art__kicker{
  font-family:var(--mono);font-size:var(--step--1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);
  margin:var(--sp-6) 0 var(--sp-2);
}
.art__kicker a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(20,18,12,.2)}
.art__kicker a:hover{color:var(--ink)}

.art h1{
  font-family:var(--serif);font-weight:500;
  font-size:var(--step-3);line-height:1.1;
  letter-spacing:-.01em;margin:0 0 var(--sp-3);
  text-wrap:balance;
}

.art__meta{
  font-family:var(--mono);font-size:var(--step--1);color:var(--ink-mute);
  display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);
  padding-bottom:var(--sp-3);border-bottom:var(--rule-gold);
  margin-bottom:var(--sp-4);
}

.art__fig{margin:0 0 var(--sp-5)}
.art__fig img{
  display:block;width:100%;height:auto;
  border-radius:3px;border:1px solid rgba(20,18,12,.12);
}
.art__fig figcaption{
  font-family:var(--mono);font-size:var(--step--1);color:var(--ink-mute);
  margin-top:var(--sp-2);line-height:1.5;
}

.art__lede{font-size:var(--step-1);line-height:1.6;color:var(--ink-2)}

.art h2{
  font-family:var(--serif);font-weight:500;font-size:var(--step-2);
  line-height:1.18;letter-spacing:-.005em;
  margin:var(--sp-6) 0 var(--sp-2);text-wrap:balance;
}

.art p{margin:0 0 var(--sp-3);color:var(--ink-2)}
.art strong{font-weight:700;color:var(--ink)}

.art ul{margin:0 0 var(--sp-3);padding:0;list-style:none}
.art ul li{
  position:relative;padding-left:1.5rem;margin-bottom:var(--sp-2);
  color:var(--ink-2);
}
.art ul li::before{
  content:"";position:absolute;left:.28rem;top:.72em;
  width:.42rem;height:.42rem;border:1px solid var(--ochre);
  transform:rotate(45deg);
}

.art__pull{
  margin:var(--sp-5) 0;padding:var(--sp-3) 0;
  border-top:var(--rule-gold);border-bottom:var(--rule-gold);
  font-family:var(--serif);font-size:var(--step-2);line-height:1.25;
  color:var(--ink);text-wrap:balance;
}

/* ---------- inline citations ---------- */
.art p a,.art li a,.art td a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(169,85,47,.45);
  transition:border-color .18s ease,color .18s ease;
}
.art p a:hover,.art li a:hover,.art td a:hover{
  color:var(--ochre-deep);border-bottom-color:var(--ochre);
}
.art__meta a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(20,18,12,.2)}
.art__meta a:hover{color:var(--ink)}

/* numbered reference markers */
.art a[href^="#r"]{
  font-family:var(--mono);font-size:.72em;
  color:var(--ochre-deep);border-bottom:none;
  vertical-align:.32em;letter-spacing:.02em;
  padding:0 .04em;white-space:nowrap;
}
.art a[href^="#r"]:hover{color:var(--ink);border-bottom:none;text-decoration:underline}

/* ---------- data table ---------- */
.art__table{
  width:100%;border-collapse:collapse;
  margin:var(--sp-4) 0 var(--sp-4);
  font-family:var(--mono);font-size:var(--step--1);
  color:var(--ink-2);
}
.art__table th{
  text-align:left;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  font-size:.78em;color:var(--ink-mute);
  padding:0 var(--sp-2) .6rem 0;
  border-bottom:var(--rule-gold);
}
.art__table td{
  padding:.72rem var(--sp-2) .72rem 0;
  border-bottom:1px solid rgba(20,18,12,.1);
  line-height:1.45;vertical-align:top;
}
.art__table th:last-child,.art__table td:last-child{padding-right:0;white-space:nowrap}
.art__table tr:last-child td{border-bottom:none}
.art__table strong{color:var(--ink)}

/* ---------- sources ---------- */
.art__refs{
  margin:var(--sp-7) 0 0;padding-top:var(--sp-4);
  border-top:var(--rule-gold);scroll-margin-top:6rem;
}
.art__refs h2{
  font-family:var(--mono);font-size:var(--step--1);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:500;
  margin:0 0 var(--sp-2);
}
.art__refs-note{
  font-size:var(--step--1);line-height:1.6;color:var(--ink-mute);
  max-width:62ch;margin:0 0 var(--sp-3);
}
.art__refs ol{
  margin:0;padding:0;list-style:none;
  counter-reset:ref;
}
.art__refs ol li{
  counter-increment:ref;position:relative;
  padding-left:2.6rem;margin-bottom:var(--sp-2);
  font-size:var(--step--1);line-height:1.6;color:var(--ink-2);
  scroll-margin-top:6rem;
}
.art__refs ol li::before{
  content:"[" counter(ref) "]";
  position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:.9em;color:var(--ochre-deep);
}
.art__refs ol li:target{
  background:rgba(200,154,78,.16);
  box-shadow:-.6rem 0 0 rgba(200,154,78,.16),.6rem 0 0 rgba(200,154,78,.16);
}
.art__refs ol li a{
  font-family:var(--mono);font-size:.92em;
  color:var(--ochre-deep);text-decoration:none;
  border-bottom:1px solid rgba(169,85,47,.4);
  overflow-wrap:anywhere;
}
.art__refs ol li a:hover{color:var(--ink);border-bottom-color:var(--ink)}

@media (max-width:560px){
  .art__table{font-size:.78rem}
  .art__table th:last-child,.art__table td:last-child{white-space:normal}
  .art__refs ol li{padding-left:2.2rem}
}

.art__note{
  margin:var(--sp-6) 0 0;padding:var(--sp-3);
  background:rgba(200,154,78,.09);border:1px solid rgba(200,154,78,.34);
  border-radius:3px;
}
.art__note h3{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-mute);margin:0 0 var(--sp-1);
  font-weight:500;
}
.art__note p{font-size:var(--step--1);line-height:1.6;margin:0 0 .6rem}
.art__note p:last-child{margin-bottom:0}

.art__end{
  margin:var(--sp-6) 0 var(--sp-7);padding-top:var(--sp-4);
  border-top:var(--rule);
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  justify-content:space-between;
}
.art__end p{
  margin:0;font-family:var(--mono);font-size:var(--step--1);
  color:var(--ink-mute);max-width:44ch;line-height:1.55;
}

/* ---------- writing index ---------- */
.idx{max-width:74ch;margin:0 auto;padding-inline:var(--edge)}
.idx__h{
  font-family:var(--serif);font-weight:500;font-size:var(--step-3);
  line-height:1.1;margin:var(--sp-6) 0 var(--sp-2);
}
.idx__sub{color:var(--ink-mute);max-width:56ch;margin:0 0 var(--sp-5)}
.idx__list{display:grid;gap:0;margin-bottom:var(--sp-7)}
.idx__item{
  display:grid;gap:var(--sp-1);padding:var(--sp-4) 0;
  border-top:var(--rule);text-decoration:none;color:inherit;
}
.idx__item:last-child{border-bottom:var(--rule)}
.idx__date{
  font-family:var(--mono);font-size:var(--step--1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
}
.idx__t{
  font-family:var(--serif);font-size:var(--step-2);font-weight:500;
  line-height:1.2;color:var(--ink);
}
.idx__item:hover .idx__t{color:var(--ochre)}
.idx__d{color:var(--ink-soft);margin:0}

/* keep the footer at the bottom on short index pages */
.idx{min-height:calc(100vh - 20rem)}