/* =========================================================
   Mumford Company — Articles (blog) layout
   Loads AFTER styles.css; reuses its tokens, header, footer.
   Editorial / text-led feed + sticky search & categories.
   ========================================================= */

.articles-main{ padding-top:150px; padding-bottom:84px; background:#fff; }

/* page head (matches About / Offices) */
.articles-head{ padding:6px 0 2px; }
.articles-head .page-title{
  font-family:var(--f-head); font-weight:400; color:var(--forest);
  font-size:clamp(28px,3.6vw,40px); letter-spacing:.03em; margin:0; line-height:1.1;
}
.articles-head .title-rule{ width:300px; max-width:60%; height:3px; background:var(--forest); margin:16px 0 0; border:0; }

/* ---- two-column shell: feed + sidebar ---- */
.articles-layout{
  display:grid; grid-template-columns:1fr 312px; gap:64px;
  align-items:start; margin-top:42px;
}

/* =========================================================
   ARTICLE FEED  (text-only, editorial)
   ========================================================= */
.article-feed{ display:flex; flex-direction:column; gap:24px; min-width:0; }

.post{
  background:#E7ECEF; border-radius:14px; padding:30px 34px 32px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(20,40,35,.13); }

.post-title{
  font-family:var(--f-head); font-weight:700; color:var(--ink);
  font-size:clamp(22px,2.4vw,28px); line-height:1.22; letter-spacing:.005em; margin:0;
}
.post-title a{ color:inherit; transition:color .2s var(--ease); }
.post-title a:hover{ color:var(--forest); }

.post-meta{
  margin:13px 0 0; font-family:var(--f-head); font-weight:700; font-size:12px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
}
.post-meta .by{ color:var(--ink-3); font-weight:400; }
.post-meta a{ color:var(--forest); }
.post-meta a:hover{ text-decoration:underline; }

.post-excerpt{ margin:18px 0 0; font-size:15.5px; line-height:1.72; color:var(--ink-2); }

/* "CONTINUE READING" centered divider with hairline rules */
.continue{
  display:flex; align-items:center; gap:22px; margin:24px 0 0;
}
.continue::before, .continue::after{
  content:""; flex:1; height:1px; background:rgba(46,125,75,.18);
}
.continue a{
  font-family:var(--f-head); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--forest); white-space:nowrap; transition:color .2s var(--ease);
}
.continue a:hover{ color:var(--forest-deep); }


/* filter/search status banner + empty state */
.feed-status{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:var(--testi-bg); padding:14px 20px; margin:0 0 6px;
}
.feed-status span{ font-size:14.5px; color:var(--ink-2); }
.feed-status strong{ color:var(--forest); font-weight:700; }
.feed-clear{
  font-family:var(--f-head); font-weight:700; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--forest); white-space:nowrap; transition:color .2s var(--ease);
}
.feed-clear:hover{ color:var(--forest-deep); }
.feed-empty{ padding:30px 0 10px; }
.feed-empty p{ font-size:16.5px; color:var(--ink-2); margin:0 0 20px; }

/* active category in sidebar */
.cat-list a.active{ color:var(--forest-deep); font-weight:700; padding-left:8px; }

/* =========================================================
   PAGINATION
   ========================================================= */
