.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}

/* Blog overview: quiet, text-first editorial journal */
.blog-hero,
.blog-index{
  width:min(100%,calc(1400px + (var(--pad) * 2)));
  margin-inline:auto
}
.blog-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2rem;
  align-items:end;
  min-height:0;
  padding:clamp(5rem,8vw,7.5rem) var(--pad) clamp(2.8rem,5vw,4.5rem);
  border-bottom:1px solid var(--line)
}
.blog-hero-copy{
  max-width:55rem
}
.blog-hero h1{
  max-width:14ch;
  margin:.75rem 0 1.2rem;
  font-family:var(--display);
  font-size:clamp(3rem,5.4vw,5.8rem);
  font-weight:820;
  letter-spacing:-.065em;
  line-height:.91
}
.blog-hero-copy>p:last-child{
  max-width:47rem;
  margin:0;
  color:var(--muted);
  font-size:clamp(1.02rem,1.4vw,1.22rem);
  line-height:1.62
}
.blog-hero-count{
  display:grid;
  min-width:9rem;
  margin:0;
  padding-left:1.5rem;
  border-left:1px solid var(--line)
}
.blog-hero-count strong{
  color:var(--accent);
  font-family:var(--display);
  font-size:clamp(2.3rem,4vw,3.5rem);
  line-height:1
}
.blog-hero-count span{
  max-width:10rem;
  margin-top:.45rem;
  color:var(--muted);
  font:700 .62rem/1.45 var(--mono);
  letter-spacing:.075em;
  text-transform:uppercase
}
.blog-index{
  padding:clamp(2.5rem,5vw,4.5rem) var(--pad) clamp(5rem,9vw,8rem)
}
.blog-tools{
  display:grid;
  grid-template-columns:minmax(18rem,27rem) minmax(0,1fr) auto;
  gap:1.1rem 1.5rem;
  align-items:end;
  margin-bottom:clamp(3.5rem,6vw,5.5rem);
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line)
}
.blog-search{
  display:grid;
  gap:.5rem;
  color:var(--muted);
  font:700 .61rem var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase
}
.blog-search-field{
  position:relative;
  display:block
}
.blog-search-field>span{
  position:absolute;
  right:.1rem;
  bottom:.72rem;
  color:var(--accent);
  font:700 1rem var(--mono);
  pointer-events:none
}
.blog-search input{
  width:100%;
  min-height:2.75rem;
  padding:.68rem 2rem .68rem 0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:500 .9rem var(--body);
  text-transform:none
}
.blog-search input::placeholder{
  color:#7f857e
}
.blog-search input:focus{
  border-color:var(--accent);
  box-shadow:0 1px 0 var(--accent)
}
.blog-filters{
  display:flex;
  min-width:0;
  flex-wrap:wrap;
  gap:.4rem;
  overflow:visible
}
.blog-filters button{
  min-height:2.3rem;
  padding:.45rem .72rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font:700 .6rem var(--mono);
  letter-spacing:.025em;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,color .18s ease
}
.blog-filters button:hover{
  border-color:rgba(var(--accent-rgb),.72);
  color:var(--text)
}
.blog-filters button:focus-visible,
.blog-search input:focus-visible,
.blog-feature a:focus-visible,
.blog-feed a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px
}
.blog-filters button.is-active{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--bg)
}
.blog-filters button.is-active::before{
  margin-right:.35rem;
  content:'●';
  font-size:.5rem
}
.blog-result-count{
  align-self:center;
  margin:0;
  color:var(--muted);
  font:700 .62rem var(--mono);
  white-space:nowrap
}
.blog-section-label{
  margin:0 0 1rem;
  color:var(--muted);
  font:700 .63rem var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase
}
.blog-feature-wrap{
  margin-bottom:clamp(3.8rem,7vw,6.5rem)
}
.blog-feature-wrap[hidden],
.blog-feature[hidden],
.blog-feed article[hidden]{
  display:none
}
.blog-feature,
.blog-feed article{
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:#111310;
  transition:border-color .18s ease,background-color .18s ease
}
@supports ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px))){
  .blog-feature,
  .blog-feed article{
    background:rgba(18,20,18,.55);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px)
  }
}
.blog-feature{
  position:relative;
  display:grid;
  min-height:25rem;
  padding:clamp(1.7rem,3.5vw,3.2rem);
  overflow:hidden
}
.blog-feature::before{
  position:absolute;
  top:0;
  left:0;
  width:clamp(6rem,13vw,12rem);
  height:2px;
  background:var(--accent);
  content:''
}
.blog-feature-top,
.blog-card-footer{
  display:flex;
  justify-content:space-between;
  gap:1.25rem;
  align-items:center
}
.blog-category,
.blog-feature-marker{
  color:var(--accent);
  font:700 .62rem/1.4 var(--mono);
  letter-spacing:.075em;
  text-transform:uppercase
}
.blog-feature-marker{
  color:var(--muted)
}
.blog-feature-copy{
  max-width:66rem;
  align-self:center;
  padding-block:2.5rem
}
.blog-feature h2{
  display:-webkit-box;
  max-width:20ch;
  margin:0 0 1.15rem;
  overflow:hidden;
  font-family:var(--display);
  font-size:clamp(2.7rem,4.4vw,5rem);
  letter-spacing:-.06em;
  line-height:.94;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3
}
.blog-feature-copy>p{
  display:-webkit-box;
  max-width:47rem;
  margin:0;
  overflow:hidden;
  color:var(--muted);
  font-size:clamp(1rem,1.35vw,1.15rem);
  line-height:1.65;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3
}
.blog-card-footer{
  align-self:end;
  padding-top:1.35rem;
  border-top:1px solid var(--line)
}
.blog-meta{
  display:flex;
  gap:.65rem;
  margin:0;
  color:var(--muted);
  font:700 .63rem var(--mono);
  letter-spacing:.035em;
  text-transform:uppercase
}
.blog-meta>*+*::before{
  margin-right:.65rem;
  content:'·'
}
.blog-read{
  display:inline-flex;
  gap:.55rem;
  align-items:center;
  color:var(--text);
  font:700 .65rem var(--mono);
  letter-spacing:.025em;
  white-space:nowrap
}
.blog-read span{
  color:var(--accent);
  transition:transform .18s ease
}
.blog-latest{
  min-width:0
}
.blog-list-head{
  margin-bottom:1rem
}
.blog-feed{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.2vw,2rem)
}
.blog-feed article{
  display:flex;
  min-height:24rem;
  flex-direction:column;
  padding:clamp(1.4rem,2.6vw,2.2rem)
}
.blog-feed-copy{
  min-width:0;
  padding:clamp(2.2rem,4vw,3.5rem) 0 2rem
}
.blog-feed h2{
  display:-webkit-box;
  max-width:23ch;
  margin:0 0 .9rem;
  overflow:hidden;
  font-family:var(--display);
  font-size:clamp(1.8rem,2.6vw,2.75rem);
  letter-spacing:-.045em;
  line-height:1;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3
}
.blog-feed-copy>p{
  display:-webkit-box;
  max-width:42rem;
  margin:0;
  overflow:hidden;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.58;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3
}
.blog-feed .blog-card-footer{
  margin-top:auto
}
.blog-feature:hover,
.blog-feed article:hover{
  border-color:rgba(var(--accent-rgb),.34);
  background-color:rgba(23,26,22,.72)
}
.blog-feature h2 a:hover,
.blog-feed h2 a:hover{
  color:var(--accent)
}
.blog-feature:hover .blog-read span,
.blog-feed article:hover .blog-read span{
  transform:translateX(3px)
}
.blog-no-results{
  padding:3rem 0;
  border-top:1px solid var(--line);
  color:var(--muted)
}

