:root{
  --ink:#111114;
  --gray:#68686f;
  --line:#e7e7e9;
  --bg:#ffffff;
  --brand:#c23b3b;
  --navy:#20304f;
  --gold:#c98a2c;
  --sage:#3f7d63;
  --plum:#6b4a7a;
  --teal:#2f6f6a;
}
.section-label{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ink); margin-bottom:14px;
}
.section-label .bar{width:20px;height:3px;border-radius:2px;}
*{-webkit-font-smoothing:antialiased;}
body{
  font-family:'Inter',-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.display{
  font-family:'Anton','Inter',sans-serif;
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.tab-active{
  color:var(--ink);
  border-bottom:3px solid var(--brand);
}
.tab{
  color:var(--gray);
  border-bottom:3px solid transparent;
}
.scroll-x::-webkit-scrollbar{display:none;}
.scroll-x{-ms-overflow-style:none;scrollbar-width:none;}
.card:active{opacity:0.75;}
.safe-bottom{padding-bottom: env(safe-area-inset-bottom);}

/* Article page */
.article-body h2{
  font-family:'Anton','Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  font-size:1.5rem;
  line-height:1.05;
  margin-top:2rem;
  margin-bottom:0.75rem;
}
.article-body p{
  font-size:15px;
  line-height:1.7;
  color:#3a3a3f;
  margin-bottom:1rem;
}
.article-body ul{
  margin-bottom:1rem;
  padding-left:1.1rem;
}
.article-body li{
  font-size:15px;
  line-height:1.7;
  color:#3a3a3f;
  margin-bottom:0.4rem;
  list-style:disc;
}
.article-body strong{color:var(--ink);}
.article-body table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:1.25rem;
  font-size:14px;
}
.article-body th, .article-body td{
  border:1px solid var(--line);
  padding:8px 10px;
  text-align:left;
}
.article-body th{
  background:#faf9f7;
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.02em;
}

/* Hero */
.hero-block{
  position:relative;
  aspect-ratio:16/10;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
@media (min-width: 768px){
  .hero-block{
    aspect-ratio:auto !important;
    height:320px !important;
  }
  .hero-block .hero-emoji{font-size:8rem;}
}
.hero-block .hero-emoji{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:6rem;
  opacity:0.9;
}
.hero-block .hero-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
}
.hero-block .hero-title{
  position:relative;
  z-index:2;
  color:#fff;
  padding:20px;
  font-family:'Anton','Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  font-size:2rem;
  line-height:0.98;
}

/* Breadcrumb */
.breadcrumb{
  font-size:12px;
  font-weight:600;
  color:var(--gray);
}
.breadcrumb a{color:var(--gray);}
.breadcrumb a:hover{color:var(--ink);}
.breadcrumb .sep{margin:0 6px; color:var(--line);}

/* TL;DR callout */
.tldr{
  border-left:4px solid var(--accent, var(--ink));
  background:var(--accent-tint, #f5f5f7);
  border-radius:0 10px 10px 0;
  padding:14px 16px;
  margin-bottom:1.5rem;
}
.tldr .tldr-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent, var(--ink));
  margin-bottom:6px;
  display:block;
}
.tldr p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink);
  margin-bottom:0;
}

/* Jump to / TOC */
.toc{
  margin-bottom:1.75rem;
}
.toc .toc-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gray);
  margin-bottom:8px;
  display:block;
}
.toc ul{list-style:none; padding:0; margin:0;}
.toc li{margin-bottom:6px;}
.toc a{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.toc a:hover{color:var(--accent, var(--brand));}
.toc .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent, var(--brand));
  flex-shrink:0;
}

/* AI image placeholder */
.img-placeholder{
  aspect-ratio:4/3;
  border:2px dashed var(--line);
  border-radius:12px;
  background:var(--accent-tint, #f7f7f8);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  margin:0 0 1.5rem 0;
}
.img-placeholder svg{margin-bottom:10px; opacity:0.5;}
.img-placeholder .img-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent, var(--gray));
  margin-bottom:6px;
}
.img-placeholder .img-prompt{
  font-size:13px;
  line-height:1.5;
  color:#55555c;
  max-width:34ch;
  font-style:italic;
}

/* Site footer */
.site-footer{
  background:var(--ink);
  color:#c7c7cc;
}
.site-footer h4{
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:16px;
}
.site-footer a{
  color:#a9a9b2;
  font-size:14px;
  text-decoration:none;
}
.site-footer a:hover{color:#fff;}
.site-footer .footer-col ul{list-style:none; padding:0; margin:0;}
.site-footer .footer-col li{margin-bottom:10px;}
.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
}
.site-footer .footer-brand{
  font-family:'Anton','Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  color:#fff;
}

/* Desktop layout */
@media (min-width: 1024px){
  .scroll-x{overflow-x:visible;}
}