/*
Theme Name: AstraKlips Blog
Theme URI: https://astraklips.ai/
Description: Blog templates for AstraKlips, built as a child theme of Xpro. Adds a reading layout designed for long form articles: chapter navigation, a scrubber style reading progress bar, and article schema for search engines.
Author: AstraKlips
Template: xpro
Version: 1.1.0
License: GNU General Public License v2 or later
Text Domain: astraklips-blog
*/

/* ==========================================================================
   The design language follows the video library already on the site: same
   navy, red and crimson, same Space Grotesk and Inter pairing.

   The one idea specific to the blog is borrowed from the studio's own craft.
   An article is treated like a cut: reading time is shown as a timecode, the
   contents list is a chapter list, and progress is a scrubber. It is not
   decoration. The chapter list is the fastest way through a long article,
   and the scrubber tells a reader how much is left before they commit.
   ========================================================================== */

.akb{
  --ink:#101820;
  --ink-soft:#1a2430;
  --red:#c81e1e;
  --crimson:#DC143C;
  --muted:#6b7280;
  --paper:#ffffff;
  --wash:#f7f8f9;
  --hairline:rgba(16,24,32,.10);
  --hairline-soft:rgba(16,24,32,.06);

  --measure:68ch;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:'Space Grotesk','Inter',sans-serif;

  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
}
.akb *{box-sizing:border-box;}
.akb img{max-width:100%;height:auto;}
.akb a{color:inherit;}

/* --------------------------------------------------------------- scrubber */
.akb-scrub{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;
  background:transparent;pointer-events:none;
}
.akb-scrub__fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--red),var(--crimson));
  box-shadow:0 0 12px rgba(220,20,60,.55);
  transition:width .08s linear;
}

/* ------------------------------------------------------------------ shell */
.akb-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);}
.akb-article{padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem);}

/* --------------------------------------------------------------- masthead */
.akb-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-size:.78rem;color:var(--muted);margin-bottom:1.4rem;
}
.akb-crumbs a{text-decoration:none;}
.akb-crumbs a:hover{color:var(--crimson);}
.akb-crumbs span[aria-hidden]{opacity:.5;}

.akb-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--crimson);
  text-decoration:none;margin-bottom:.9rem;
}
.akb-eyebrow i{
  width:6px;height:6px;border-radius:50%;background:var(--crimson);
  box-shadow:0 0 8px 2px rgba(220,20,60,.5);
}

.akb-title{
  font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.12;
  margin:0 0 1rem;max-width:20ch;
}
.akb-deck{
  font-size:clamp(1.02rem,1.8vw,1.22rem);line-height:1.6;color:var(--muted);
  max-width:58ch;margin:0 0 1.6rem;
}

/* meta row. the timecode is the signature detail */
.akb-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;
  padding:1rem 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  font-size:.86rem;color:var(--muted);
}
.akb-meta__who{display:flex;align-items:center;gap:.6rem;}
.akb-meta__who img{width:34px;height:34px;border-radius:50%;display:block;}
.akb-meta__name{font-weight:600;color:var(--ink);}
.akb-meta__dot{width:3px;height:3px;border-radius:50%;background:var(--hairline);}
.akb-timecode{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
  padding:.32rem .7rem;border-radius:999px;
  background:var(--wash);border:1px solid var(--hairline-soft);color:var(--ink);
}
.akb-timecode b{font-weight:600;}
.akb-timecode span{color:var(--muted);font-weight:400;}

/* ------------------------------------------------------------------- hero */
.akb-hero{margin:clamp(1.6rem,3vw,2.4rem) 0;}
.akb-hero img{
  width:100%;border-radius:18px;display:block;
  box-shadow:0 24px 50px -34px rgba(16,24,32,.55);
}
.akb-hero figcaption{
  margin-top:.6rem;font-size:.8rem;color:var(--muted);text-align:center;
}