/* Individual article pages */
.preview-bar{
  position:sticky;
  top:0;
  z-index:20;
  padding:.8rem var(--pad);
  background:var(--accent);
  color:#08100b;
  font:700 .75rem var(--mono);
  text-align:center
}
.preview-bar a{text-decoration:underline}
.article-shell{padding-bottom:6rem}
.article-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(14rem,.25fr);
  gap:3rem 7rem;
  align-items:end;
  padding:clamp(8rem,13vw,13rem) var(--pad) clamp(4rem,8vw,8rem);
  border-bottom:1px solid var(--line)
}
.article-hero h1{
  max-width:14ch;
  margin:1rem 0 0;
  font-family:var(--display);
  font-size:clamp(3.5rem,7.5vw,8.4rem);
  letter-spacing:-.07em;
  line-height:.88
}
.article-question{
  max-width:47rem;
  margin:2rem 0 0;
  color:var(--muted);
  font-size:1.2rem;
  line-height:1.6
}
.article-hero aside{
  display:grid;
  gap:.75rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  color:var(--muted);
  font:.68rem/1.5 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase
}
.article-layout{
  display:grid;
  grid-template-columns:minmax(0,48rem) minmax(14rem,20rem);
  gap:clamp(4rem,9vw,10rem);
  justify-content:center;
  min-width:0;
  padding:clamp(4rem,8vw,8rem) var(--pad)
}
.article-content,
.article-author{min-width:0}
.article-content{
  max-width:100%;
  overflow-wrap:anywhere;
  font-size:clamp(1.05rem,1.35vw,1.2rem);
  line-height:1.8
}
.article-content>p:first-child{
  margin:0 0 1rem;
  padding:1.6rem;
  border-left:3px solid var(--accent);
  background:rgba(var(--accent-rgb),.08);
  font-size:1.12em
}
.article-content h2{
  margin:4.5rem 0 1.2rem;
  overflow-wrap:anywhere;
  font-family:var(--display);
  font-size:clamp(2.3rem,4vw,4.1rem);
  letter-spacing:-.055em;
  line-height:1
}
.article-content h3{
  margin:3rem 0 1rem;
  overflow-wrap:anywhere;
  font-family:var(--display);
  font-size:clamp(1.5rem,2.5vw,2.3rem)
}
.article-content p,
.article-content li{color:var(--muted)}
.article-content strong{color:var(--text)}
.article-content a{
  color:var(--accent);
  overflow-wrap:anywhere;
  text-decoration:underline;
  text-underline-offset:.18em
}
.article-content ul,
.article-content ol{
  max-width:100%;
  padding-left:1.4rem
}
.article-content li+li{margin-top:.55rem}
.article-content blockquote{
  max-width:100%;
  margin:2.5rem 0;
  padding:1rem 1.5rem;
  border-left:3px solid var(--accent);
  background:var(--surface)
}
.article-content hr{
  margin:4rem 0;
  border:0;
  border-top:1px solid var(--line)
}
.article-table{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:2.5rem 0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  border:1px solid var(--line);
  -webkit-overflow-scrolling:touch
}
.article-table table{
  width:100%;
  min-width:38rem;
  border-collapse:collapse
}
.article-table th,
.article-table td{
  padding:1rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top
}
.article-table th{
  color:var(--accent);
  font:.68rem var(--mono);
  letter-spacing:.05em;
  text-transform:uppercase
}
.article-table td+td,
.article-table th+th{border-left:1px solid var(--line)}
.article-author{
  position:sticky;
  top:6rem;
  height:max-content;
  padding:1.5rem;
  border:1px solid var(--line);
  background:var(--surface)
}
.article-author h2{
  margin:.7rem 0;
  font-family:var(--display);
  font-size:2rem
}
.article-author>p:not(.eyebrow){
  color:var(--muted);
  line-height:1.65
}
.article-author a{
  display:block;
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  color:var(--accent);
  font:700 .68rem var(--mono);
  text-transform:uppercase
}
.article-footer{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  margin:0 var(--pad);
  padding-top:2rem;
  border-top:1px solid var(--line);
  font:700 .7rem var(--mono);
  text-transform:uppercase
}
.article-footer a:hover{color:var(--accent)}
.blog-empty{
  min-height:65svh;
  padding:clamp(8rem,15vw,14rem) var(--pad)
}
.blog-empty h1,
.blog-empty h2{
  max-width:16ch;
  font-family:var(--display);
  font-size:clamp(3rem,6vw,6rem);
  letter-spacing:-.06em
}
.blog-empty p{color:var(--muted)}

