/* ---------------------------------------------------------------------------
   post.css: a blog post (post.php) and the /blog/ listing.

   Quiet on purpose: one reading column held near 68 characters, the share
   buttons sticky on the left, the table of contents sticky on the right,
   and the brand showing up only in the headings, the accent and the CTA.
   --------------------------------------------------------------------- */

.ap-post{padding:calc(var(--header-h, 84px) + 72px) 0 120px}

/* ---------- reading progress ---------- */
.ap-post-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background:rgba(238,240,246,.06); pointer-events:none;
}
.ap-post-progress i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,#ff8a3d,var(--orange));
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
}

/* ---------- head ---------- */
.ap-post-head{max-width:880px; margin-left:auto; margin-right:auto}
.ap-post-eyebrow{
  display:inline-block; font-family:'Space Mono',monospace; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--orange);
}
.ap-post-eyebrow:hover{color:#ff8a3d}
.ap-post-head h1{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(2.4rem, 5.4vw, 4.4rem); line-height:1.02; letter-spacing:.005em;
  margin:16px 0 18px; color:#f2f3f8; text-wrap:balance;
}
.ap-post-dek{
  margin:0; max-width:60ch; font-size:1.2rem; line-height:1.55;
  color:rgba(238,240,246,.82); text-wrap:pretty;
}
.ap-post-meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 24px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
}
.ap-post-byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 0;
  font-size:.86rem; color:var(--muted);
}
.ap-post-byline img{width:40px; height:40px; border-radius:50%; object-fit:cover; margin-right:12px}
.ap-post-byline > :not(img) + :not(img)::before{
  content:''; display:inline-block; width:1px; height:14px; margin:0 14px;
  background:rgba(238,240,246,.22); vertical-align:-2px;
}
.ap-post-author{color:var(--paper); font-weight:500}

/* ---------- share ---------- */
.ap-post-share{display:flex; align-items:center; gap:6px}
.ap-post-share-label{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-right:6px;
}
.ap-post-share a, .ap-post-share button{
  display:inline-grid; place-items:center; width:36px; height:36px; padding:0;
  border:1px solid transparent; border-radius:8px; background:none; cursor:pointer;
  color:rgba(238,240,246,.82); transition:color .2s, border-color .2s, background .2s;
}
.ap-post-share a:hover, .ap-post-share button:hover,
.ap-post-share a:focus-visible, .ap-post-share button:focus-visible{
  color:var(--orange); border-color:rgba(255,90,20,.45); background:rgba(255,90,20,.06); outline:none;
}
.ap-post-share svg{width:17px; height:17px; fill:currentColor}
.ap-post-share button svg{fill:none}
.ap-post-share button.is-copied{color:var(--orange)}
.ap-post-share--rail{flex-direction:column; align-items:flex-start; gap:4px; position:sticky; top:120px}
.ap-post-share--rail .ap-post-share-label{margin:0 0 8px}

/* ---------- hero ---------- */
.ap-post-hero{margin:44px auto 0}
.ap-post-hero img{
  /* featured images are composed 16:9; 2:1 trims only a sliver top and
     bottom while keeping the band shorter than the full frame */
  width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; object-position:50% 45%;
  border-radius:14px; border:1px solid var(--line);
}