/* ------------------------------------------------------------------ layout */
.akb-cols{
  display:grid;grid-template-columns:minmax(0,1fr) 250px;
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
}

/* --------------------------------------------------------------- chapters */
.akb-chapters{position:sticky;top:2rem;}
.akb-chapters__head{
  font-family:var(--display);font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin:0 0 .9rem;padding-bottom:.7rem;border-bottom:1px solid var(--hairline);
}
.akb-chapters ol{list-style:none;margin:0;padding:0;}
.akb-chapters li{margin:0;}
.akb-chapters a{
  display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:baseline;
  padding:.45rem 0;text-decoration:none;font-size:.86rem;line-height:1.4;
  color:var(--muted);transition:color .2s ease;
}
.akb-chapters a:hover{color:var(--crimson);}
.akb-chapters a span:first-child{
  font-family:var(--mono);font-size:.72rem;color:var(--hairline);
  transition:color .2s ease;
}
.akb-chapters a:hover span:first-child{color:var(--crimson);}
.akb-chapters li.is-current a{color:var(--ink);font-weight:600;}
.akb-chapters li.is-current a span:first-child{color:var(--crimson);}
.akb-chapters li.akb-sub a{padding-left:1.4rem;font-size:.82rem;}

/* ------------------------------------------------------------ the article */
.akb-body{max-width:var(--measure);font-size:1.0625rem;line-height:1.78;}
.akb-body > * + *{margin-top:1.35em;}
.akb-body p{margin:0;}
.akb-body a{
  color:var(--ink);text-decoration:underline;
  text-decoration-color:rgba(220,20,60,.45);text-underline-offset:3px;
  text-decoration-thickness:1.5px;transition:color .2s ease,text-decoration-color .2s ease;
}
.akb-body a:hover{color:var(--crimson);text-decoration-color:var(--crimson);}

.akb-body h2,.akb-body h3,.akb-body h4{
  font-family:var(--display);font-weight:600;letter-spacing:-.01em;
  color:var(--ink);scroll-margin-top:5rem;
}
.akb-body h2{font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.25;margin-top:2.4em;}
.akb-body h3{font-size:clamp(1.14rem,2vw,1.35rem);line-height:1.3;margin-top:2em;}
.akb-body h4{font-size:1.05rem;margin-top:1.8em;}

/* a hairline that reads as a cut point between sections */
.akb-body h2::before{
  content:"";display:block;width:38px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--crimson));margin-bottom:.85rem;
}

.akb-body ul,.akb-body ol{margin-left:0;padding-left:1.3em;}
.akb-body li{margin-top:.5em;}
.akb-body li::marker{color:var(--crimson);}

.akb-body blockquote{
  margin:2em 0;padding:.2rem 0 .2rem 1.4rem;
  border-left:3px solid var(--crimson);
  font-family:var(--display);font-size:1.14rem;line-height:1.55;font-weight:500;
  color:var(--ink);
}
.akb-body blockquote p{margin:0;}
.akb-body blockquote cite{
  display:block;margin-top:.7rem;font-family:var(--sans);
  font-size:.85rem;font-style:normal;color:var(--muted);
}

.akb-body img,.akb-body figure img{border-radius:14px;}
.akb-body figure{margin:2em 0;}
.akb-body figcaption{margin-top:.6rem;font-size:.83rem;color:var(--muted);}

.akb-body code{
  font-family:var(--mono);font-size:.88em;padding:.15em .4em;border-radius:5px;
  background:var(--wash);border:1px solid var(--hairline-soft);
}
.akb-body pre{
  background:var(--ink);color:#e8ebef;padding:1.15rem 1.25rem;border-radius:14px;
  overflow-x:auto;font-family:var(--mono);font-size:.86rem;line-height:1.6;
}
.akb-body pre code{background:none;border:0;padding:0;color:inherit;}

