/* Blog surface, aligned to the landing page (2026-09-11).
 *
 * The blog shipped with the pre-relaunch visual language: the retired cyan on
 * borders, glows, the category header and the CTA, the retired dark navy on the
 * button, and translateY hovers with coloured shadows. None of that exists on
 * the landing. DESIGN_SYSTEM.md section 2 retired both colours everywhere, and
 * section 4 fixes the motion: "Hover is a subtle scale only (blog 1.015,
 * go-rocket card 1.006)".
 *
 * Every value below is taken from wsk/static/wsk/css/landing.css rather than
 * invented, so the two surfaces stay one design:
 *   ease            cubic-bezier(.16,1,.3,1)                   (--ease)
 *   borders         rgba(255,255,255,.1) resting, .4 on hover  (.yt-card)
 *   card shadow     0 40px 80px -40px rgba(2,12,24,.9)         (.card)
 *   striation       the soft-light repeating gradient          (.card::before)
 *   scrim           the dark linear wash over a texture        (.gr-card::after)
 *   field           linear-gradient(180deg,#0b2f55,#1a4e74)    (.ring-field)
 *   radii           20 card, 18 gr-card, 14 thumb, 12, 10 button
 *   headings        weight 400, letter-spacing -.03 to -.035em
 *   eyebrows/meta   Geist Mono
 *   hover           scale(1.015) thumbs, scale(1.006) big card, opacity .78 links
 *
 * Tokens (--navy, --cream, --accent = cream, --font-*) come from site.css.
 * This file replaces the three inline <style> blocks that used to live in
 * blog_index.html, category_detail.html and post_detail.html.
 */

.wsk-blog {
  --blog-ease: cubic-bezier(.16, 1, .3, 1);
  --blog-line: rgba(255, 255, 255, .1);
  --blog-line-hover: rgba(255, 255, 255, .4);
  --blog-card: rgba(255, 255, 255, .035);
  --blog-shadow: 0 40px 80px -40px rgba(2, 12, 24, .9);
  --blog-measure: 760px;
  --blog-orange: #FF4D00;
}

/* The brand orange is selection and focus only (DESIGN_SYSTEM.md section 2). */
.wsk-blog ::selection { background: var(--blog-orange); color: #fff; }
.wsk-blog :focus-visible { outline: 1px solid var(--blog-orange); outline-offset: 3px; }

/* ── article header ───────────────────────────────────────────────────── */

.article-header { padding: var(--space-4xl) 0 var(--space-xl); max-width: var(--blog-measure); margin: 0 auto; }
.article-breadcrumb {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em;
  color: rgba(255, 255, 255, .5); margin-bottom: var(--space-lg);
}
.article-breadcrumb a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: opacity .25s; }
.article-breadcrumb a:hover { opacity: .78; }

.article-tag, .post-tag {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255, 255, 255, .6);
  display: inline-flex; align-items: center; gap: 8px;
}
.article-tag { margin-bottom: var(--space-sm); }
.post-tag__icon { width: 14px; height: 14px; flex: 0 0 auto; opacity: .7; }

.article-header h1 {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(34px, 5vw, 56px); line-height: 1.04; letter-spacing: -.035em;
  margin-bottom: var(--space-md); text-wrap: balance; color: #fff;
}
.article-meta {
  font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, .55);
  display: flex; gap: var(--space-lg); margin-bottom: var(--space-xl);
}

/* ── images ───────────────────────────────────────────────────────────── */

.article-hero {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 20px; border: 1px solid var(--blog-line);
  box-shadow: var(--blog-shadow); margin-bottom: var(--space-xl);
}
.article-section-image, .article-inline-image {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--blog-line);
  margin: var(--space-xl) 0;
}
.article-inline-image { max-width: var(--blog-measure); margin-left: auto; margin-right: auto; }

/* ── lede and body ────────────────────────────────────────────────────── */

.article-lede {
  max-width: var(--blog-measure); margin: 0 auto var(--space-2xl);
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; letter-spacing: -.015em;
  color: rgba(255, 255, 255, .88); text-wrap: pretty;
}

.article-body {
  max-width: var(--blog-measure); margin: 0 auto var(--space-3xl);
  font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, .78);
}
.article-body h2 {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(25px, 2.6vw, 33px); line-height: 1.12; letter-spacing: -.03em;
  color: #fff; margin: var(--space-2xl) 0 var(--space-md); text-wrap: balance;
}
.article-body h3 {
  font-family: var(--font-sans); font-weight: 500; font-size: 20px;
  letter-spacing: -.015em; color: #fff; margin: var(--space-xl) 0 var(--space-sm);
}
.article-body p { margin-bottom: var(--space-md); text-wrap: pretty; }
.article-body ul, .article-body ol { margin-bottom: var(--space-md); padding-left: var(--space-lg); }
.article-body li { margin-bottom: var(--space-xs); }
.article-body li::marker { color: rgba(255, 255, 255, .4); }
.article-body a {
  color: #fff; text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px;
  transition: text-decoration-color .25s;
}
.article-body a:hover { text-decoration-color: rgba(255, 255, 255, .8); }
.article-body em { font-style: italic; font-weight: 400; }
.article-body blockquote {
  border-left: 1px solid rgba(255, 255, 255, .25); padding-left: var(--space-md);
  margin: var(--space-xl) 0; color: rgba(255, 255, 255, .7); font-style: italic;
}
.article-body img { max-width: 100%; border-radius: 14px; margin: var(--space-xl) 0; }

