/* Article pages — adamdirani.com */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#fff;
  color:#0a0a0a;
  font-family:'Geist',system-ui,sans-serif;
  font-size:14px;
  font-weight:300;
  line-height:1.7;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* NAV — match index.html (avoid global ul rules affecting .nav-r) */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 40px;
  border-bottom:1px solid transparent;
  transition:border-color 0.4s,background 0.4s;
}
nav.scrolled{
  border-color:#e0e0e0;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(8px);
}
.nav-logo{
  font-family:'Instrument Serif',serif;
  font-size:16px;letter-spacing:0;
  color:#0a0a0a;text-decoration:none;font-weight:400;
}
.nav-r{
  display:flex;gap:32px;list-style:none;align-items:center;
  margin:0;padding:0;
}
.nav-r a{
  font-size:11px;letter-spacing:0.01em;text-transform:uppercase;
  color:#888;text-decoration:none;transition:color 0.2s;
}
.nav-r a:hover{color:#0a0a0a}

/* ARTICLE */
.article{
  max-width:700px;
  margin:0 auto;
  padding:108px 40px 100px;
}

/* META */
.article-meta{
  display:flex;gap:24px;align-items:center;
  margin-bottom:32px;flex-wrap:wrap;
}
.article-meta span{
  font-size:11px;letter-spacing:0.05em;
  text-transform:uppercase;color:#888;
}
.article-meta a{color:#0a0a0a;text-decoration:none}

/* HEADINGS */
h1{
  font-family:'Instrument Serif',serif;
  font-size:clamp(2rem,5vw,3rem);
  font-weight:400;line-height:1.06;
  letter-spacing:-0.03em;
  margin-bottom:28px;
}
h1 em{font-style:italic}
.lede{
  font-size:clamp(0.9375rem,1.8vw,1.0625rem);
  line-height:1.65;font-weight:400;
  max-width:58ch;
  margin-bottom:48px;
}
hr{border:none;border-top:1px solid #e0e0e0;margin:48px 0}
h2{
  font-family:'Instrument Serif',serif;
  font-size:clamp(1.2rem,3vw,1.6rem);
  font-weight:400;line-height:1.15;
  letter-spacing:-0.02em;
  margin-top:44px;margin-bottom:14px;
}
h2 em{font-style:italic}

/* BODY */
p{
  font-size:14px;line-height:1.75;
  letter-spacing:-0.01em;
  margin-bottom:18px;max-width:66ch;
}
.article ul,.article ol{
  font-size:14px;line-height:1.75;
  letter-spacing:-0.01em;
  padding-left:20px;margin-bottom:18px;max-width:66ch;
}
.article li{margin-bottom:6px}
strong{font-weight:500}
a{color:#0a0a0a}

/* TABLE */
table{width:100%;border-collapse:collapse;font-size:13px;margin:28px 0}
thead th{
  text-align:left;
  font-size:10px;font-weight:500;
  letter-spacing:0.07em;text-transform:uppercase;
  color:#888;padding:8px 16px 8px 0;
  border-bottom:1px solid #e0e0e0;
}
thead th:first-child{color:#0a0a0a;font-size:11px}
tbody td{
  padding:12px 16px 12px 0;
  border-bottom:1px solid #f4f4f4;
  vertical-align:top;line-height:1.6;
}
tbody tr:last-child td{border-bottom:none}

/* CTA */
.cta{
  margin-top:64px;
  padding:36px 0;
  border-top:1px solid #e0e0e0;
  border-bottom:1px solid #e0e0e0;
}
.cta p{
  font-size:15px;line-height:1.6;
  letter-spacing:-0.02em;
  margin-bottom:0;max-width:none;font-weight:400;
}
.cta a{
  color:#0a0a0a;font-weight:500;
  text-decoration:underline;text-underline-offset:3px;
}
.cta a:hover{opacity:0.5}

/* BACK */
.back{margin-top:36px}
.back a{
  font-size:11px;letter-spacing:0.05em;text-transform:uppercase;
  color:#888;text-decoration:none;transition:color 0.2s;
}
.back a:hover{color:#0a0a0a}

/* MOBILE */
@media(max-width:768px){
  nav{padding:16px 20px}
  .article{padding:80px 20px 72px}
  table{font-size:12px}
  thead th,tbody td{padding:10px 10px 10px 0}
}