/* MASPIK article + documentation templates. Depends on tokens.css. */

/* ---------- shared article chrome ---------- */
#mspk .mspk-crumbs{font-size:13px;margin-bottom:14px;letter-spacing:.02em;}
#mspk .mspk-crumbs a{color:var(--mspk-orange-dk);font-weight:700;text-decoration:none;text-transform:uppercase;font-size:12px;letter-spacing:.08em;}
#mspk .mspk-crumbs a:hover{text-decoration:underline;text-underline-offset:3px;}

#mspk .mspk-article{max-width:1180px;}
#mspk .mspk-article__head{max-width:46rem;margin:0 auto;text-align:center;padding-top:clamp(16px,2.5vw,36px);}
#mspk .mspk-article__title{
  font-family:var(--mspk-hd);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(29px,3.9vw,46px);line-height:1.1;max-width:24ch;margin:0 auto;color:var(--mspk-ink);
}
#mspk .mspk-article__meta{margin-top:15px;font-size:13.5px;color:var(--mspk-muted);display:flex;gap:9px;justify-content:center;}

/* The featured image is supporting art, not the headline. Capped so it never
   pushes the first paragraph below the fold. */
#mspk .mspk-article__hero{
  margin:30px auto 0;max-width:780px;border-radius:16px;overflow:hidden;
  box-shadow:var(--mspk-shadow);
}
#mspk .mspk-article__hero img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover;}

/* ---------- reading layout: content + travelling contents ---------- */
#mspk .mspk-article__grid{
  display:grid;grid-template-columns:minmax(0,42rem) 230px;gap:56px;
  justify-content:center;align-items:start;margin-top:44px;
}
#mspk .mspk-aside{position:sticky;top:96px;}

/* ---------- prose: styles for editor-authored content ---------- */
#mspk .mspk-prose{font-size:17.5px;line-height:1.75;color:#31302e;}
#mspk .mspk-prose > * + *{margin-top:1.2em;}
#mspk .mspk-prose > p:first-of-type{font-size:19px;line-height:1.65;color:#3b3934;}
#mspk .mspk-prose h2{
  font-family:var(--mspk-hd);font-size:clamp(23px,2.4vw,29px);line-height:1.22;
  margin-top:2.1em;color:var(--mspk-ink);scroll-margin-top:96px;
}
#mspk .mspk-prose h3{
  font-family:var(--mspk-hd);font-size:clamp(18.5px,1.9vw,21px);line-height:1.3;
  margin-top:1.75em;color:var(--mspk-ink);scroll-margin-top:96px;
}
#mspk .mspk-prose h4{font-family:var(--mspk-hd);font-size:17.5px;margin-top:1.5em;}
#mspk .mspk-prose a{color:var(--mspk-orange-dk);text-decoration:underline;text-underline-offset:2px;}
#mspk .mspk-prose a:hover{color:var(--mspk-green);}
#mspk .mspk-prose ul,#mspk .mspk-prose ol{padding-left:1.35em;}
#mspk .mspk-prose ul li{list-style:disc;margin-bottom:.45em;}
#mspk .mspk-prose ol li{list-style:decimal;margin-bottom:.45em;}
#mspk .mspk-prose li::marker{color:var(--mspk-orange);}
/* In-content images are capped too - several posts embed the same tall banner. */
#mspk .mspk-prose img{
  border-radius:12px;height:auto;max-height:420px;width:auto;max-width:100%;
  object-fit:contain;box-shadow:var(--mspk-shadow);
}
#mspk .mspk-prose figure{margin:1.7em 0;text-align:center;}
#mspk .mspk-prose figcaption{font-size:13px;color:var(--mspk-muted);text-align:center;margin-top:9px;}
#mspk .mspk-prose blockquote{
  margin:1.7em 0;padding:18px 24px;border-left:4px solid var(--mspk-orange);
  background:#fff;border-radius:0 12px 12px 0;font-size:16.5px;
}
#mspk .mspk-prose blockquote p{margin:0;}
#mspk .mspk-prose code{
  background:#F1E7DC;padding:2px 7px;border-radius:6px;font-size:.87em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
