/* =============================================================
   OLD FORGE · ARTICLE PAGE (blog-article.php) - page-specific
   Tokens/primitives/masthead → letterpress.css
   Footer/chat/toast/motion → letterpress-shell.css
   ============================================================= */

/* === ARTICLE PAGE === */
.article-page{
  padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(4rem,7vw,6rem);
  background:var(--paper);
}
.article-wrapper{
  max-width:760px;margin:0 auto;padding:0 var(--page);
}

/* Breadcrumbs - editorial trail */
.breadcrumbs{
  display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:clamp(2rem,4vw,3rem);
  padding-bottom:1rem;
  border-bottom:1px solid var(--rule-soft);
}
.breadcrumbs a{text-decoration:none;color:var(--text-muted);transition:color .2s ease}
.breadcrumbs a:hover{color:var(--ember)}
.breadcrumbs .separator{color:var(--paper-edge)}
.breadcrumbs .separator i{display:none}
.breadcrumbs .separator::before{content:"/"}
.breadcrumbs .current{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50ch}

/* Article header */
.article-header{
  margin-bottom:clamp(2rem,4vw,3rem);
}
.article-header-meta{
  display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;
  margin-bottom:1.5rem;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);
}
.article-header-category{
  color:var(--ember);font-weight:500;
  letter-spacing:.22em;
}
.article-header-meta > * + *::before{content:"·";margin-right:.75rem;color:var(--paper-edge)}
.reading-time{display:inline-flex;align-items:center;gap:.3rem;color:var(--text-muted)}
.reading-time i{display:none}

.article-header h1{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144,"SOFT" 60,"wght" 400;
  font-size:clamp(2.25rem,1.5rem + 3.5vw,4rem);
  line-height:1.05;letter-spacing:-.022em;
  color:var(--text);
  margin:0 0 1.25rem;
}
.article-header-info{
  display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);
  padding-top:1rem;
  border-top:1px solid var(--rule-soft);
}
.article-header-info strong{color:var(--ember);font-weight:500;letter-spacing:.18em}

/* Featured image - full-bleed on wider viewports */
.article-featured-image-large{
  margin:clamp(2rem,4vw,3rem) 0;
  overflow:hidden;
  background:var(--paper-warm);
  box-shadow:0 40px 80px -40px rgba(20,17,13,.4);
}
.article-featured-image-large a{display:block}
.article-featured-image-large img{
  width:100%;height:auto;display:block;
  filter:grayscale(.1) contrast(1.03);
}

/* Table of contents - appears when article has >=3 headings */
.toc{
  margin:clamp(2rem,4vw,2.75rem) 0;
  padding:1.5rem 1.75rem;
  background:var(--paper-warm);
  border-left:2px solid var(--ember);
  font-family:var(--serif);
}
.toc h3{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--ember);
  margin:0 0 1rem;
  display:flex;align-items:center;gap:.5rem;
}
.toc h3 i{display:none}
.toc h3::before{content:"§";font-family:var(--serif);font-style:italic;font-size:1.3em;color:var(--ember);font-weight:400}
.toc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}
.toc li{display:block}
.toc a{
  font-family:var(--serif);
  font-variation-settings:"opsz" 18,"SOFT" 50,"wght" 420;
  font-size:1rem;line-height:1.4;
  color:var(--text);text-decoration:none;
  transition:color .18s ease, padding-left .2s ease;
  display:inline-block;padding:.1rem 0;
}
.toc a:hover{color:var(--ember);padding-left:.3rem}
.toc li.toc-h3{padding-left:1.25rem}
.toc li.toc-h3 a{
  font-size:.95rem;font-style:italic;
  font-variation-settings:"opsz" 18,"SOFT" 80,"wght" 380;
  color:var(--text-muted);
}