/* ---------- layout: rail | body | toc ---------- */
.ap-post-layout{
  display:grid; grid-template-columns:72px minmax(0,680px) 220px;
  justify-content:space-between; gap:40px; margin-top:56px; align-items:start;
}
.ap-post-rail{align-self:stretch}
.ap-post-toc{position:sticky; top:120px}
.ap-post-toc-label{
  display:block; font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
.ap-post-toc ol, .ap-post-toc-mobile ol{list-style:none; margin:0; padding:0}
.ap-post-toc a{
  display:block; padding:7px 0 7px 14px; border-left:2px solid var(--line);
  font-size:.86rem; line-height:1.4; color:rgba(238,240,246,.62);
  transition:color .2s, border-color .2s;
}
.ap-post-toc a:hover{color:var(--paper)}
.ap-post-toc a.is-active{color:var(--paper); border-left-color:var(--orange)}
.ap-post-toc-mobile{display:none}

/* ---------- body ---------- */
.ap-post-body{font-size:1.08rem; line-height:1.72; color:rgba(238,240,246,.86)}
.ap-post-body > *{margin:0 0 1.15em}
.ap-post-body .ap-post-lead{font-size:1.24rem; line-height:1.6; color:var(--paper)}
.ap-post-body h2, .ap-post-faq h2{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:none;
  font-size:clamp(1.7rem, 3vw, 2.3rem); line-height:1.12; color:#f2f3f8;
  margin:2em 0 .55em; scroll-margin-top:130px; text-wrap:balance;
}
.ap-post-body a{color:var(--orange); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.ap-post-body a:hover{color:#ff8a3d}
.ap-post-body strong{color:var(--paper); font-weight:600}
.ap-post-body ul{padding-left:1.2em}
.ap-post-body li{margin:.45em 0; padding-left:.3em}
.ap-post-body li::marker{color:var(--orange)}
.ap-post-body code{
  font-family:'Space Mono',monospace; font-size:.86em;
  padding:.1em .4em; border-radius:5px; background:rgba(238,240,246,.08);
}
.ap-post-figure{margin:2em 0}
.ap-post-figure img{width:100%; height:auto; border-radius:12px; border:1px solid var(--line)}

/* inline service CTA */
.ap-post-inline-cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  margin:2.2em 0; padding:18px 0; border-block:1px solid var(--line); font-size:.95rem;
}
.ap-post-inline-cta span{color:var(--paper); font-weight:500}
.ap-post-inline-cta a{
  display:inline-flex; align-items:center; gap:10px; color:var(--orange);
  font-weight:600; text-decoration:none;
}
.ap-post-inline-cta a:hover{color:#ff8a3d}
.ap-post-inline-cta .ap-arw{width:13px; height:13px; fill:currentColor}

/* ---------- FAQ ---------- */
.ap-post-faq{margin-top:3em}
.ap-post-faq details{border-bottom:1px solid var(--line)}
.ap-post-faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:18px 0; cursor:pointer; list-style:none;
  font-size:1.05rem; font-weight:500; color:var(--paper);
}
.ap-post-faq summary::-webkit-details-marker{display:none}
.ap-post-faq summary::after{
  content:'+'; flex:none; font-family:'Space Mono',monospace; font-size:1.2rem; color:var(--orange);
  transition:transform .25s;
}
.ap-post-faq details[open] summary::after{transform:rotate(45deg)}
.ap-post-faq summary:focus-visible{outline:2px solid var(--orange); outline-offset:4px}
.ap-post-faq details p{margin:0 0 20px; line-height:1.7; color:rgba(238,240,246,.82)}

/* ---------- end CTA ---------- */
.ap-post-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 32px;
  margin-top:3.5em; padding:34px 36px; border-radius:16px;
  border:1px solid rgba(255,90,20,.35);
  background:radial-gradient(120% 140% at 100% 0%, rgba(255,90,20,.16), transparent 60%), rgba(10,8,24,.55);
}
.ap-post-cta h2{
  margin:0 0 8px; font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(1.6rem, 2.6vw, 2rem); line-height:1.08; color:#f2f3f8;
}
.ap-post-cta p{margin:0; color:rgba(238,240,246,.78)}
.ap-post-cta .ap-more{padding:16px 26px; font-size:12.5px; text-transform:uppercase; cursor:pointer}
.ap-post-cta .ap-more .ap-arw{width:14px; height:14px; fill:currentColor}

/* ---------- author ---------- */
.ap-post-author-box{
  display:flex; gap:20px; align-items:flex-start;
  margin-top:3em; padding-top:30px; border-top:1px solid var(--line);
}
.ap-post-author-box img{width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none}
.ap-post-author-box b{display:block; color:var(--paper); font-size:1.02rem}
.ap-post-author-box span{display:block; margin-top:2px; font-size:.86rem; color:var(--orange)}
.ap-post-author-box p{margin:8px 0 10px; font-size:.94rem; line-height:1.6; color:rgba(238,240,246,.75)}
.ap-post-author-box a{display:inline-flex; align-items:center; gap:8px; font-size:.86rem; color:rgba(238,240,246,.82)}
.ap-post-author-box a:hover{color:var(--orange)}
.ap-post-author-box .ap-arw{width:11px; height:11px; fill:currentColor}

.ap-post-back{
  display:inline-flex; align-items:center; gap:10px; margin-top:44px;
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(238,240,246,.72);
}
.ap-post-back .ap-arw{width:13px; height:13px; fill:currentColor}

/* ---------- /blog/ listing ---------- */
.ap-blog-head{max-width:760px; margin-bottom:56px}
.ap-blog-head h1{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(2.4rem, 5.4vw, 4.4rem); line-height:1.02; margin:14px 0 18px; color:#f2f3f8;
}
.ap-blog-head p{margin:0; font-size:1.15rem; line-height:1.6; color:rgba(238,240,246,.8)}
.ap-blog-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:28px}
.ap-blog-card{
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; background:rgba(10,8,24,.45); color:inherit; transition:border-color .2s, transform .2s;
}
.ap-blog-card:hover{border-color:rgba(255,90,20,.55); transform:translateY(-2px); color:inherit}
.ap-blog-card img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.ap-blog-card div{display:flex; flex-direction:column; gap:10px; padding:22px 22px 24px; flex:1}
.ap-blog-card small{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange)}
.ap-blog-card h2{margin:0; font-size:1.3rem; line-height:1.3; font-weight:600; color:var(--paper); text-wrap:balance}
.ap-blog-card p{margin:0; font-size:.95rem; line-height:1.6; color:rgba(238,240,246,.72)}
.ap-blog-card span{margin-top:auto; padding-top:8px; font-size:.84rem; color:var(--muted)}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .ap-post-layout{grid-template-columns:56px minmax(0,1fr); gap:28px}
  .ap-post-toc{display:none}
  .ap-post-toc-mobile{display:block}
}
@media (max-width:760px){
  .ap-post{padding-top:calc(var(--header-h, 72px) + 48px)}
  .ap-post-layout{grid-template-columns:minmax(0,1fr); margin-top:36px}
  .ap-post-rail{display:none}
  .ap-post-hero{margin-top:30px}
  .ap-post-hero img{aspect-ratio:16/9}
  .ap-post-meta .ap-post-share-label{display:none}
  .ap-post-byline{gap:6px 14px}
  .ap-post-byline img{margin-right:0}
  .ap-post-byline > :not(img) + :not(img)::before{display:none}
  .ap-post-cta{padding:26px 22px}
  .ap-post-cta .ap-more{width:100%}
}
.ap-post-toc-mobile{
  margin-bottom:28px; border:1px solid var(--line); border-radius:12px; padding:0 18px;
}
.ap-post-toc-mobile summary{
  padding:15px 0; cursor:pointer; font-family:'Space Mono',monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper);
}
.ap-post-toc-mobile ol{padding-bottom:14px}
.ap-post-toc-mobile a{display:block; padding:7px 0; font-size:.95rem; color:rgba(238,240,246,.78)}
@media (min-width:1101px){ .ap-post-toc-mobile{display:none} }