#mspk .mspk-prose pre{
  background:var(--mspk-green);color:#EAF3ED;padding:20px 22px;border-radius:14px;
  overflow-x:auto;font-size:14px;line-height:1.6;
}
#mspk .mspk-prose pre code{background:none;padding:0;color:inherit;font-size:inherit;}
#mspk .mspk-prose table{
  width:100%;border-collapse:collapse;background:#fff;border-radius:12px;
  box-shadow:var(--mspk-shadow);font-size:15px;display:block;overflow-x:auto;
}
#mspk .mspk-prose th,#mspk .mspk-prose td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--mspk-line);}
#mspk .mspk-prose th{background:var(--mspk-cream);font-family:var(--mspk-hd);}
#mspk .mspk-prose hr{border:0;border-top:1px solid var(--mspk-line);margin:2.3em 0;}

/* ---------- table of contents ---------- */
#mspk .mspk-toc{
  border-left:2px solid var(--mspk-line);padding-left:18px;
}
#mspk .mspk-toc__h{
  font-family:var(--mspk-hd);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mspk-muted);margin-bottom:12px;
}
#mspk .mspk-toc ul{display:flex;flex-direction:column;gap:9px;}
#mspk .mspk-toc a{
  font-size:13.5px;line-height:1.4;color:var(--mspk-muted);text-decoration:none;
  display:block;transition:color .15s ease;
}
#mspk .mspk-toc a:hover{color:var(--mspk-orange-dk);}
#mspk .mspk-toc__l3{padding-left:12px;}
#mspk .mspk-toc__l3 a{font-size:12.5px;}

/* Inline variant, used inside the documentation column. */
#mspk .mspk-toc--inline{
  border-left:0;padding:18px 22px;background:#fff;border:1px solid var(--mspk-line);
  border-radius:14px;margin-bottom:32px;
}
#mspk .mspk-toc--inline ul{gap:7px;}
#mspk .mspk-toc--inline a{font-size:14px;color:var(--mspk-ink);}

/* ---------- post footer CTA ---------- */
#mspk .mspk-article__foot{max-width:44rem;margin:48px auto 0;}
#mspk .mspk-cta-strip{
  background:var(--mspk-green);border-radius:22px;padding:32px;
  display:flex;align-items:center;gap:24px;justify-content:space-between;flex-wrap:wrap;
}
#mspk .mspk-cta-strip h2{font-family:var(--mspk-hd);font-size:24px;color:#fff;line-height:1.2;}
#mspk .mspk-cta-strip p{margin-top:8px;color:rgba(255,255,255,.82);font-size:15px;}

/* ---------- documentation layout ---------- */
#mspk .mspk-doc{display:grid;grid-template-columns:270px minmax(0,1fr);gap:48px;align-items:start;padding-top:clamp(20px,3vw,40px);}
#mspk .mspk-doc__side{position:sticky;top:96px;}
#mspk .mspk-doc__navh{
  font-family:var(--mspk-hd);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mspk-muted);margin-bottom:14px;
}
#mspk .mspk-doc__list{display:flex;flex-direction:column;gap:2px;}
#mspk .mspk-doc__list a{
  display:block;padding:9px 14px;border-radius:10px;font-size:14.5px;
  color:var(--mspk-ink);text-decoration:none;transition:background .15s ease,color .15s ease;
}
#mspk .mspk-doc__list a:hover{background:#fff;color:var(--mspk-orange-dk);}
#mspk .mspk-doc__list a[aria-current="page"]{background:var(--mspk-green);color:#fff;font-weight:600;}
#mspk .mspk-doc__title{font-size:clamp(28px,3.6vw,44px);line-height:1.1;margin-bottom:26px;}
#mspk .mspk-doc__main .mspk-prose{margin-left:0;}

