/* =============================================================
   OLD FORGE · JOURNAL LISTING (blog.html) — page-specific
   Tokens/primitives/masthead → letterpress.css
   Footer/chat/toast/motion → letterpress-shell.css
   ============================================================= */

/* =====================  JOURNAL — PAGE HEAD ===================== */
.jhead{
  position:relative;
  padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3.5rem);
  border-bottom:1px solid var(--rule);
}
.jhead__folio{
  position:absolute;
  top:clamp(1.5rem,3vw,3rem);right:var(--page);
  font-family:var(--serif);
  font-variation-settings:"opsz" 144,"SOFT" 20,"wght" 300;
  font-style:italic;font-size:clamp(3rem,6vw,5rem);
  line-height:1;color:var(--ember);opacity:.85;
  pointer-events:none;user-select:none;
}
.jhead__dateline{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:clamp(1.25rem,2.5vw,2rem);
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
}
.jhead__dateline .dot{width:5px;height:5px;background:var(--ember);border-radius:50%;display:inline-block}
.jhead__title{
  font-variation-settings:"opsz" 144,"SOFT" 60,"wght" 380;
  font-size:clamp(3rem,1.5rem + 6vw,6.5rem);
  line-height:.92;letter-spacing:-.028em;color:var(--text);
  margin:0 0 clamp(1rem,2vw,1.5rem);
}
.jhead__title em{
  font-style:italic;color:var(--ember);
  font-variation-settings:"opsz" 144,"SOFT" 100,"wght" 340;
}
.jhead__lede{
  font-family:var(--serif);
  font-variation-settings:"opsz" 18,"SOFT" 40,"wght" 380;
  font-size:clamp(1.05rem,.95rem + .4vw,1.25rem);
  line-height:1.55;color:var(--text-muted);
  max-width:56ch;
}

/* =====================  TOOLBAR (search + filters) ===================== */
.jtoolbar{
  padding:clamp(1.75rem,3vw,2.5rem) 0;
  border-bottom:1px solid var(--rule-soft);
  background:var(--paper-warm);
}
.jtoolbar__inner{
  display:flex;gap:clamp(1rem,3vw,2rem);
  align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.search-box{
  position:relative;flex:1 1 280px;max-width:360px;
}
.search-box::before{
  content:"";position:absolute;left:.75rem;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border:1.5px solid var(--text-muted);border-radius:50%;
  pointer-events:none;
}
.search-box::after{
  content:"";position:absolute;left:1.55rem;top:calc(50% + 3px);
  width:7px;height:1.5px;background:var(--text-muted);transform:rotate(45deg);
  pointer-events:none;transform-origin:left;
}
.search-box input{
  width:100%;
  padding:.75rem .85rem .75rem 2.2rem;
  background:var(--paper);
  border:none;
  border-bottom:1.5px solid var(--rule);
  font-family:var(--serif);
  font-variation-settings:"opsz" 14,"SOFT" 40,"wght" 420;
  font-size:1rem;color:var(--text);
  outline:none;
  transition:border-color .2s ease, background .2s ease;
  border-radius:0;
}
.search-box input:focus{border-bottom-color:var(--ember);background:var(--paper-deep)}
.search-box input::placeholder{
  color:var(--text-faint);font-style:italic;
  font-variation-settings:"opsz" 14,"SOFT" 80,"wght" 360;
}

.blog-filters{
  display:flex;gap:.25rem;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);
}
.filter-btn{
  background:none;border:none;cursor:pointer;
  padding:.55rem .8rem;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);
  position:relative;
  transition:color .2s ease;
}
.filter-btn:hover{color:var(--ember)}
.filter-btn::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;
  height:1px;background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.filter-btn:hover::after,.filter-btn.active::after{transform:scaleX(1)}
.filter-btn.active{color:var(--ember)}
.filter-btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* =====================  HERO ARTICLE (featured) ===================== */
.jfeatured{
  padding:clamp(3rem,6vw,5rem) 0;
  background:var(--paper);
}
.hero-article{
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
  text-decoration:none;color:var(--text);
  position:relative;
  padding-top:1.5rem;
  border-top:2px solid var(--ember);
  transition:transform .3s ease;
}
.hero-article::before{
  content:"Featured";
  position:absolute;top:-10px;left:0;
  padding:0 .6rem;background:var(--paper);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ember);font-weight:500;
}
.hero-article:hover{transform:translateY(-3px)}
.hero-article:focus-visible{outline:2px solid var(--ember);outline-offset:6px}
.hero-image{
  aspect-ratio:4/3;overflow:hidden;
  background:var(--paper-warm);
  box-shadow:0 30px 60px -30px rgba(20,17,13,.4);
}
.hero-image img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.15) contrast(1.02);
  transition:transform .6s ease, filter .4s ease;
}
.hero-article:hover .hero-image img{transform:scale(1.04);filter:grayscale(0) contrast(1.05)}