.akb-body table{width:100%;border-collapse:collapse;font-size:.94rem;}
.akb-body th,.akb-body td{
  padding:.7rem .8rem;text-align:left;border-bottom:1px solid var(--hairline);
}
.akb-body th{
  font-family:var(--display);font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.akb-body hr{border:0;height:1px;background:var(--hairline);margin:2.6em 0;}

/* pull box for a key point. add class="akb-note" to a paragraph or group */
.akb-body .akb-note{
  padding:1.15rem 1.3rem;border-radius:14px;
  background:var(--wash);border:1px solid var(--hairline-soft);
  border-left:3px solid var(--crimson);font-size:1rem;
}

/* ------------------------------------------------------------------- tail */
.akb-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.6rem;}
.akb-tag{
  display:inline-flex;padding:.4rem .85rem;border-radius:999px;
  border:1px solid var(--hairline);font-size:.8rem;font-weight:500;
  color:var(--muted);text-decoration:none;transition:all .22s ease;
}
.akb-tag:hover{color:var(--crimson);border-color:rgba(220,20,60,.45);}

.akb-share{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--hairline);
  font-size:.84rem;color:var(--muted);
}
.akb-share a,.akb-share button{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:1px solid var(--hairline);background:var(--paper);color:var(--ink);
  text-decoration:none;transition:all .22s ease;
}
.akb-share a:hover,.akb-share button:hover{
  background:linear-gradient(135deg,var(--red),var(--crimson));
  border-color:transparent;color:#fff;transform:translateY(-2px);
}
.akb-share svg{width:16px;height:16px;fill:currentColor;}

.akb-author{
  display:flex;gap:1.1rem;align-items:flex-start;margin-top:2.6rem;
  padding:1.4rem;border-radius:18px;background:var(--wash);
  border:1px solid var(--hairline-soft);
}
.akb-author img{width:56px;height:56px;border-radius:50%;flex:0 0 auto;}
.akb-author h3{
  font-family:var(--display);font-size:1rem;font-weight:600;margin:0 0 .3rem;
}
.akb-author p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted);}

/* previous and next */
.akb-jump{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.6rem;
}
.akb-jump a{
  padding:1.1rem 1.2rem;border-radius:16px;border:1px solid var(--hairline);
  text-decoration:none;transition:all .25s ease;
}
.akb-jump a:hover{border-color:rgba(220,20,60,.45);transform:translateY(-3px);
  box-shadow:0 16px 30px -22px rgba(220,20,60,.7);}
.akb-jump small{
  display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;
}
.akb-jump strong{
  font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.akb-jump .akb-jump--next{text-align:right;}

/* ------------------------------------------------------------------ cards */
.akb-section-head{
  display:flex;align-items:center;gap:.9rem;margin:0 0 1.4rem;
}
.akb-section-head h2{
  font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2vw,1.4rem);margin:0;
}
.akb-section-head .akb-rule{flex:1 1 auto;height:1px;background:var(--hairline);}