#mspk .mspk-docnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:52px;}
#mspk .mspk-docnav__item{
  display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--mspk-line);
  border-radius:14px;padding:18px 20px;text-decoration:none;
  transition:border-color .16s ease,transform .16s ease;
}
#mspk .mspk-docnav__item:hover{border-color:var(--mspk-orange);transform:translateY(-2px);}
#mspk .mspk-docnav__item span{font-size:12.5px;color:var(--mspk-muted);letter-spacing:.04em;text-transform:uppercase;}
#mspk .mspk-docnav__item strong{font-family:var(--mspk-hd);font-size:16px;color:var(--mspk-ink);line-height:1.25;}
#mspk .mspk-docnav__item--next{text-align:right;}

#mspk .mspk-doc__help{
  margin-top:34px;background:var(--mspk-orange-soft);border-radius:16px;padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
#mspk .mspk-doc__help p{font-weight:600;font-size:15.5px;}

/* ---------- documentation index ---------- */
#mspk .mspk-doc-hero{padding-top:clamp(28px,4vw,56px);}
#mspk .mspk-doccards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
#mspk .mspk-doccard{
  display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--mspk-line);
  border-radius:var(--mspk-r);padding:26px;text-decoration:none;box-shadow:var(--mspk-shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#mspk .mspk-doccard:hover{transform:translateY(-4px);box-shadow:var(--mspk-shadow-lg);border-color:var(--mspk-orange-soft);}
#mspk .mspk-doccard h2{font-family:var(--mspk-hd);font-size:19px;line-height:1.25;color:var(--mspk-ink);}
#mspk .mspk-doccard p{font-size:14px;color:var(--mspk-muted);line-height:1.55;}
#mspk .mspk-doccard__more{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--mspk-orange-dk);}

@media (max-width:1080px){
  #mspk .mspk-doc{grid-template-columns:1fr;gap:28px;}
  #mspk .mspk-doc__side{position:static;}
  #mspk .mspk-doc__list{flex-direction:row;flex-wrap:wrap;gap:8px;}
  #mspk .mspk-doc__list a{background:#fff;border:1px solid var(--mspk-line);}
  #mspk .mspk-doccards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  #mspk .mspk-doccards{grid-template-columns:1fr;}
  #mspk .mspk-docnav{grid-template-columns:1fr;}
  #mspk .mspk-docnav__item--next{text-align:left;}
  #mspk .mspk-prose{font-size:16.5px;}
  #mspk .mspk-cta-strip{padding:24px;}
}

/* .mspk-h1 carries the hero's max-width:16ch + auto margins, which centres and
   narrows any title reusing the class. Article and doc titles opt out. */
#mspk .mspk-doc__title{max-width:none;margin-left:0;margin-right:0;text-align:left;}
#mspk .mspk-article__title{max-width:22ch;}
#mspk .mspk-doc-hero .mspk-h1{max-width:20ch;}

/* ---------- blog index ---------- */
#mspk .mspk-blog-hero{padding-top:clamp(28px,4vw,56px);}
#mspk .mspk-blog-hero .mspk-h1{max-width:18ch;}

#mspk .mspk-lead{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:#fff;
  border:1px solid var(--mspk-line);border-radius:24px;overflow:hidden;
  text-decoration:none;box-shadow:var(--mspk-shadow);
  transition:transform .2s ease,box-shadow .2s ease;
}
#mspk .mspk-lead:hover{transform:translateY(-4px);box-shadow:var(--mspk-shadow-lg);}
#mspk .mspk-lead__img{display:block;background:var(--mspk-cream);}
#mspk .mspk-lead__img img{display:block;width:100%;height:100%;object-fit:cover;min-height:280px;}
#mspk .mspk-lead__body{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;gap:12px;justify-content:center;}
#mspk .mspk-lead__body h2{font-family:var(--mspk-hd);font-size:clamp(22px,2.5vw,31px);line-height:1.18;color:var(--mspk-ink);}
#mspk .mspk-lead__ex{font-size:15px;line-height:1.6;color:var(--mspk-muted);}
#mspk .mspk-tag--lead{
  align-self:flex-start;background:var(--mspk-orange);color:#fff;font-style:normal;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:6px;
}

#mspk .mspk-post__ex{font-size:14px;color:var(--mspk-muted);line-height:1.55;}
#mspk .mspk-post__date{display:flex;gap:7px;}