/* === ARTICLE BODY TYPOGRAPHY - the main reading canvas === */
.article-body{
  font-family:var(--serif);
  font-variation-settings:"opsz" 18,"SOFT" 40,"wght" 400;
  font-size:clamp(1.05rem,.95rem + .35vw,1.22rem);
  line-height:1.72;
  color:var(--text);
  font-feature-settings:"onum","liga","calt";
}
.article-body > *:first-child{margin-top:0}
.article-body p{margin:0 0 1.5em;max-width:68ch}
.article-body p:first-of-type::first-letter{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144,"SOFT" 80,"wght" 620;
  font-size:clamp(3.5rem,6vw,5rem);
  float:left;line-height:.82;
  padding:.08em .18em 0 0;
  color:var(--ember);
  font-feature-settings:"ss01";
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4{
  font-family:var(--serif);
  letter-spacing:-.015em;
  color:var(--text);
  margin:2em 0 .7em;
  line-height:1.15;
  scroll-margin-top:5rem;
}
.article-body h2{
  font-variation-settings:"opsz" 72,"SOFT" 50,"wght" 460;
  font-size:clamp(1.65rem,1.2rem + 1.8vw,2.25rem);
  padding-top:.4em;
  border-top:1px solid var(--rule-soft);
  position:relative;
}
.article-body h2::before{
  content:"";position:absolute;top:-1px;left:0;width:50px;height:2px;background:var(--ember);
}
.article-body h3{
  font-variation-settings:"opsz" 48,"SOFT" 70,"wght" 420;
  font-style:italic;
  font-size:clamp(1.3rem,1rem + 1.2vw,1.65rem);
  color:var(--text-muted);
}
.article-body h4{
  font-variation-settings:"opsz" 24,"SOFT" 40,"wght" 540;
  font-size:1.15rem;
}

.article-body strong{font-weight:520;color:var(--text);font-variation-settings:"opsz" 18,"SOFT" 50,"wght" 540}
.article-body em{font-style:italic;font-variation-settings:"opsz" 18,"SOFT" 90,"wght" 400}

.article-body a{
  color:var(--text);
  border-bottom:1.5px solid var(--ember);
  text-decoration:none;
  transition:color .18s ease, background .18s ease;
  padding:0 .08em;
}
.article-body a:hover{color:var(--ember);background:rgba(200,68,28,.06)}

.article-body ul,.article-body ol{
  margin:0 0 1.5em;
  padding-left:1.4em;
  max-width:65ch;
}
.article-body li{margin:0 0 .5em;padding-left:.3em}
.article-body ul{list-style:none;padding-left:0}
.article-body ul > li{position:relative;padding-left:1.4em}
.article-body ul > li::before{
  content:"—";position:absolute;left:0;top:0;
  color:var(--ember);font-family:var(--serif);font-style:italic;
  font-variation-settings:"opsz" 18,"SOFT" 90,"wght" 400;
}
.article-body ol{list-style:none;counter-reset:oli;padding-left:0}
.article-body ol > li{position:relative;padding-left:2.5em;counter-increment:oli}
.article-body ol > li::before{
  content:counter(oli,decimal-leading-zero) " /";
  position:absolute;left:0;top:.2em;
  font-family:var(--mono);font-size:.75em;letter-spacing:.1em;
  color:var(--ember);font-weight:500;
}

.article-body blockquote{
  margin:2em 0;
  padding:.5em 0 .5em 1.75em;
  border-left:3px solid var(--ember);
  font-family:var(--serif);font-style:italic;
  font-variation-settings:"opsz" 72,"SOFT" 90,"wght" 360;
  font-size:clamp(1.2rem,1rem + 1vw,1.55rem);
  line-height:1.4;color:var(--text);
  max-width:62ch;
  letter-spacing:-.01em;
}
.article-body blockquote p{margin:0 0 .5em;max-width:none}
.article-body blockquote p:last-child{margin-bottom:0}

.article-body code{
  font-family:var(--mono);font-size:.85em;
  background:var(--paper-deep);padding:.12em .4em;
  border:1px solid var(--rule-soft);
  color:var(--ember-deep);
  font-variation-settings:normal;
}
.article-body pre{
  font-family:var(--mono);
  background:var(--ink);color:var(--paper);
  padding:1.25rem 1.5rem;
  margin:2em 0;
  overflow-x:auto;
  font-size:.88em;line-height:1.55;
  border-left:3px solid var(--ember);
  position:relative;
}
.article-body pre::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--ember),var(--ember-hot),transparent);
}
.article-body pre code{
  background:none;border:none;padding:0;color:inherit;
  font-size:inherit;
}

.article-body hr{
  border:none;height:0;
  margin:3em auto;
  text-align:center;
  max-width:40ch;
}
.article-body hr::before{
  content:"§ § §";
  font-family:var(--serif);font-style:italic;
  font-variation-settings:"opsz" 72,"SOFT" 90,"wght" 340;
  font-size:1.2em;color:var(--ember);
  letter-spacing:.5em;
}

.article-body img{
  display:block;
  margin:2em auto;
  max-width:100%;
  box-shadow:0 20px 40px -20px rgba(20,17,13,.3);
}
.article-body figure{margin:2em 0}
.article-body figcaption{
  font-family:var(--serif);font-style:italic;
  font-variation-settings:"opsz" 14,"SOFT" 80,"wght" 380;
  font-size:.95rem;color:var(--text-muted);
  text-align:center;margin-top:.5em;
}

.article-body table{
  border-collapse:collapse;
  margin:2em 0;
  font-size:.95em;
  font-family:var(--serif);
  width:100%;
  max-width:68ch;
}
.article-body th,.article-body td{
  padding:.6rem .85rem;
  border-bottom:1px solid var(--rule-soft);
  text-align:left;
  vertical-align:top;
}
.article-body th{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember);
  border-bottom:1.5px solid var(--ember);
}