.akb-grid{
  display:grid;gap:clamp(1rem,2.4vw,1.8rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
}
.akb-card{display:flex;flex-direction:column;gap:.85rem;text-decoration:none;}
.akb-card__shot{
  position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  background:var(--ink);
  box-shadow:0 18px 38px -28px rgba(16,24,32,.5),0 0 0 1px var(--hairline-soft);
  transition:transform .3s ease,box-shadow .3s ease;
}
.akb-card__shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.akb-card:hover .akb-card__shot{
  transform:translateY(-5px);
  box-shadow:0 26px 48px -24px rgba(220,20,60,.45),0 0 0 2px var(--crimson);
}
.akb-card:hover .akb-card__shot img{transform:scale(1.05);}
.akb-card__cat{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  padding:.26rem .6rem;border-radius:999px;background:rgba(16,24,32,.62);
  font-family:var(--display);font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.akb-card h3{
  font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.4;
  margin:0;transition:color .22s ease;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.akb-card:hover h3{color:var(--crimson);}
.akb-card p{
  margin:0;font-size:.9rem;line-height:1.6;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.akb-card__foot{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.72rem;color:var(--muted);
}

/* lead card on the blog index */
.akb-lead{margin-bottom:clamp(2.4rem,5vw,3.6rem);}
.akb-lead a{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);
  align-items:center;text-decoration:none;
}
.akb-lead .akb-card__shot{aspect-ratio:16/10;}
.akb-lead h2{
  font-family:var(--display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.2;margin:.7rem 0 .7rem;
}
.akb-lead:hover h2{color:var(--crimson);}
.akb-lead p{font-size:1rem;line-height:1.65;color:var(--muted);margin:0 0 1rem;}

/* ------------------------------------------------------------ index intro */
.akb-intro{
  padding:clamp(2.4rem,6vw,4rem) 0 clamp(1.6rem,3vw,2.4rem);
  border-bottom:1px solid var(--hairline);margin-bottom:clamp(2rem,4vw,3rem);
}
.akb-intro h1{
  font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;margin:0 0 .8rem;
}
.akb-intro p{
  font-size:clamp(.95rem,1.7vw,1.1rem);line-height:1.65;color:var(--muted);
  max-width:56ch;margin:0;
}

.akb-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;}
.akb-filters a{
  padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--hairline);
  font-family:var(--display);font-weight:600;font-size:.85rem;
  text-decoration:none;transition:all .24s ease;
}
.akb-filters a:hover{color:var(--crimson);border-color:rgba(220,20,60,.45);transform:translateY(-2px);}
.akb-filters a.is-on{
  background:linear-gradient(135deg,var(--red),var(--crimson));
  border-color:transparent;color:#fff;
}

/* ------------------------------------------------------------- pagination */
.akb-pager{
  display:flex;justify-content:center;gap:.4rem;margin-top:clamp(2.4rem,5vw,3.4rem);
}
.akb-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 .7rem;border-radius:999px;
  border:1px solid var(--hairline);font-size:.9rem;font-weight:600;
  text-decoration:none;transition:all .22s ease;
}
.akb-pager .page-numbers:hover{color:var(--crimson);border-color:rgba(220,20,60,.45);}
.akb-pager .page-numbers.current{
  background:linear-gradient(135deg,var(--red),var(--crimson));
  border-color:transparent;color:#fff;
}

/* --------------------------------------------------------------- no posts */
.akb-empty{
  text-align:center;padding:clamp(3rem,8vw,5rem) 1.5rem;border-radius:18px;
  background:var(--wash);border:1px dashed var(--hairline);
}
.akb-empty h2{font-family:var(--display);font-weight:600;margin:0 0 .5rem;}
.akb-empty p{margin:0;color:var(--muted);}

/* ------------------------------------------------------------ responsive */
@media (max-width:1000px){
  .akb-cols{grid-template-columns:1fr;}
  .akb-chapters{
    position:static;order:-1;padding:1.1rem 1.2rem;border-radius:16px;
    background:var(--wash);border:1px solid var(--hairline-soft);margin-bottom:1.8rem;
  }
  .akb-chapters__head{margin-bottom:.6rem;}
  .akb-lead a{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .akb-title{max-width:none;}
  .akb-timecode{margin-left:0;}
  .akb-jump{grid-template-columns:1fr;}
  .akb-jump .akb-jump--next{text-align:left;}
  .akb-body{font-size:1.02rem;}
}

@media (prefers-reduced-motion:reduce){
  .akb *{transition:none !important;animation:none !important;}
  .akb-body h2,.akb-body h3{scroll-behavior:auto;}
}

/* keyboard users must always see where they are */
.akb a:focus-visible,.akb button:focus-visible{
  outline:2px solid var(--crimson);outline-offset:3px;border-radius:6px;
}

@media print{
  .akb-scrub,.akb-chapters,.akb-share,.akb-jump,.akb-related{display:none !important;}
  .akb-body{max-width:none;font-size:11pt;}
}