:root{
  --paper:#FFFFFF;
  --ink:#111614;
  --body-ink:#222B27;
  --muted:#6B7772;
  --faint:#9AA5A0;
  --line:#E4E8E5;
  --line-soft:#F0F3F1;
  --accent:#0B6E3F;
  --accent-wash:#F2F8F4;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --measure:34rem;
  --pad:clamp(1.25rem,5vw,2.5rem);
}

*{box-sizing:border-box}

body{
  background:var(--paper);
  color:var(--body-ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  margin:0;
}

.wrap{max-width:52rem; margin:0 auto; padding:0 var(--pad)}
a{color:inherit}

.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--faint);
}

.tag{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-wash);
  padding:.22rem .5rem; border-radius:2px; white-space:nowrap;
}
.tag.alt{color:var(--muted); background:var(--line-soft)}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  color:#fff; background:var(--accent);
  padding:.7rem 1.1rem; border:0; border-radius:3px;
}
.btn:hover{background:#095C34}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---------- hub ---------- */
.masthead{padding:clamp(3.5rem,11vw,7rem) 0 clamp(2.5rem,6vw,4rem)}
.masthead h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(3.2rem,11.5vw,6.8rem); line-height:.93;
  letter-spacing:-.038em; color:var(--ink);
  margin:0; text-wrap:balance;
}
.masthead h1 em{font-style:normal; color:var(--accent)}
.tagline{
  font-family:var(--serif); font-size:clamp(1.15rem,2.6vw,1.45rem);
  line-height:1.45; color:var(--muted);
  max-width:30rem; margin:1.5rem 0 0;
}
.about{
  max-width:var(--measure); margin:2.25rem 0 0;
  font-size:15.5px; line-height:1.7; color:var(--muted);
}
.about strong{color:var(--ink); font-weight:500}

.list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line)}
.entry{
  display:grid; grid-template-columns:6.5rem 1fr; gap:0 2rem;
  padding:2rem 0; text-decoration:none; color:inherit;
}
.entry:hover .entry-title{color:var(--accent)}
.entry:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
.entry-date{
  font-family:var(--mono); font-size:12px; color:var(--faint);
  letter-spacing:.03em; padding-top:.45rem; font-variant-numeric:tabular-nums;
}
.entry-title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.4rem,3.4vw,1.85rem); line-height:1.18;
  letter-spacing:-.02em; color:var(--ink); margin:0; text-wrap:balance;
  transition:color .15s;
}
.entry-take{
  font-family:var(--serif); font-size:1.02rem; line-height:1.5;
  color:var(--muted); margin:.6rem 0 0; max-width:32rem;
}
.entry-meta{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.9rem}
.empty{
  padding:3rem 0; font-family:var(--mono); font-size:13px; color:var(--faint);
  border-bottom:1px solid var(--line);
}

@media (max-width:640px){
  .entry{grid-template-columns:1fr; gap:0}
  .entry-date{padding:0 0 .5rem}
}

/* ---------- article ---------- */
.article{padding:clamp(2.5rem,7vw,4.5rem) 0 0}
.back{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:12px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  margin-bottom:2.5rem;
}
.back:hover{color:var(--accent)}

.article h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.3rem,6.4vw,3.75rem); line-height:1.02;
  letter-spacing:-.032em; color:var(--ink);
  margin:0; max-width:20ch; text-wrap:balance;
}
.article-meta{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  margin-top:1.5rem;
  font-family:var(--mono); font-size:12px; color:var(--faint);
  letter-spacing:.04em;
}
.article-meta .dot{color:var(--line)}