#mspk .mspk-pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:44px;}
#mspk .mspk-pager .page-numbers{
  display:inline-block;min-width:42px;text-align:center;padding:10px 14px;border-radius:11px;
  background:#fff;border:1px solid var(--mspk-line);color:var(--mspk-ink);
  font-size:14.5px;font-weight:600;text-decoration:none;transition:border-color .16s ease,background .16s ease;
}
#mspk .mspk-pager .page-numbers:hover{border-color:var(--mspk-orange);}
#mspk .mspk-pager .page-numbers.current{background:var(--mspk-green);border-color:var(--mspk-green);color:#fff;}
#mspk .mspk-pager .dots{background:none;border:0;}

/* ---------- documentation: more air, calmer sidebar ---------- */
#mspk .mspk-doc{grid-template-columns:262px minmax(0,44rem);gap:60px;justify-content:center;}
#mspk .mspk-doc__side{padding-top:4px;}
#mspk .mspk-doc__list a{padding:8px 13px;font-size:14px;line-height:1.35;}
#mspk .mspk-doc__title{margin-bottom:22px;font-family:var(--mspk-hd);letter-spacing:-.015em;}
#mspk .mspk-doc__main .mspk-prose > p:first-of-type{font-size:18px;}

@media (max-width:1180px){
  #mspk .mspk-article__grid{grid-template-columns:minmax(0,42rem);gap:0;}
  /* Contents move back above the article, but compact and collapsible. */
  #mspk .mspk-aside{position:static;order:-1;margin-bottom:30px;}
  #mspk .mspk-toc{
    border-left:0;padding:16px 20px;background:#fff;
    border:1px solid var(--mspk-line);border-radius:14px;
  }
  #mspk .mspk-toc a{font-size:14px;color:var(--mspk-ink);}
}
@media (max-width:1080px){
  #mspk .mspk-lead{grid-template-columns:1fr;}
  #mspk .mspk-lead__img img{min-height:0;max-height:280px;}
}
@media (max-width:620px){
  #mspk .mspk-article__hero img{max-height:220px;}
  #mspk .mspk-prose img{max-height:300px;}
  #mspk .mspk-prose{font-size:16.5px;}
  #mspk .mspk-prose > p:first-of-type{font-size:17.5px;}
}

/* ---------- plain content page ---------- */
#mspk .mspk-page{max-width:820px;padding-top:clamp(20px,3vw,44px);}
#mspk .mspk-page__head{margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--mspk-line);}
#mspk .mspk-page__title{
  font-family:var(--mspk-hd);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(29px,3.8vw,44px);line-height:1.1;color:var(--mspk-ink);
}
#mspk .mspk-page .mspk-prose{margin:0;}

/* ---------- 404 ---------- */
#mspk .mspk-404{padding-top:clamp(40px,7vw,90px);padding-bottom:clamp(30px,5vw,60px);}
#mspk .mspk-404 .mspk-h1{max-width:16ch;margin-left:auto;margin-right:auto;
  font-family:var(--mspk-hd);font-weight:700;line-height:1.05;font-size:clamp(34px,5.5vw,64px);}
#mspk .mspk-404__links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px;}
#mspk .mspk-404__links a{
  background:#fff;border:1px solid var(--mspk-line);border-radius:999px;
  padding:9px 18px;font-size:14px;font-weight:600;color:var(--mspk-ink);
}
#mspk .mspk-404__links a:hover{border-color:var(--mspk-orange);color:var(--mspk-orange-dk);}
#mspk .mspk-404__search{display:flex;gap:9px;justify-content:center;margin-top:26px;flex-wrap:wrap;}
#mspk .mspk-404__search input{
  min-width:min(320px,80vw);border:1px solid var(--mspk-line);border-radius:11px;
  padding:12px 14px;font:inherit;font-size:15px;background:#fff;
}
#mspk .mspk-404__search input:focus{outline:0;border-color:var(--mspk-orange);box-shadow:0 0 0 3px rgba(244,135,34,.18);}
#mspk .mspk-404__search .mspk-btn{border:0;cursor:pointer;font-family:var(--mspk-bd);}