@media(max-width:1050px){
  .blog-tools{
    grid-template-columns:minmax(16rem,23rem) minmax(0,1fr)
  }
  .blog-result-count{grid-column:1/-1}
}
@media(max-width:900px){
  .article-hero,
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .article-layout{
    width:100%;
    justify-content:stretch
  }
  .article-author{position:static}
}
@media(max-width:760px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden
  }
  .blog-hero{
    grid-template-columns:minmax(0,1fr);
    gap:1.5rem;
    padding-block:4.5rem 3rem
  }
  .blog-hero h1{
    font-size:clamp(2.85rem,13vw,4.3rem)
  }
  .blog-hero-count{
    display:flex;
    min-width:0;
    gap:.75rem;
    align-items:baseline;
    padding:0;
    border-left:0
  }
  .blog-hero-count strong{font-size:2rem}
  .blog-hero-count span{max-width:none}
  .blog-index{padding-top:2.3rem}
  .blog-tools{
    grid-template-columns:minmax(0,1fr);
    gap:1.25rem;
    margin-bottom:3.5rem
  }
  .blog-result-count{grid-column:auto}
  .blog-feature{
    min-height:23rem;
    padding:1.4rem
  }
  .blog-feature-copy{padding-block:2rem}
  .blog-feature h2{
    font-size:clamp(2.2rem,10vw,3.15rem);
    line-height:.97
  }
  .blog-feed{
    grid-template-columns:minmax(0,1fr);
    gap:1rem
  }
  .blog-feed article{
    min-height:21rem;
    padding:1.35rem
  }
  .blog-feed h2{
    font-size:clamp(1.8rem,8vw,2.45rem)
  }
}
@media(max-width:520px){
  .blog-filters{gap:.38rem}
  .blog-filters button{
    min-height:2.5rem;
    padding:.52rem .72rem
  }
  .blog-feature-top,
  .blog-card-footer{
    align-items:flex-start
  }
  .blog-card-footer{
    flex-direction:column
  }
  .blog-read{min-height:2.75rem}
  .article-hero h1{overflow-wrap:anywhere}
  .article-content>p:first-child{padding:1.15rem}
  .article-footer{
    align-items:flex-start;
    flex-direction:column
  }
  .article-table{margin-inline:0}
}
@media(prefers-reduced-motion:reduce){
  .blog-feature,
  .blog-feed article,
  .blog-read span{transition:none}
}