.pagination{ display:flex; align-items:center; gap:8px; margin-top:30px; }
.pagination a, .pagination span{
  min-width:40px; height:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-head); font-weight:700; font-size:14px; color:var(--ink);
  border:1px solid var(--rule); background:#fff; transition:.2s var(--ease);
}
.pagination a:hover{ border-color:var(--forest); color:var(--forest); }
.pagination .current{ border-color:var(--forest); color:var(--forest); background:#fff; cursor:default; }
.pagination .gap{ border:0; background:transparent; min-width:auto; padding:0 2px; color:var(--ink-3); }
.pagination .next{ border:0; background:transparent; color:var(--forest); padding:0 6px; }
.pagination .next:hover{ text-decoration:underline; color:var(--forest-deep); }

/* =========================================================
   STICKY SIDEBAR  (search + categories)
   ========================================================= */
.article-sidebar{ position:sticky; top:118px; align-self:start; display:flex; flex-direction:column; gap:24px; }

/* search */
.widget-search form{ display:flex; }
.widget-search input{
  flex:1; min-width:0; border:1px solid #C7D0D2; background:#fff;
  font-family:var(--f-body); font-size:14.5px; padding:11px 15px; color:var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.widget-search input::placeholder{ color:var(--ink-3); }
.widget-search input:focus{ outline:0; border-color:var(--forest); box-shadow:0 0 0 3px rgba(46,125,75,.12); }
.widget-search button{
  flex:none; width:50px; border:1px solid #C7D0D2; border-left:0; background:#fff; color:var(--forest);
  cursor:pointer; display:grid; place-items:center; transition:.2s var(--ease);
}
.widget-search button:hover{ background:var(--forest); border-color:var(--forest); color:#fff; }
.widget-search button svg{ width:18px; height:18px; }

/* categories */
.widget-cats h3{
  font-family:var(--f-head); font-weight:700; color:var(--forest); font-size:19px;
  letter-spacing:.1em; text-transform:uppercase; text-align:center; margin:0 0 8px;
}
.cat-list{ list-style:none; margin:0; padding:0; }
.cat-list li{ border-bottom:1px solid var(--rule); }
.cat-list a{
  display:block; padding:8px 2px; font-size:13.5px; color:var(--forest);
  transition:color .2s var(--ease), padding .2s var(--ease);
}
.cat-list a:hover{ color:var(--forest-deep); padding-left:8px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .articles-layout{ grid-template-columns:1fr 280px; gap:46px; }
}
@media (max-width:860px){
  .articles-layout{ grid-template-columns:1fr; gap:54px; }
  .article-sidebar{ position:static; top:auto; }
  .widget-cats h3{ text-align:left; }
}
@media (max-width:560px){
  .articles-main{ padding-top:120px; }
}

/* =========================================================
   SINGLE ARTICLE (detail page)
   ========================================================= */
.article-full{ min-width:0; }
.article-full .af-back{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 22px;
  font-family:var(--f-head); font-weight:700; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--forest);
}
.article-full .af-back svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.article-full .af-back:hover svg{ transform:translateX(-4px); }

.article-full .af-title{
  font-family:var(--f-head); font-weight:700; color:var(--ink);
  font-size:clamp(28px,3.4vw,40px); line-height:1.18; letter-spacing:.005em; margin:0;
}
.article-full .af-meta{
  margin:14px 0 0; font-family:var(--f-head); font-weight:700; font-size:12.5px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
}
.article-full .af-meta .by{ font-weight:400; }
.article-full .af-meta a{ color:var(--forest); }
.article-full .af-meta a:hover{ text-decoration:underline; }

/* filed-under category chips */
.article-full .af-cats{ display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 0; }
.article-full .af-cat{
  font-family:var(--f-head); font-weight:600; font-size:11.5px; letter-spacing:.04em;
  color:var(--forest); background:var(--testi-bg); padding:7px 13px; transition:.2s var(--ease);
}
.article-full .af-cat:hover{ background:var(--forest); color:#fff; }

.article-full .af-rule{ border:0; height:3px; width:84px; background:var(--forest); margin:26px 0 0; }

/* body typography */
.af-body{ margin-top:30px; }
.af-body > *:first-child{ margin-top:0; }
.af-body p{ font-size:16.5px; line-height:1.78; color:var(--ink); margin:0 0 22px; }
.af-body h2{
  font-family:var(--f-head); font-weight:700; color:var(--forest); font-size:clamp(21px,2.2vw,27px);
  line-height:1.25; margin:38px 0 16px; letter-spacing:.005em;
}
.af-body h3{
  font-family:var(--f-head); font-weight:700; color:var(--ink); font-size:19px;
  margin:28px 0 12px;
}
.af-body .article-list{ margin:0 0 22px; padding-left:0; list-style:none; }
.af-body .article-list li{ position:relative; padding:0 0 0 28px; margin:0 0 12px; font-size:16.5px; line-height:1.7; color:var(--ink); }
.af-body ul.article-list li::before{ content:""; position:absolute; left:4px; top:.62em; width:7px; height:7px; background:var(--forest); border-radius:50%; }
.af-body ol.article-list{ counter-reset:ol; }
.af-body ol.article-list li{ counter-increment:ol; }
.af-body ol.article-list li::before{
  content:counter(ol); position:absolute; left:0; top:.05em;
  font-family:var(--f-head); font-weight:700; font-size:13px; color:var(--forest);
  width:20px; text-align:center;
}

/* pull quote */
.af-body .article-quote{
  margin:30px 0; padding:6px 0 6px 26px; border-left:4px solid var(--lime);
}
.af-body .article-quote p{
  font-family:var(--f-head); font-weight:400; font-style:italic; color:var(--ink);
  font-size:21px; line-height:1.5; margin:0;
}
.af-body .article-quote cite{
  display:block; margin-top:12px; font-style:normal; font-family:var(--f-head); font-weight:700;
  font-size:13px; letter-spacing:.04em; color:var(--forest); text-transform:none;
}

/* note / callout */
.af-body .article-note{
  margin:26px 0; background:var(--testi-bg); border-left:4px solid var(--forest);
  padding:18px 22px; font-size:15.5px; line-height:1.65; color:var(--ink);
}

/* table */
.af-body .article-table-wrap{ margin:26px 0; overflow-x:auto; }
.af-body .article-table{ width:100%; border-collapse:collapse; font-size:15px; }
.af-body .article-table th{
  background:var(--forest); color:#fff; font-family:var(--f-head); font-weight:700;
  text-align:left; padding:13px 16px; font-size:13px; letter-spacing:.04em;
}
.af-body .article-table td{ padding:12px 16px; border-bottom:1px solid var(--rule); color:var(--ink); }
.af-body .article-table tbody tr:nth-child(even){ background:#F6F8F8; }
.af-body .article-table td:last-child{ font-family:var(--f-head); font-weight:700; color:var(--forest); }

/* prev / next */
.af-nav{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; padding-top:30px; border-top:1px solid var(--rule); }
.af-nav a{ display:flex; flex-direction:column; gap:6px; }
.af-nav .af-next{ text-align:right; }
.af-nav span{ font-family:var(--f-head); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.af-nav strong{ font-family:var(--f-head); font-weight:700; font-size:15px; line-height:1.35; color:var(--ink); transition:color .2s var(--ease); }
.af-nav a:hover strong{ color:var(--forest); }

@media (max-width:560px){
  .af-nav{ grid-template-columns:1fr; }
  .af-nav .af-next{ text-align:left; }
  .af-body .article-quote p{ font-size:18px; }
}