/* Brian Rogers Portfolio — category page styles (uses tokens from style.css) */

.cat-hero{
  background:var(--ink);
  color:var(--paper);
  padding:64px 0 56px;
  position:relative;
  overflow:hidden;
}
.cat-hero .glow{
  position:absolute;
  top:-200px; left:-140px;
  width:520px; height:520px;
  background:radial-gradient(circle, rgba(217,231,12,0.30) 0%, rgba(217,231,12,0) 68%);
  pointer-events:none;
}
.cat-hero .wrap{
  position:relative; z-index:1;
  display:flex;
  align-items:center;
  gap:30px;
}
.cat-hero img.icon{ height:84px; width:auto; flex:0 0 auto; }
.cat-hero .crumb{
  font-size:13px;
  color:var(--lime);
  margin-bottom:8px;
}
.cat-hero .crumb a{ text-decoration:none; color:var(--lime); }
.cat-hero .crumb a:hover{ text-decoration:underline; }
.cat-hero h1{ font-size:clamp(30px,4.4vw,46px); }
.cat-hero .dek{
  margin-top:14px;
  max-width:60ch;
  color:#c7cdd2;
  font-size:16.5px;
}

.cat-body{ padding:70px 0; }
.cat-body .intro{
  max-width:68ch;
  font-size:17px;
  color:var(--ink);
  margin-bottom:56px;
}
.cat-body .intro strong{ font-weight:600; }

.spread{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap:48px;
  align-items:center;
  padding:44px 0;
  border-top:1px solid var(--line);
}
.spread:first-of-type{ border-top:none; padding-top:0; }
.spread:nth-of-type(even){ direction:rtl; }
.spread:nth-of-type(even) > *{ direction:ltr; }

.spread figure{ margin:0; }
.spread img{
  width:100%;
  border:1px solid var(--line);
}
.spread figcaption{
  margin-top:10px;
  font-size:12px;
  color:var(--slate);
}
.spread .note-label{
  font-family:'Anton', sans-serif;
  font-size:13px;
  color:var(--lime-dim);
  margin-bottom:10px;
  letter-spacing:0.02em;
}
.spread h3{
  font-size:22px;
  margin-bottom:14px;
  color:var(--ink);
}
.spread p{
  color:var(--slate-dark);
  font-size:15.5px;
  max-width:48ch;
}

.client-strip{
  margin-top:20px;
  padding:36px 0;
  border-top:1px solid var(--line);
}
.client-strip h4{
  font-family:'Anton', sans-serif;
  font-size:14px;
  color:var(--slate);
  margin-bottom:16px;
  letter-spacing:0.02em;
}
.client-strip ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.client-strip li{
  font-size:13.5px;
  padding:8px 14px;
  border:1px solid var(--line);
  color:var(--ink);
}

.cat-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:40px 0 10px;
  margin-top:20px;
  border-top:2px solid var(--ink);
}
.cat-nav a{
  text-decoration:none;
  font-family:'Anton', sans-serif;
  font-size:14px;
  color:var(--ink);
  letter-spacing:0.02em;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cat-nav a .k{
  font-family:'Poppins', sans-serif;
  font-size:11.5px;
  font-weight:500;
  color:var(--slate);
  text-transform:none;
  letter-spacing:0;
}
.cat-nav a:hover{ color:var(--lime-dim); }
.cat-nav a.next{ text-align:right; align-items:flex-end; }

@media (max-width:760px){
  .cat-hero .wrap{ gap:18px; }
  .cat-hero img.icon{ height:60px; }
  .spread{ grid-template-columns:1fr; }
  .spread:nth-of-type(even){ direction:ltr; }
}