/* Article page styles — shared across all Journal articles */

[data-fade] { opacity:0; transform:translateY(20px); transition:opacity 0.6s ease,transform 0.6s cubic-bezier(0.16,1,0.3,1); transition-delay:var(--delay,0ms); }
[data-fade].visible { opacity:1; transform:none; }

.article-hero { position:relative; overflow:hidden; }
.article-hero img { width:100%; height:clamp(320px,58vh,640px); object-fit:cover; display:block; }
.article-hero-media { position:relative; }
.article-hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,0.35) 100%); }

.article-head { max-width:var(--content-narrow); margin-inline:auto; padding-top:var(--space-12); padding-bottom:var(--space-8); text-align:center; }
.article-head .category { display:block; font-family:var(--font-body); font-size:var(--text-xs); font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--space-4); }
.article-head h1 { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:300; color:var(--color-text); line-height:1.1; margin-bottom:var(--space-5); }
.article-head h1 em { font-style:italic; color:var(--color-primary); }
.article-head .deck { font-family:var(--font-display); font-style:italic; font-size:var(--text-lg); color:var(--color-text-muted); line-height:1.5; max-width:46ch; margin-inline:auto; }
.article-byline { display:flex; gap:var(--space-3); align-items:center; justify-content:center; flex-wrap:wrap; margin-top:var(--space-6); font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--color-text-faint); }
.article-byline .dot { color:var(--color-divider); }

.article-prose { max-width:var(--content-narrow); margin-inline:auto; padding-block:var(--space-10) var(--space-8); }
.article-prose p { font-size:var(--text-base); color:var(--color-text-muted); line-height:1.8; margin-bottom:var(--space-5); }
.article-prose p.lede { font-size:var(--text-lg); color:var(--color-text); line-height:1.7; }
.article-prose p.lede::first-letter { font-family:var(--font-display); font-weight:500; font-size:3.6em; line-height:0.82; float:left; margin:0.06em 0.08em 0 0; color:var(--color-primary); }
.article-prose h2 { font-family:var(--font-display); font-weight:400; font-size:var(--text-xl); color:var(--color-text); line-height:1.2; margin-top:var(--space-10); margin-bottom:var(--space-4); }
.article-prose h2 em { font-style:italic; color:var(--color-primary); }

.article-figure { max-width:var(--content-default); margin:var(--space-12) auto; }
.article-figure img { width:100%; border-radius:var(--radius-lg); display:block; box-shadow:var(--shadow-md); }
.article-figure figcaption { font-family:var(--font-body); font-size:var(--text-sm); color:var(--color-text-faint); text-align:center; margin-top:var(--space-3); font-style:italic; max-width:52ch; margin-inline:auto; }

.pullquote { max-width:var(--content-narrow); margin:var(--space-12) auto; padding:0 var(--space-4); text-align:center; }
.pullquote blockquote { font-family:var(--font-display); font-style:italic; font-size:var(--text-xl); color:var(--color-text); line-height:1.4; position:relative; }
.pullquote blockquote::before { content:"\201C"; display:block; font-size:2.4em; line-height:0.4; color:var(--color-primary); margin-bottom:var(--space-3); height:0.4em; }
.pullquote cite { display:block; font-family:var(--font-body); font-style:normal; font-size:var(--text-xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--color-text-faint); margin-top:var(--space-4); }

/* Shop the Story — affiliate product callout */
.shop { background:var(--color-surface-offset); padding-block:var(--space-16); margin-top:var(--space-8); }
.shop-inner { max-width:var(--content-default); margin-inline:auto; }
.shop-header { text-align:center; margin-bottom:var(--space-10); }
.shop-label { display:block; font-family:var(--font-body); font-size:var(--text-xs); font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--space-3); }
.shop-title { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:300; color:var(--color-text); }
.shop-title em { font-style:italic; color:var(--color-primary); }
.shop-intro { font-size:var(--text-base); color:var(--color-text-muted); max-width:54ch; margin:var(--space-4) auto 0; line-height:1.7; }

.product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-5); }
.product-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s ease; }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.product-media { background:var(--color-surface-offset); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:var(--space-6); }
.product-media img { max-width:100%; max-height:100%; object-fit:contain; display:block; transition:transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.product-card:hover .product-media img { transform:scale(1.04); }
.product-card .product-body { padding:var(--space-5); display:flex; flex-direction:column; flex:1; }
.product-card .product-rank { font-family:var(--font-display); font-style:italic; color:var(--color-primary); font-size:var(--text-sm); margin-bottom:var(--space-2); }
.product-card h3 { font-family:var(--font-body); font-size:var(--text-sm); font-weight:500; color:var(--color-text); line-height:1.4; margin-bottom:var(--space-3); min-height:2.8em; }
.product-meta { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); color:var(--color-text-faint); margin-bottom:var(--space-4); }
.product-stars { color:#c8843b; letter-spacing:0.05em; }
.product-reviews { color:var(--color-text-faint); }
.product-card .btn { margin-top:auto; width:100%; justify-content:center; }

.shop-disclosure { max-width:64ch; margin:var(--space-8) auto 0; font-family:var(--font-body); font-size:var(--text-xs); color:var(--color-text-faint); text-align:center; line-height:1.6; }

.article-foot { max-width:var(--content-narrow); margin-inline:auto; padding-block:var(--space-12); text-align:center; border-top:1px solid var(--color-divider); }
.article-foot .back { display:inline-block; font-family:var(--font-body); font-size:var(--text-sm); letter-spacing:0.12em; text-transform:uppercase; color:var(--color-primary); text-decoration:none; margin-bottom:var(--space-6); }
.article-foot .back:hover { color:var(--color-cool); }
.article-foot .next-title { font-family:var(--font-display); font-size:var(--text-lg); color:var(--color-text-muted); }
.article-foot .next-link { font-family:var(--font-display); font-style:italic; font-size:var(--text-xl); color:var(--color-primary); text-decoration:none; }

@media (max-width:760px){
  .article-head h1 { font-size:var(--text-2xl); }
  .article-prose p { font-size:var(--text-base); }
  .article-hero img { height:clamp(260px,46vh,420px); }
}