/* ============================================================
   BEFOX - Blog post / Article template
   Reading-first. Constrained measure, editorial prose.
   ============================================================ */

/* ---------- ARTICLE HERO ---------- */
.art-hero{
  border-bottom:1px solid var(--hair);
  background:
    radial-gradient(100% 80% at 80% -20%, rgba(240,128,24,.12), transparent 55%),
    var(--ink-900);
}
.art-hero .wrap{ max-width:820px; padding-block:clamp(36px,6vw,68px) clamp(28px,4vw,44px); display:flex; flex-direction:column; align-items:flex-start; }
.breadcrumb{ font-family:var(--mono); font-size:12.5px; color:var(--fg-mute); margin-bottom:26px; display:flex; gap:8px; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--orange); }
.breadcrumb .sep{ opacity:.5; }
.art-tag{
  display:inline-block; font-family:var(--mono); font-size:11.5px; color:var(--orange);
  border:1px solid var(--hair-strong); border-radius:20px; padding:4px 12px; margin-bottom:20px;
}
.art-hero h1{
  font-size:clamp(30px,5vw,52px); font-weight:800; letter-spacing:-.03em; line-height:1.08;
  text-wrap:balance; margin-top:0;
}
.art-hero .dek{ font-size:clamp(17px,2.2vw,20px); color:var(--fg-soft); margin-top:20px; max-width:60ch; }
.art-meta{
  display:flex; align-items:center; gap:14px; margin-top:30px; flex-wrap:wrap;
  font-size:14px; color:var(--fg-soft); width:100%;
}
.art-meta .avatar{
  width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--brown));
  display:grid; place-items:center; font-weight:800; color:#1a1107; font-size:15px;
}
.art-meta b{ color:var(--fg); font-weight:600; }
.art-meta .mono{ font-family:var(--mono); font-size:12.5px; color:var(--fg-mute); }
.art-meta .dotsep{ width:4px; height:4px; border-radius:50%; background:var(--fg-mute); }

/* lead image */
.art-lead{ margin-block:clamp(28px,4vw,44px); }
.art-lead .ph{
  max-width:1040px; margin-inline:auto; aspect-ratio:21/9;
  background:
    repeating-linear-gradient(135deg, rgba(244,239,232,.05) 0 10px, transparent 10px 20px),
    var(--ink-750);
  border:1px solid var(--hair); border-radius:16px; display:grid; place-items:center;
}
.art-lead .ph::after{
  content:attr(data-ph); font-family:var(--mono); font-size:12px; color:var(--fg-mute);
  border:1px dashed var(--hair-strong); border-radius:20px; padding:5px 12px;
}

/* ---------- PROSE ---------- */
.prose{ max-width:680px; margin-inline:auto; padding-bottom:clamp(40px,6vw,72px); }
.prose > * + *{ margin-top:1.25em; }
.prose p{ font-size:18px; color:var(--fg-soft); line-height:1.75; }
.prose p .lead-cap{ float:left; font-size:3.4em; line-height:.78; font-weight:800; color:var(--orange); padding:4px 12px 0 0; }
.prose h2{
  font-size:clamp(23px,3vw,30px); font-weight:800; letter-spacing:-.02em; color:var(--fg);
  margin-top:1.8em; line-height:1.2; scroll-margin-top:90px;
}
.prose h3{ font-size:21px; font-weight:700; color:var(--fg); margin-top:1.5em; }
.prose a{ color:var(--orange); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hair-strong); }
.prose a:hover{ text-decoration-color:var(--orange); }
.prose strong{ color:var(--fg); font-weight:700; }
.prose ul, .prose ol{ padding-left:1.3em; color:var(--fg-soft); }
.prose ul{ list-style:none; padding-left:0; }
.prose ul li{ position:relative; padding-left:1.6em; margin-top:.6em; line-height:1.7; }
.prose ul li::before{ content:"→"; position:absolute; left:0; color:var(--orange); font-weight:700; }
.prose ol{ counter-reset:li; list-style:none; padding-left:0; }
.prose ol li{ position:relative; padding-left:2em; margin-top:.6em; line-height:1.7; counter-increment:li; }
.prose ol li::before{ content:counter(li,decimal-leading-zero); position:absolute; left:0; font-family:var(--mono); font-size:13px; color:var(--orange); top:3px; }