.hero-body{display:flex;flex-direction:column;gap:.9rem}
.hero-meta{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);
}
.hero-category{color:var(--ember);font-weight:500}
.hero-date,.hero-reading-time{color:var(--text-muted)}
.hero-meta > * + *::before{
  content:"·";margin-right:.75rem;color:var(--paper-edge);
}
.hero-reading-time i{display:none}
.hero-body h2{
  font-variation-settings:"opsz" 144,"SOFT" 50,"wght" 440;
  font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);
  line-height:1.1;letter-spacing:-.018em;
  color:var(--text);margin:.25rem 0;
}
.hero-article:hover .hero-body h2{color:var(--ember)}
.hero-excerpt{
  font-family:var(--serif);
  font-variation-settings:"opsz" 18,"SOFT" 40,"wght" 400;
  font-size:clamp(1.02rem,.95rem + .25vw,1.15rem);
  line-height:1.6;color:var(--text-muted);
  max-width:55ch;
}
.hero-link{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text);padding:.5rem 0;
  border-bottom:1px solid var(--text);
  align-self:flex-start;
  transition:color .2s ease, border-color .2s ease, letter-spacing .3s ease;
}
.hero-link i{display:none}
.hero-link::after{content:" →";color:var(--ember)}
.hero-article:hover .hero-link{color:var(--ember);border-color:var(--ember);letter-spacing:.26em}

@media (max-width:860px){
  .hero-article{grid-template-columns:1fr;gap:1.5rem}
  .hero-article::before{top:-8px}
}

/* =====================  ARTICLES GRID ===================== */
.jarchive{padding:clamp(3rem,6vw,5rem) 0;background:var(--paper)}
.articles-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.article-card{
  display:flex;flex-direction:column;gap:.9rem;
  text-decoration:none;color:var(--text);
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
  position:relative;
  transition:transform .3s ease;
}
.article-card::before{
  content:"";position:absolute;top:-1px;left:0;width:60px;height:2px;
  background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.article-card:hover::before{transform:scaleX(1)}
.article-card:hover{transform:translateY(-3px)}
.article-card:focus-visible{outline:2px solid var(--ember);outline-offset:6px}

.article-featured-image{
  aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,var(--paper-warm) 50%,var(--paper-deep) 50%);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);
}
.article-featured-image img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.18) contrast(1.02);
  transition:transform .5s ease, filter .4s ease;
}
.article-card:hover .article-featured-image img{transform:scale(1.04);filter:grayscale(0) contrast(1.05)}
.article-featured-image i{
  font-family:var(--serif);font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 60,"wght" 400;
  font-size:2.5rem;color:var(--text-faint);
}
.article-featured-image i::before{content:"§"}

.article-content{display:flex;flex-direction:column;gap:.7rem;flex:1}
.article-meta{
  display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);
}
.article-category{color:var(--ember);font-weight:500}
.article-meta > * + *::before{content:"·";margin-right:.65rem;color:var(--paper-edge)}
.article-reading-time i{display:none}
.article-title{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72,"SOFT" 50,"wght" 460;
  font-size:clamp(1.2rem,1rem + .8vw,1.5rem);
  line-height:1.18;letter-spacing:-.015em;color:var(--text);
}
.article-card:hover .article-title{color:var(--ember)}
.article-excerpt{
  font-family:var(--serif);
  font-variation-settings:"opsz" 14,"SOFT" 40,"wght" 400;
  font-size:.97rem;line-height:1.55;color:var(--text-muted);
}
.article-footer{
  display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
  margin-top:auto;padding-top:.5rem;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);
}
.article-link{color:var(--text);display:inline-flex;align-items:center;gap:.3rem}
.article-link i{display:none}
.article-link::after{content:" →";color:var(--ember)}
.article-card:hover .article-link{color:var(--ember)}

@media (max-width:960px){.articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.articles-grid{grid-template-columns:1fr;gap:2rem}}

/* =====================  LOADING / EMPTY STATES ===================== */
.loading,.empty-state{
  grid-column:1/-1;
  padding:4rem 1rem;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);
}
.loading{display:flex;flex-direction:column;align-items:center;gap:1rem}
.loading-spinner{
  width:20px;height:20px;border:1.5px solid var(--rule-soft);border-top-color:var(--ember);
  border-radius:50%;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state i{display:block;margin:0 auto .75rem}
.empty-state i::before{
  content:"§";
  font-family:var(--serif);font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 80,"wght" 340;
  font-size:2.5rem;color:var(--ember);display:inline-block;
}

/* =====================  PAGINATION ===================== */
.pagination{
  display:flex;gap:.25rem;justify-content:center;align-items:center;flex-wrap:wrap;
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--rule-soft);
}
.pagination-btn{
  background:none;border:none;cursor:pointer;
  padding:.6rem .9rem;
  min-width:42px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);
  position:relative;
  transition:color .2s ease;
}
.pagination-btn i{display:none}
.pagination-btn:first-child::before{content:"← "}
.pagination-btn:last-child::after{content:" →"}
.pagination-btn:hover:not(:disabled):not(.active){color:var(--text)}
.pagination-btn.active{color:var(--ember)}
.pagination-btn.active::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.35rem;
  height:1.5px;background:var(--ember);
}
.pagination-btn:disabled{opacity:.35;cursor:default}
.pagination-btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}