/* ── video and manual sections ────────────────────────────────────────── */

.article-video, .manual-section { max-width: var(--blog-measure); margin: 0 auto var(--space-xl); }
.article-video-frame {
  position: relative; width: 100%; padding-bottom: 56.25%;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--blog-line); background: var(--blog-card);
}
.article-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-video-link {
  display: block; padding: var(--space-lg); border-radius: 14px;
  border: 1px solid var(--blog-line); background: var(--blog-card);
  color: #fff; text-decoration: none; font-weight: 500;
  transition: border-color .3s;
}
.article-video-link:hover { border-color: var(--blog-line-hover); }
.manual-section {
  padding: var(--space-lg); border: 1px solid var(--blog-line);
  border-radius: 14px; background: var(--blog-card);
}
.manual-section h2 {
  font-family: var(--font-sans); font-weight: 400; font-size: 24px;
  letter-spacing: -.025em; margin-bottom: var(--space-sm); color: #fff;
}
.manual-section-body { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .78); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.blog-faq {
  max-width: var(--blog-measure); margin: 0 auto var(--space-xs);
  border: 1px solid var(--blog-line); border-radius: 12px;
  padding: var(--space-sm) var(--space-md); background: var(--blog-card);
  transition: border-color .3s;
}
.blog-faq:hover { border-color: var(--blog-line-hover); }
.blog-faq summary {
  cursor: pointer; font-family: var(--font-sans); font-weight: 500; font-size: 18px;
  letter-spacing: -.015em; color: #fff; list-style: none;
  padding: var(--space-xs) 0; position: relative; padding-right: 28px;
}
.blog-faq summary::-webkit-details-marker { display: none; }
.blog-faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 300; color: rgba(255, 255, 255, .6);
}
.blog-faq[open] summary::after { content: '-'; }
.blog-faq[open] summary { margin-bottom: var(--space-sm); }
.blog-faq p { margin-bottom: var(--space-sm); color: rgba(255, 255, 255, .78); line-height: 1.7; }

/* ── CTA, built like the landing's go-rocket card ─────────────────────── */

.blog-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-lg); margin: var(--space-2xl) 0;
  padding: clamp(24px, 3vw, 34px); border-radius: 18px;
  border: 1px solid var(--blog-line);
  background-color: #1a4e74;
  background-image: linear-gradient(180deg, #0b2f55, #1a4e74);
  box-shadow: var(--blog-shadow);
  transition: transform .45s var(--blog-ease);
}
.blog-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: soft-light; opacity: .8;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .5) 0 3px, rgba(0, 0, 0, .35) 3px 6px,
    rgba(255, 255, 255, .2) 6px 9px, rgba(0, 0, 0, 0) 9px 19px,
    rgba(255, 255, 255, .3) 19px 22px, rgba(0, 0, 0, .28) 22px 25px,
    rgba(0, 0, 0, 0) 25px 34px);
}
.blog-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(4, 14, 26, .8), rgba(4, 14, 26, .46) 55%, rgba(4, 14, 26, .24));
}
.blog-cta:hover { transform: scale(1.006); }
.blog-cta__icon, .blog-cta__text, .blog-cta__btn { position: relative; z-index: 1; }
.blog-cta__text { flex: 1 1 320px; }
.blog-cta__eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.blog-cta__heading {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(21px, 2.6vw, 29px); line-height: 1.1; letter-spacing: -.03em;
  color: #fff; margin: 10px 0 8px; text-wrap: balance;
}
.blog-cta__body { margin: 0; color: rgba(255, 255, 255, .8); line-height: 1.55; text-wrap: pretty; }
.blog-cta__icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--blog-line);
  color: #fff;
}
.blog-cta__icon-svg { width: 28px; height: 28px; }
.blog-cta__btn-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.blog-cta__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 28px; border-radius: 10px;
  background: #fff; color: var(--navy); font-weight: 500; font-size: 16px;
  text-decoration: none; white-space: nowrap;
  transition: opacity .25s;
}
.blog-cta__btn:hover { opacity: .88; }

/* ── related posts ────────────────────────────────────────────────────── */

.related-section {
  max-width: var(--blog-measure); margin: 0 auto var(--space-4xl);
  border-top: 1px solid var(--blog-line); padding-top: var(--space-2xl);
}
.related-section h2 {
  font-family: var(--font-sans); font-weight: 400; font-size: 26px;
  letter-spacing: -.03em; margin-bottom: var(--space-xl); color: #fff;
}
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-lg);
}
.related-card {
  background: var(--blog-card); border: 1px solid var(--blog-line);
  border-radius: 14px; padding: var(--space-lg);
  text-decoration: none; color: inherit;
  transition: border-color .3s, transform .45s var(--blog-ease);
}
.related-card:hover { border-color: var(--blog-line-hover); transform: scale(1.015); }
.related-card h3 {
  font-family: var(--font-sans); font-weight: 500; font-size: 17px; line-height: 1.3;
  letter-spacing: -.015em; margin-bottom: var(--space-xs); color: #fff;
}
.related-card p { font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, .5); }