/* === SHARE BAR === */
.share-bar{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin:clamp(3rem,5vw,4rem) 0 clamp(2rem,4vw,3rem);
  padding:1.25rem 0;
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-muted);
}
.share-bar > span:first-child{color:var(--ember);font-weight:500}
.share-btn{
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule-soft);cursor:pointer;
  color:var(--text-muted);
  text-decoration:none;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
  border-radius:0;
}
.share-btn:hover{color:var(--ember);border-color:var(--ember);background:var(--paper-warm)}
.share-btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.share-btn.copied{color:var(--ember);border-color:var(--ember);background:var(--paper-warm)}
.share-btn i{font-style:normal;font-size:14px}

/* === AUTHOR CARD === */
.author-card{
  display:flex;align-items:center;gap:1.25rem;
  padding:1.5rem;
  background:var(--paper-warm);
  border-left:2px solid var(--ember);
  margin:2rem 0 3rem;
}
.author-avatar{
  width:56px;height:56px;flex:0 0 auto;
  background:var(--ember);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;
  font-variation-settings:"opsz" 72,"SOFT" 90,"wght" 500;
  font-size:1.1rem;letter-spacing:.02em;
}
.author-info{flex:1;min-width:0}
.author-info h4{
  font-family:var(--serif);
  font-variation-settings:"opsz" 48,"SOFT" 50,"wght" 500;
  font-size:1.1rem;color:var(--text);
  margin:0 0 .25rem;
}
.author-info p{
  font-family:var(--serif);
  font-variation-settings:"opsz" 14,"SOFT" 40,"wght" 400;
  font-size:.95rem;line-height:1.55;color:var(--text-muted);
  margin:0;
}

@media (max-width:520px){
  .author-card{flex-direction:column;text-align:center;gap:1rem}
}

/* === RELATED ARTICLES === */
.related-articles{
  margin-top:clamp(3rem,6vw,5rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:2px solid var(--rule);
  position:relative;
}
.related-articles::before{
  content:"";position:absolute;top:-2px;left:0;width:60px;height:2px;background:var(--ember);
}
.related-articles h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72,"SOFT" 50,"wght" 400;
  font-size:clamp(1.75rem,1.3rem + 1.8vw,2.5rem);
  letter-spacing:-.018em;color:var(--text);
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2rem);
}
.related-card{
  display:flex;flex-direction:column;gap:.75rem;
  text-decoration:none;color:var(--text);
  padding-top:1rem;
  border-top:1px solid var(--rule-soft);
  transition:transform .3s ease;
}
.related-card:hover{transform:translateY(-3px)}
.related-card:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
.related-card-image{
  aspect-ratio:16/10;overflow:hidden;background:var(--paper-warm);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);
}
.related-card-image img{
  width:100%;height:100%;
  object-fit:contain;padding:6%;box-sizing:border-box;
  filter:grayscale(.15);transition:transform .4s ease, filter .3s ease;
}
.related-card:hover .related-card-image img{transform:scale(1.04);filter:grayscale(0)}
.related-card-image i{font-style:normal}
.related-card-image i::before{
  content:"§";font-family:var(--serif);font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 60,"wght" 400;
  font-size:2rem;color:var(--text-faint);
}
.related-card-body{display:flex;flex-direction:column;gap:.5rem;flex:1}
.related-card-body h3{
  font-family:var(--serif);
  font-variation-settings:"opsz" 48,"SOFT" 50,"wght" 460;
  font-size:1.1rem;line-height:1.2;letter-spacing:-.012em;
  margin:0;color:var(--text);
}
.related-card:hover .related-card-body h3{color:var(--ember)}
.related-card-body p{
  font-family:var(--serif);
  font-variation-settings:"opsz" 14,"SOFT" 40,"wght" 400;
  font-size:.9rem;line-height:1.5;color:var(--text-muted);
  margin:0;
}
.related-card-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);
}
.read-link i{display:none}
.read-link::after{content:" →";color:var(--ember)}
.related-card:hover .read-link{color:var(--ember)}
@media (max-width:860px){.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.related-grid{grid-template-columns:1fr}}

/* === NOT FOUND === */
.not-found{
  max-width:560px;margin:4rem auto;text-align:center;
  padding:3rem 2rem;
  background:var(--paper-warm);
  border-left:2px solid var(--ember);
}
.not-found i{display:block;margin:0 auto 1rem}
.not-found i::before{
  content:"§";font-family:var(--serif);font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 80,"wght" 340;
  font-size:3rem;color:var(--ember);
}
.not-found h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72,"SOFT" 50,"wght" 440;
  font-size:1.75rem;letter-spacing:-.015em;margin:0 0 .75rem;
}
.not-found p{
  font-family:var(--serif);color:var(--text-muted);
  margin:0 0 1.5rem;line-height:1.5;
}
.not-found a{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text);text-decoration:none;
  padding:.75rem 1.25rem;
  border-top:1px solid var(--text);border-bottom:1px solid var(--text);
  transition:color .2s ease, border-color .2s ease;
}
.not-found a:hover{color:var(--ember);border-color:var(--ember)}
.not-found a i{display:none}
.not-found a::before{content:"← "}