.prose{max-width:var(--measure); margin-top:2.75rem}
.prose p{
  font-family:var(--serif); font-size:1.19rem; line-height:1.72;
  color:var(--body-ink); margin:0 0 1.35rem;
}
.prose h2{
  font-family:var(--display); font-weight:700;
  font-size:1.32rem; letter-spacing:-.012em; color:var(--ink);
  margin:2.9rem 0 1rem; text-wrap:balance;
}
.prose h3{
  font-family:var(--display); font-weight:600;
  font-size:1.08rem; color:var(--ink); margin:2rem 0 .75rem;
}
.prose strong{font-weight:600; color:var(--ink)}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.prose ul,.prose ol{
  font-family:var(--serif); font-size:1.19rem; line-height:1.72;
  padding-left:1.3rem; margin:0 0 1.35rem;
}
.prose li{margin-bottom:.5rem}
.prose blockquote{
  border-left:2px solid var(--line); margin:0 0 1.35rem; padding-left:1.25rem;
  color:var(--muted);
}
.prose code{
  font-family:var(--mono); font-size:.85em;
  background:var(--line-soft); padding:.1rem .3rem; border-radius:2px;
}
.prose pre{
  background:var(--line-soft); padding:1rem; border-radius:4px;
  overflow-x:auto; font-size:13px;
}
.prose pre code{background:none; padding:0}

.prose table{
  width:100%; border-collapse:collapse; margin:0 0 1.75rem;
  font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums;
}
.prose th,.prose td{
  text-align:left; padding:.5rem .75rem .5rem 0;
  border-bottom:1px solid var(--line);
}
.prose th{color:var(--muted); font-weight:500}
.table-scroll{overflow-x:auto}

.lede{
  border-left:2px solid var(--accent); padding:.15rem 0 .15rem 1.25rem;
  margin:0 0 2.25rem; max-width:var(--measure);
}
.lede .eyebrow{display:block; margin-bottom:.5rem}
.lede p{font-size:1.08rem; line-height:1.6; color:var(--ink); margin:0;
  font-family:var(--serif)}

.databox{
  background:var(--line-soft); border-radius:4px;
  padding:1.15rem 1.25rem; margin:0 0 2.5rem; max-width:var(--measure);
  font-family:var(--mono); font-size:12.5px; line-height:1.85; color:var(--muted);
}
.databox .eyebrow{display:block; margin-bottom:.6rem; color:var(--muted)}
.databox dl{display:grid; grid-template-columns:5.5rem 1fr; gap:.15rem .9rem; margin:0}
.databox dt{color:var(--faint)}
.databox dd{margin:0; color:var(--ink); overflow-wrap:anywhere}
.databox a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.databox a:hover{color:#095C34}
@media (max-width:520px){
  .databox dl{grid-template-columns:1fr; gap:0}
  .databox dt{margin-top:.5rem}
}

.prose figure{margin:2.5rem 0; max-width:38rem}
.prose figure img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line); border-radius:4px;
}
.prose figcaption{
  font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--muted);
  margin-top:.75rem;
}
.prose p > img{
  display:block; width:100%; height:auto; margin:2.5rem 0; max-width:38rem;
  border:1px solid var(--line); border-radius:4px;
}

.pager{
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
  margin-top:3.5rem; padding-top:1.75rem; border-top:1px solid var(--line);
}
.pager a,.pager span{text-decoration:none; display:block}
.pager a:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
.pager .eyebrow{display:block; margin-bottom:.45rem}
.pager .t{
  font-family:var(--display); font-weight:600; font-size:1rem;
  line-height:1.3; color:var(--ink);
}
.pager a:hover .t{color:var(--accent)}
.pager .right{text-align:right}
@media (max-width:560px){
  .pager{grid-template-columns:1fr}
  .pager .right{text-align:left}
}

.backrow{margin-top:3rem; display:flex; justify-content:center}

/* ---------- footer ---------- */
footer{margin-top:clamp(4rem,10vw,7rem); border-top:1px solid var(--line)}
.bio{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; flex-wrap:wrap; padding:2.75rem 0 3.5rem;
}
.bio-name{
  font-family:var(--display); font-weight:700; font-size:1.15rem;
  letter-spacing:-.01em; color:var(--ink); margin:0;
}
.bio-role{font-size:14px; color:var(--muted); margin:.35rem 0 0}
.bio-links{display:flex; gap:1.25rem; font-family:var(--mono); font-size:12.5px}
.bio-links a{color:var(--muted); text-decoration:none; letter-spacing:.02em}
.bio-links a:hover{color:var(--accent)}
.bio-links a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}