/* =========================================================================
   Speedfarm Almanac — article (long-read) template
   ========================================================================= */

/* ─── ARTICLE HEAD ─── */
.article-head{
  padding:72px 52px 48px;
  border-bottom:0.5px solid var(--rule)
}
.article-head-inner{max-width:880px;margin:0 auto}
.article-back{
  font-family:var(--sans);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--kl);text-decoration:none;
  display:inline-flex;align-items:center;gap:12px;margin-bottom:36px;
  transition:color 0.15s
}
.article-back::before{
  content:'';display:inline-block;width:20px;height:1px;
  background:var(--kl);transition:background 0.15s
}
.article-back:hover{color:var(--k)}
.article-back:hover::before{background:var(--r)}

.article-rule{width:20px;height:1px;background:var(--r);margin-bottom:14px}
.article-meta{
  font-family:var(--sans);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--kl);margin-bottom:24px
}
.article-meta .meta-issue{color:var(--r);margin-right:14px}

.article-head h1{
  font-family:var(--serif);font-size:36px;font-weight:normal;
  line-height:1.25;color:var(--k);max-width:720px
}

/* ─── ARTICLE BODY ─── */
.article-body{
  padding:56px 52px 72px
}
.article-body-inner{
  max-width:680px;margin:0 auto;
  font-family:var(--serif);font-size:17px;line-height:1.85;
  color:var(--km)
}

.article-body-inner p{margin-bottom:24px}
.article-body-inner p:last-child{margin-bottom:0}

.article-body-inner a{
  color:var(--k);text-decoration:underline;
  text-decoration-color:var(--rule);text-decoration-thickness:1px;
  text-underline-offset:3px;transition:text-decoration-color 0.15s
}
.article-body-inner a:hover{text-decoration-color:var(--r)}

.article-body-inner strong{color:var(--k);font-weight:600}
.article-body-inner em{font-style:italic}

.article-body-inner h2{
  font-family:var(--serif);font-size:24px;font-weight:normal;
  color:var(--k);line-height:1.3;
  margin-top:48px;margin-bottom:20px;
  padding-top:28px;border-top:0.5px solid var(--rule);
  position:relative
}
.article-body-inner h2::before{
  content:'';display:block;width:20px;height:1px;
  background:var(--r);position:absolute;top:-1px;left:0
}

.article-body-inner h3{
  font-family:var(--serif);font-size:19px;font-weight:normal;
  color:var(--k);line-height:1.35;
  margin-top:36px;margin-bottom:16px
}

.article-body-inner h4{
  font-family:var(--sans);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--r);font-weight:500;
  margin-top:32px;margin-bottom:14px
}

.article-body-inner ul,
.article-body-inner ol{
  margin:0 0 24px 0;padding-left:24px
}
.article-body-inner li{
  margin-bottom:10px;line-height:1.75
}
.article-body-inner li:last-child{margin-bottom:0}
.article-body-inner li::marker{color:var(--kl)}

.article-body-inner blockquote{
  margin:32px 0;padding:0 0 0 28px;
  border-left:1px solid var(--r);
  font-style:italic;color:var(--k);
  font-size:18px;line-height:1.7
}
.article-body-inner blockquote p{margin-bottom:14px}
.article-body-inner blockquote p:last-child{margin-bottom:0}

/* ─── ARTICLE FOOTER NAV (prev/next) ─── */
.article-nav{
  padding:40px 52px;border-top:0.5px solid var(--rule);
  background:var(--c)
}
.article-nav-inner{
  max-width:880px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:24px
}
.article-nav a{
  display:block;text-decoration:none;
  padding:20px 24px;background:var(--w);
  border:0.5px solid var(--rule);
  transition:border-color 0.2s, background 0.2s
}
.article-nav a:hover{border-color:var(--k)}
.article-nav-prev{text-align:left}
.article-nav-next{text-align:right;grid-column:2}
.article-nav-lbl{
  font-family:var(--sans);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--kl);margin-bottom:8px;
  display:flex;align-items:center;gap:10px
}
.article-nav-prev .article-nav-lbl::before{
  content:'';display:inline-block;width:14px;height:1px;background:var(--r)
}
.article-nav-next .article-nav-lbl{justify-content:flex-end}
.article-nav-next .article-nav-lbl::after{
  content:'';display:inline-block;width:14px;height:1px;background:var(--r)
}
.article-nav-title{
  font-family:var(--serif);font-size:14px;line-height:1.4;color:var(--k)
}
.article-nav-issue{
  font-family:var(--sans);font-size:10px;letter-spacing:0.10em;
  text-transform:uppercase;color:var(--r);margin-bottom:6px
}

.article-nav-back{
  grid-column:1/-1;margin-top:12px;text-align:center;
  font-family:var(--sans);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--kl);text-decoration:none;
  padding:14px;transition:color 0.15s
}
.article-nav-back:hover{color:var(--k)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1024px){
  .article-head{padding:56px 32px 40px}
  .article-head h1{font-size:30px}
  .article-body{padding:48px 32px 64px}
  .article-nav{padding:32px}
}

@media (max-width:768px){
  .article-head{padding:40px 24px 32px}
  .article-head h1{font-size:24px;line-height:1.3}
  .article-back{margin-bottom:24px}
  .article-meta{margin-bottom:18px;flex-wrap:wrap}

  .article-body{padding:36px 24px 48px}
  .article-body-inner{font-size:16px;line-height:1.8}
  .article-body-inner h2{font-size:20px;margin-top:36px;padding-top:24px}
  .article-body-inner h3{font-size:17px;margin-top:28px}
  .article-body-inner blockquote{padding-left:20px;font-size:16px}

  .article-nav{padding:24px}
  .article-nav-inner{grid-template-columns:1fr;gap:12px}
  .article-nav-next{grid-column:1;text-align:left}
  .article-nav-next .article-nav-lbl{justify-content:flex-start}
  .article-nav-next .article-nav-lbl::after{display:none}
  .article-nav-next .article-nav-lbl::before{
    content:'';display:inline-block;width:14px;height:1px;background:var(--r)
  }
}