/* ── index and category shells ────────────────────────────────────────── */

.blog-shell, .pillar-shell { padding: var(--space-4xl) 0; }

.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--space-lg); margin-bottom: var(--space-xl); padding: 0 4px;
}
.section-head h1 { flex: none; }
.section-head .post-excerpt { max-width: 46ch; text-align: right; }
.section-head h1, .section-head h2 {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.035em;
  margin: 0; color: #fff; text-wrap: balance;
}

.pillar-header {
  position: relative; isolation: isolate; overflow: hidden;
  margin-bottom: var(--space-2xl); padding: clamp(28px, 3.5vw, 44px);
  border-radius: 20px; border: 1px solid var(--blog-line);
  background-color: #1a4e74;
  background-image: linear-gradient(180deg, #0b2f55, #1a4e74);
  box-shadow: var(--blog-shadow);
}
.pillar-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: soft-light; opacity: .8;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .5) 0 3px, rgba(0, 0, 0, .35) 3px 6px,
    rgba(255, 255, 255, .2) 6px 9px, rgba(0, 0, 0, 0) 9px 19px,
    rgba(255, 255, 255, .3) 19px 22px, rgba(0, 0, 0, .28) 22px 25px,
    rgba(0, 0, 0, 0) 25px 34px);
}
.pillar-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 14, 26, .62), rgba(4, 14, 26, .3) 45%, rgba(4, 14, 26, .7));
}
.pillar-header > * { position: relative; z-index: 1; }
.pillar-breadcrumb {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-md);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em;
  color: rgba(255, 255, 255, .55);
}
.pillar-breadcrumb a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: opacity .25s; }
.pillar-breadcrumb a:hover { opacity: .78; }
.pillar-header h1 {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.03; letter-spacing: -.035em;
  margin-bottom: var(--space-sm); color: #fff; text-wrap: balance;
}
.pillar-header p {
  max-width: 62ch; color: rgba(255, 255, 255, .8); line-height: 1.55;
  font-size: clamp(16px, 1.5vw, 19px); margin: 0; text-wrap: pretty;
}

/* ── post cards, both grids ───────────────────────────────────────────── */

.post-feed, .post-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl); margin-bottom: var(--space-3xl);
}
.post-card {
  display: flex; flex-direction: column; min-height: 100%;
  border-radius: 18px; overflow: hidden;
  text-decoration: none; color: inherit;
  border: 1px solid var(--blog-line); background: var(--blog-card);
  transition: border-color .3s, transform .45s var(--blog-ease);
}
.post-card:hover { border-color: var(--blog-line-hover); transform: scale(1.015); }
.post-card-media, .post-card-img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-bottom: 1px solid var(--blog-line);
  background: rgba(255, 255, 255, .04);
}
.post-body, .post-card-body {
  display: flex; flex-direction: column; flex-grow: 1;
  gap: var(--space-md); padding: 26px;
}
.post-card h3 {
  font-family: var(--font-sans); font-weight: 400; font-size: clamp(21px, 2vw, 26px);
  line-height: 1.16; letter-spacing: -.03em; margin: 0; color: #fff; text-wrap: pretty;
}
.post-excerpt { margin: 0; color: rgba(255, 255, 255, .72); line-height: 1.62; }
.post-meta {
  margin-top: auto; display: flex; justify-content: space-between; gap: var(--space-sm);
  font-family: var(--font-mono); font-size: 11.5px; color: rgba(255, 255, 255, .45);
}

/* ── pagination and empty state ───────────────────────────────────────── */

.pagination-bar {
  text-align: center; margin-bottom: var(--space-4xl);
  display: flex; justify-content: center; gap: var(--space-sm);
}
.pagination-bar a, .pagination-bar span {
  display: inline-block; padding: 11px 18px; border-radius: 10px;
  font-family: var(--font-mono); font-size: 13px; text-decoration: none;
  border: 1px solid var(--blog-line); color: rgba(255, 255, 255, .72);
  transition: border-color .3s, opacity .25s;
}
.pagination-bar a:hover { border-color: var(--blog-line-hover); opacity: 1; }
.pagination-bar .current {
  background: #fff; color: var(--navy); border-color: #fff; font-weight: 500;
}
.empty-state {
  padding: var(--space-3xl) 0; text-align: center;
  color: rgba(255, 255, 255, .5); font-size: 16px;
}

/* ── narrow viewports ─────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .post-feed, .post-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .article-header { padding-top: var(--space-2xl); }
  .blog-shell, .pillar-shell { padding: var(--space-2xl) 0 var(--space-3xl); }
}
@media (max-width: 720px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .section-head .post-excerpt { text-align: left; }
}

/* The landing pauses every animation here; the blog does the same. */
@media (prefers-reduced-motion: reduce) {
  .wsk-blog *, .wsk-blog *::before, .wsk-blog *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}