.prose blockquote{
  margin-block:1.6em; padding:6px 0 6px 28px; border-left:3px solid var(--orange);
  font-size:23px; font-weight:600; letter-spacing:-.01em; color:var(--fg); line-height:1.4; text-wrap:balance;
}
.prose blockquote cite{ display:block; font-size:14px; font-weight:500; color:var(--fg-mute); font-style:normal; margin-top:12px; font-family:var(--mono); }

.prose figure{ margin-block:1.8em; }
.prose figure .ph{
  aspect-ratio:16/9; background:
    repeating-linear-gradient(135deg, rgba(244,239,232,.05) 0 10px, transparent 10px 20px),
    var(--ink-750);
  border:1px solid var(--hair); border-radius:12px; display:grid; place-items:center;
}
.prose figure .ph::after{ content:attr(data-ph); font-family:var(--mono); font-size:11.5px; color:var(--fg-mute); border:1px dashed var(--hair-strong); border-radius:20px; padding:4px 11px; }
.prose figcaption{ font-size:13.5px; color:var(--fg-mute); margin-top:10px; text-align:center; }

/* code block - fits the open-source theme */
.prose .code{
  background:var(--ink-850); border:1px solid var(--hair); border-radius:12px; overflow:hidden;
  font-family:var(--mono); font-size:13.5px;
}
.prose .code .bar{ display:flex; align-items:center; gap:7px; padding:10px 14px; border-bottom:1px solid var(--hair); color:var(--fg-mute); font-size:12px; }
.prose .code .bar .d{ width:9px; height:9px; border-radius:50%; background:var(--ink-700); }
.prose .code .bar .d:first-child{ background:var(--orange); }
.prose .code pre{ margin:0; padding:18px 18px; overflow-x:auto; line-height:1.7; color:var(--fg-soft); }
.prose .code .c{ color:var(--fg-mute); }
.prose .code .o{ color:var(--orange); }

/* article footer: tags + share */
.art-tags{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding-top:28px; border-top:1px solid var(--hair); margin-top:36px; }
.art-tags .lab{ font-family:var(--mono); font-size:12px; color:var(--fg-mute); margin-right:6px; }
.art-tags .t{ font-size:13.5px; color:var(--fg-soft); border:1px solid var(--hair-strong); border-radius:20px; padding:5px 13px; transition:.15s; }
.art-tags .t:hover{ border-color:var(--orange); color:var(--orange); }

/* author card */
.author-card{
  max-width:680px; margin:36px auto 0; display:flex; gap:20px; align-items:flex-start;
  padding:26px 28px; border:1px solid var(--hair); border-radius:16px; background:var(--ink-850);
}
.author-card .avatar{ width:56px; height:56px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--orange),var(--brown)); display:grid; place-items:center; font-weight:800; color:#1a1107; font-size:20px; }
.author-card .k{ font-family:var(--mono); font-size:11.5px; color:var(--orange); text-transform:uppercase; letter-spacing:.08em; }
.author-card h4{ font-size:18px; font-weight:700; margin:4px 0 8px; }
.author-card p{ color:var(--fg-mute); font-size:14.5px; }

/* ---------- RELATED ---------- */
.related{ border-top:1px solid var(--hair); padding-block:clamp(56px,8vw,88px); margin-top:clamp(48px,7vw,80px); }
.related .sec-head{ margin-bottom:36px; }
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rel-card{ display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:14px; overflow:hidden; background:var(--ink-850); transition:.18s; }
.rel-card:hover{ transform:translateY(-4px); border-color:var(--hair-strong); }
.rel-card .ph{ aspect-ratio:16/10; background:repeating-linear-gradient(135deg, rgba(244,239,232,.05) 0 10px, transparent 10px 20px), var(--ink-750); border-bottom:1px solid var(--hair); display:grid; place-items:center; }
.rel-card .ph::after{ content:attr(data-ph); font-family:var(--mono); font-size:11px; color:var(--fg-mute); }
.rel-card .body{ padding:18px 20px 22px; }
.rel-card .meta{ font-family:var(--mono); font-size:11.5px; color:var(--fg-mute); }
.rel-card .meta .tag{ color:var(--orange); }
.rel-card h3{ font-size:16.5px; font-weight:700; letter-spacing:-.015em; line-height:1.3; margin-top:9px; }
.rel-card:hover h3{ color:var(--orange-bright); }

@media (max-width:760px){
  .rel-grid{ grid-template-columns:1fr; }
  .author-card{ flex-direction:column; gap:14px; }
}