/* ==============================================================
   Blog post page (body.post-page): hero, reading column and every
   post body element. Chosen in the post / elements labs (Oct 2026).
   Blocks: .bph hero · .bpa ambient backdrop · .bpl reading layout ·
   .bpu up next. Body markup comes from loadblogpost.js; rules target
   elements (not sections) so nested pieces (badges in unit blocks,
   lists in split rows…) style the same everywhere.
   Usage of each feature: posts/styleguide.html
   ============================================================== */

.post-page { background: #070d0c; --race: var(--vs-theme-color2); }
.post-page .vs-page__main { position: relative; overflow-x: clip; }

/* shared pieces (same as campaign.css / about.css) */
.post-page .cl-section { padding: clamp(56px, 7vw, 96px) 0; }
.post-page .cl-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 10px; font-family: var(--title-font); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vs-theme-color2); }
.post-page .cl-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.post-page .cl-h2 { margin: 0 0 14px; font-family: var(--title-font); font-size: clamp(1.8rem, 1rem + 2.2vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--title-color); }
.post-page .cl-link { font-family: var(--title-font); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vs-theme-color2); }
.post-page .cl-link i { margin-left: 6px; transition: transform .2s; }
.post-page .cl-link:hover i { transform: translateX(4px); }

/* =================================================================
   AMBIENT BACKDROP + HERO
   ================================================================= */
/* The post background (frontmatter `blog-bg`, else `blog-image`; set as
   --post-bg by loadblogpost.js) glows behind the hero and the first
   ~1400px of the body, then fades to the flat page colour. */
.bpa { position: absolute; top: 0; left: 0; right: 0; height: 2200px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 35%, transparent 100%); }
.bpa::before { content: ""; position: absolute; inset: -60px; background: var(--post-bg) center 20% / cover; filter: blur(30px) saturate(1.2); opacity: .32; }
.bpl, .bpu { position: relative; }

/* "Melt" blend: lightly blurred art that fades out through a soft mask */
.bph { --bg-blur: 6px; --bg-op: .6; --bg-sat: 1.1; --bg-scale: 1.05; --bg-pos: center 30%; position: relative; overflow: hidden; padding: 150px 0 0; isolation: isolate; }
.bph__bg { position: absolute; inset: 0; z-index: -2; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 18%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 80% 90% at 50% 18%, #000 35%, transparent 100%); }
.bph__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--bg-pos); filter: blur(var(--bg-blur)) saturate(var(--bg-sat)); transform: scale(var(--bg-scale)); opacity: var(--bg-op); }
.bph__bg img:not([src]), .bph__bg img[src=""] { display: none; }
.bph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 10, 9, 0.55), transparent 25%); }
.bph__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bph__crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 18px; font-family: var(--title-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-color4); }
.bph__crumbs a { color: var(--text-color1); }
.bph__crumbs a:hover { color: var(--vs-theme-color2); }
.bph__crumbs span:last-child { color: var(--vs-theme-color2); }
.bph__eyebrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: 0 0 16px; font-family: var(--title-font); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-color2); }
.bph__tag { padding: 6px 11px; color: var(--vs-theme-color2); border: 1px solid rgba(84, 184, 147, 0.5); background: rgba(5, 10, 9, 0.6); }
.bph__read::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 2px 0; border-radius: 50%; background: var(--text-color3); vertical-align: middle; }
.bph__read:empty { display: none; }
.bph__title { max-width: 1100px; margin: 0 0 16px; font-family: var(--title-font); font-size: clamp(2.2rem, 1rem + 3.6vw, 4.6rem); font-weight: 800; line-height: .98; letter-spacing: -0.035em; text-transform: uppercase; color: var(--title-color); }
.bph__desc { max-width: 680px; margin: 0 auto 22px; font-size: 1.04rem; line-height: 1.65; color: var(--text-color1); }
.bph__desc:empty { display: none; }
/* byline keeps .post-body-meta so loadblogpost.js can append the localization credit */
.post-page .bph__byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin: 0; padding: 0; border: 0; }
.post-page .bph__byline .post-card__author { gap: 12px; padding: 0; background: none; border: 0; border-radius: 0; }
.post-page .bph__byline .post-card__author-avatar { width: 42px; height: 42px; box-shadow: 0 0 0 2px rgba(84, 184, 147, 0.45); }
.bph__by { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.post-page .bph__byline .post-card__author-name { font-size: 0.92rem; }
.post-page .bph__byline .post-body-meta__title { padding: 0; border: 0; font-size: 0.76rem; color: var(--text-color4); }
.post-page .bph__byline .post-hero__localization { font-size: 0.78rem; }
.bph__art { position: relative; width: min(1100px, 100%); margin: 44px 0 0; overflow: hidden; background: #0a1311; border: 1px solid rgba(84, 184, 147, 0.4); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6); }
.bph__art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* =================================================================
   READING LAYOUT
   ================================================================= */
.bpl { padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 40px); }
.bpl__grid { max-width: 940px; }
.bpl__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(246, 245, 245, 0.08); }
.bpl__tags > span:first-child { margin-right: 6px; font-family: var(--title-font); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-color4); }
.bpl__tags > span:not(:first-child) { font-size: 0; }
.bpl__tags .tag-cloud-link { display: inline-block; margin: 0; padding: 5px 10px; font-family: var(--title-font); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--title-color); background: rgba(84, 184, 147, 0.08); border: 1px solid rgba(84, 184, 147, 0.35); border-radius: 0; }
.bpl__tags .tag-cloud-link:hover { color: #050a09; background: var(--vs-theme-color2); }

/* =================================================================
   POST BODY: text, dividers, headers
   ================================================================= */
.post-page .blog-content { padding: 0; margin: 0; background: none; border: 0; overflow: visible; }
.post-page .blog-content > p:nth-child(2n) { padding: 0; background: none; }
/* the markdown # title repeats the hero title */
.post-page .blog-content > h1:first-child,
.post-page .blog-content > h1:first-child + hr { display: none; }
.post-page .blog-content p { font-size: 1rem; line-height: 1.75; color: var(--text-color2); }
.post-page .blog-content strong { color: var(--title-color); }
.post-page .blog-content a:not([class]) { color: var(--vs-theme-color2); text-decoration: underline; text-decoration-color: rgba(84, 184, 147, 0.4); text-underline-offset: 3px; }

/* *** → green line with a centred diamond */
.post-page .blog-content hr { position: relative; height: 0; margin: 38px 0; overflow: visible; background: none; border: 0; border-top: 1px solid var(--vs-theme-color2); opacity: 1; }
.post-page .blog-content hr::after { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; background: var(--vs-theme-color2); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 5px #070d0c; }
/* *** directly around a header is redundant: headers carry their own line */
.post-page .blog-content > hr:has(+ h3),
.post-page .blog-content > h3 + hr,
.post-page .blog-content > hr:has(+ .stylized-header),
.post-page .blog-content > .stylized-header + hr { display: none; }

/* ### → section header with underline accent */
.post-page .blog-content > h3,
.post-page .project-row__content h3 { position: relative; padding-bottom: 14px; font-family: var(--title-font); font-weight: 800; letter-spacing: -0.01em; color: var(--title-color); border-bottom: 1px solid rgba(246, 245, 245, 0.12); }
.post-page .blog-content > h3 { margin: 56px 0 18px; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); scroll-margin-top: 110px; }
.post-page .project-row__content h3 { padding-bottom: 12px; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }
.post-page .blog-content > h3::after,
.post-page .project-row__content h3::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 96px; height: 2px; background: var(--vs-theme-color2); }
.post-page .project-row__content h3::after { width: 72px; }

/* ## → race band. Terran/Zerg/Protoss get the insignia, race colour and
   the "Balance changes" eyebrow; any other ## gets a plain green band. */
.post-page .stylized-header { position: relative; display: flex; align-items: center; gap: 18px; min-height: 104px; margin: 72px 0 28px; padding: 0 28px; text-align: left; background: linear-gradient(90deg, color-mix(in srgb, var(--race) 26%, transparent), color-mix(in srgb, var(--race) 6%, transparent) 55%, transparent); border-top: 1px solid color-mix(in srgb, var(--race) 55%, transparent); border-bottom: 1px solid rgba(246, 245, 245, 0.08); scroll-margin-top: 110px; }
.post-page .stylized-header--terran { --race: #e0533d; }
.post-page .stylized-header--zerg { --race: #b06cff; }
.post-page .stylized-header--protoss { --race: #f0c75a; }
.post-page .stylized-header__line { display: none; }
.post-page .stylized-header__insignia { position: static; flex: none; width: auto; height: 92px; margin: -14px 0; transform: none; opacity: 1; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.7)); }
.post-page .stylized-header h4 { margin: 0; padding: 22px 0; font-family: var(--title-font); font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: var(--title-color); text-shadow: none; }
.post-page .stylized-header[class*="--"] h4::before { content: var(--race-eyebrow, "Balance changes"); display: block; margin-bottom: 6px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em; color: var(--race); }

/* lists → diamonds (green, nested grey); also inside unit blocks and split rows */
.post-page .blog-content ul { list-style: none; }
.post-page .blog-content ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; font-size: 0; background: var(--vs-theme-color2); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.post-page .blog-content ul ul li::before { width: 6px; height: 6px; background: var(--text-color3); }

/* > quote → pull quote; an italic line right after becomes the <cite> */
.post-page .blog-content blockquote { margin: 40px auto; padding: 30px 8%; text-align: center; background: none; border: 0; border-top: 1px solid var(--vs-theme-color2); border-bottom: 1px solid var(--vs-theme-color2); border-radius: 0; }
.post-page .blog-content blockquote p { font-family: var(--title-font); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 700; line-height: 1.4; color: var(--title-color); }
.post-page .blog-content blockquote p:last-of-type { margin-bottom: 0; }
.post-page .blog-content blockquote cite { display: block; margin-top: 14px; font-size: 0.72rem; font-weight: 700; font-style: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vs-theme-color2); }

/* badges → solid notched tags (class names use an en dash: badge–core) */
.post-page .blog-content .badge { padding: 3px 9px 3px 7px; font-family: var(--title-font); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; vertical-align: 2px; color: #050a09; background: var(--badge-c, var(--vs-theme-color2)); border: 0; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.post-page .blog-content .badge[class*="inline"] { --badge-c: var(--badge-bg, #f0c75a); }
.post-page .blog-content .badge[class*="new"] { --badge-c: #8affd4; }
.post-page .blog-content .badge[class*="reverted"] { --badge-c: #7c8784; }

/* square corners on all media and panels */
.post-page .blog-content :is(img, video, .video-player, .video-player__media, .video-clip, .video-clip__media, .img-compare, .map-gallery, .map-gallery__img, .featured-rework-card, .donation-btn, .unit-module, .unitshowcase-player, .video-player-selector__btn, .img-compare-selector__btn, .map-gallery__tab) { border-radius: 0; }
.post-page .blog-content .media-caption { margin-top: 10px; font-size: 0.86rem; color: var(--text-color4); }

/* =================================================================
   SPLIT ROWS — "edge melt": the image dissolves into whatever is behind
   it (page colour, ambient glow) toward the text and softly at top and
   bottom. A mask, not a colour overlay, so the blend always matches.
   The text column overlaps the faded edge. Stacked on mobile, the image
   fades at the bottom and nothing overlaps.
   ================================================================= */
.post-page .project-row { gap: 0; }
.post-page .project-row__img { flex: 0 0 58%; border-radius: 0; overflow: visible; }
.post-page .project-row__img img { border: 0; }
.post-page .project-row__img--cinematic::after { content: none; }
.post-page .project-row__content { position: relative; z-index: 1; margin-left: -8%; }
.post-page .project-row--reverse .project-row__content { margin-left: 0; margin-right: -8%; }
.post-page .project-row__img--cinematic img { -webkit-mask-image: linear-gradient(to right, #000 55%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 55%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }
.post-page .project-row--reverse .project-row__img--cinematic img { -webkit-mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
@media (max-width: 991px) {
  .post-page .project-row { gap: 0; }
  .post-page .project-row__img { flex: 0 0 auto; }
  .post-page .project-row__content,
  .post-page .project-row--reverse .project-row__content { margin: -24px 0 0; }
  .post-page .project-row__img--cinematic img,
  .post-page .project-row--reverse .project-row__img--cinematic img { -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent); mask-image: linear-gradient(to bottom, #000 65%, transparent); }
}

/* =================================================================
   SPEED NOTE ({{speed-note}}) — inline strip: stopwatch icon and the
   label above the note, on a softly glowing band between hairlines (same on phones)
   ================================================================= */
.post-page .speed-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 32px 0; padding: 14px 18px; background: radial-gradient(ellipse 45% 140% at 12% 0%, rgba(84, 184, 147, 0.14), transparent 70%), radial-gradient(ellipse 40% 140% at 55% 100%, rgba(254, 198, 36, 0.05), transparent 70%), radial-gradient(ellipse 35% 140% at 90% 0%, rgba(84, 184, 147, 0.1), transparent 70%), rgba(8, 17, 15, 0.6); border-top: 1px solid rgba(246, 245, 245, 0.1); border-bottom: 1px solid rgba(246, 245, 245, 0.1); }
.post-page .speed-note__icon { color: var(--vs-theme-color2); }
.post-page .speed-note__icon svg { display: block; width: 20px; height: 20px; }
.post-page .speed-note__body { display: block; }
.post-page .speed-note__title { display: block; margin-bottom: 4px; font-family: var(--title-font); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vs-theme-color2); }
.post-page .speed-note p { margin: 0; font-size: 0.86rem; line-height: 1.6; }
.post-page .speed-note p b { color: var(--title-color); }
.post-page .speed-note__legend { display: none; }

/* =================================================================
   UNIT CHANGE BLOCKS
   ================================================================= */
/* The icon overhangs the box by 40px; padding-top reserves that space so
   the wrapper's margin is measured from the icon, not the box. */
.post-page .unit-module-wrapper { left: 0; margin: 30px 0 22px; padding: 40px 0 0 30px; }
.post-page .unit-icon-wrapper { top: 0; left: -10px; }
.post-page .unit-module { width: 100%; padding: 0; background: rgba(8, 17, 15, 0.92); border: 1px solid rgba(84, 184, 147, 0.3); }
.post-page .unit-title-bar { height: 46px; padding-left: 64px; background: linear-gradient(90deg, rgba(84, 184, 147, 0.14), rgba(84, 184, 147, 0.02)); border-bottom: 1px solid rgba(246, 245, 245, 0.08); }
.post-page .unit-title { margin: 0; font-family: var(--title-font); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--title-color); }
.post-page .unit-changes { padding: 58px 20px 10px 1rem; font-size: 0.93rem; }
.post-page .unit-changes ul li::before { top: 9px; width: 6px; height: 6px; }

/* =================================================================
   DONATIONS → glow panel. Its kicker replaces the
   "### Thank You For Your Support!" header written before the tag.
   ================================================================= */
.post-page .blog-content > h3:has(+ hr + p + .donations-intro),
.post-page .blog-content > h3:has(+ hr + p + .donations-intro) + hr { display: none; }
.post-page .donations-intro { margin: 40px 0; padding: 34px 32px 30px; text-align: center; background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(249, 104, 84, 0.18), transparent 70%), rgba(8, 17, 15, 0.85); border: 1px solid rgba(249, 104, 84, 0.3); }
.post-page .donations-intro::before { content: var(--donations-kicker, "Thank you for your support"); display: block; margin-bottom: 12px; font-family: var(--title-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #f96854; }
.post-page .donations-intro > p { max-width: 640px; margin: 0 auto 22px; }
.post-page .donation-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.post-page .donation-btn { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0 20px; height: 56px; color: #fff; font-family: var(--title-font); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.post-page .donation-btn__icon { width: 24px; height: 24px; }
.post-page .donation-btn.patreon { background: linear-gradient(120deg, #f96854, #c8473a); border: 0; }
.post-page .donation-btn.patreon:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(249, 104, 84, 0.3); }
.post-page .donation-btn.paypal { background: rgba(8, 17, 15, 0.9); border: 1px solid rgba(246, 245, 245, 0.18); }
.post-page .donation-btn.paypal:hover { color: #fff; border-color: rgba(246, 245, 245, 0.45); }

/* =================================================================
   ZOOMABLE IMAGES: image galleries + map gallery share one look and
   one viewer (Magnific Popup, bound in loadblogpost.js)
   ================================================================= */
.post-page .blog-content .row:has(.image-clickable) { --bs-gutter-x: 16px; }
.post-page .blog-content .row:has(.image-clickable) > [class*="col-"] { margin-bottom: 16px; }
.post-page .blog-content figure:has(.image-clickable) { position: relative; margin: 0; padding: 6px; background: rgba(8, 17, 15, 0.9); border: 1px solid rgba(246, 245, 245, 0.12); transition: border-color .2s; cursor: zoom-in; }
.post-page .blog-content figure:has(.image-clickable):hover { border-color: rgba(84, 184, 147, 0.6); }
.post-page .blog-content .image-clickable { display: block; width: 100%; height: auto; border: 0; }
.post-page .map-gallery__zoom-link { position: relative; display: block; cursor: zoom-in; }
/* expand icon, shown on hover */
.post-page .blog-content figure:has(.image-clickable)::after,
.post-page .map-gallery__zoom-link::after { content: "\2922"; position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; font-size: 0.9rem; color: var(--vs-theme-color2); background: rgba(5, 10, 9, 0.8); border: 1px solid rgba(84, 184, 147, 0.5); opacity: 0; transition: opacity .2s; pointer-events: none; }
.post-page .blog-content figure:has(.image-clickable):hover::after,
.post-page .map-gallery__zoom-link:hover::after { opacity: 1; }

/* map gallery → chip tabs */
.post-page .map-gallery__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; border: 0; }
.post-page .map-gallery__tab { padding: 9px 14px; font-family: var(--title-font); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-color2); background: rgba(8, 17, 15, 0.9); border: 1px solid rgba(246, 245, 245, 0.14); }
.post-page .map-gallery__tab::after { display: none; }
.post-page .map-gallery__tab.active { color: #8affd4; border-color: var(--vs-theme-color2); background: rgba(84, 184, 147, 0.14); }
.post-page .map-gallery__panels { border: 1px solid rgba(246, 245, 245, 0.12); }

/* Magnific Popup viewer, in site colours */
.mfp-bg { background: #050a09; opacity: .94; }
.mfp-figure::after { background: #0a1311; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); border: 1px solid rgba(84, 184, 147, 0.35); }
.mfp-arrow:hover::after, .mfp-close:hover { color: var(--vs-theme-color2); }

/* =================================================================
   VIDEO PLAYER + COMPARE SLIDER
   Shared selector: thumbnail filmstrip, label over a dimmed thumb.
   ================================================================= */
.post-page .blog-content .video-player { border: 1px solid rgba(246, 245, 245, 0.12); }
.post-page .blog-content .video-player__label { padding: 6px 11px; font-family: var(--title-font); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-theme-color2); background: rgba(5, 10, 9, 0.8); border: 1px solid rgba(84, 184, 147, 0.5); border-radius: 0; }
.post-page :is(.video-player-selector, .img-compare-selector) { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-bottom: 4px; }
.post-page :is(.video-player-selector__btn, .img-compare-selector__btn) { position: relative; width: auto; max-width: none; height: 72px; padding: 0; overflow: hidden; background: #050a09; border: 1px solid rgba(246, 245, 245, 0.1); }
.post-page :is(.video-player-selector__thumb, .img-compare-selector__thumb) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: grayscale(.8) brightness(.45); transition: filter .3s; }
.post-page :is(.video-player-selector__label, .img-compare-selector__label) { position: absolute; left: 12px; bottom: 10px; padding: 0; font-family: var(--title-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-color1); }
.post-page :is(.video-player-selector__btn, .img-compare-selector__btn):hover :is(.video-player-selector__thumb, .img-compare-selector__thumb) { filter: none; }
.post-page :is(.video-player-selector__btn, .img-compare-selector__btn).active { border-color: var(--vs-theme-color2); background: #050a09; box-shadow: inset 0 -3px 0 var(--vs-theme-color2); }
.post-page :is(.video-player-selector__btn, .img-compare-selector__btn).active :is(.video-player-selector__thumb, .img-compare-selector__thumb) { filter: brightness(.7); }
.post-page :is(.video-player-selector__btn, .img-compare-selector__btn).active :is(.video-player-selector__label, .img-compare-selector__label) { color: #fff; }
/* compare: diamond handle, chip labels */
.post-page .img-compare__divider { width: 2px; }
.post-page .img-compare__handle { width: 38px; height: 38px; border-radius: 0; background: var(--vs-theme-color2); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 4px rgba(5, 10, 9, 0.6); }
.post-page .img-compare__handle svg { transform: rotate(-45deg); }
.post-page .img-compare__handle svg path { fill: #050a09; }
.post-page .img-compare__label { padding: 5px 10px; font-family: var(--title-font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vs-theme-color2); background: rgba(5, 10, 9, 0.8); border: 1px solid rgba(84, 184, 147, 0.5); border-radius: 0; }

/* =================================================================
   CLIP → green frame, glowing progress bar
   ================================================================= */
.post-page .video-clip { position: relative; border: 1px solid rgba(84, 184, 147, 0.35); }
.post-page .video-clip__progress { height: 3px; background: rgba(5, 10, 9, 0.8); }
.post-page .video-clip__progress-bar { background: var(--vs-theme-color2); box-shadow: 0 0 8px var(--vs-theme-color2); }

/* =================================================================
   UP NEXT
   ================================================================= */
.bpu { background: linear-gradient(180deg, #070d0c, #0b1715); border-top: 1px solid rgba(246, 245, 245, 0.06); }
.bpu__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.bpu__head .cl-h2 { margin: 0; }
.post-page .bpu .post-card { border-radius: 0; background: rgba(8, 17, 15, 0.9); border: 1px solid rgba(246, 245, 245, 0.1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.post-page .bpu .post-card:hover { transform: translateY(-2px); border-color: rgba(84, 184, 147, 0.55); background: rgba(84, 184, 147, 0.08); }
.post-page .bpu .post-card__body { gap: 10px; padding: 14px 16px 16px; }
.post-page .bpu .post-card__tag { padding: 4px 8px; border-radius: 0; background: none; border: 1px solid rgba(84, 184, 147, 0.45); }
/* rows: newer then older, a big direction column, thumbnail, details */
.un-rows { display: grid; gap: 10px; }
.un-row { display: grid; grid-template-columns: 150px 220px minmax(0, 1fr); align-items: stretch; text-align: left; background: rgba(8, 17, 15, 0.9); border: 1px solid rgba(246, 245, 245, 0.1); transition: border-color .2s, background-color .2s; }
.un-row:hover { border-color: rgba(84, 184, 147, 0.55); background: rgba(84, 184, 147, 0.06); }
.un-row__k { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 16px; font-family: var(--title-font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--title-color); border-right: 1px solid rgba(246, 245, 245, 0.08); }
.un-row__k b { font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--vs-theme-color2); }
.un-row__k i { font-family: var(--body-font, inherit); font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-color4); }
.un-row--newer .un-row__k { background: rgba(84, 184, 147, 0.08); }
.un-row__img { overflow: hidden; }
.un-row__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.un-row:hover .un-row__img img { transform: scale(1.04); }
.un-row__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 14px 18px; }
.un-meta { display: flex; align-items: center; gap: 10px; font-size: 0.72rem; color: var(--text-color4); }
.un-tag { padding: 3px 7px; font-family: var(--title-font); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vs-theme-color2); border: 1px solid rgba(84, 184, 147, 0.45); }
.un-title { font-family: var(--title-font); font-size: 1rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; color: var(--title-color); }
.un-row:hover .un-title { color: var(--vs-theme-color2); }
.un-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.84rem; line-height: 1.55; color: var(--text-color2); }
.un-latest { margin: 4px 0 0; font-size: 0.86rem; color: var(--text-color4); }
.un-latest a { color: var(--vs-theme-color2); }
@media (max-width: 991px) { .un-row { grid-template-columns: 110px 160px minmax(0, 1fr); } }
@media (max-width: 575px) {
  .un-row { grid-template-columns: 1fr; }
  .un-row__k { flex-direction: row; align-items: baseline; gap: 10px; border-right: 0; border-bottom: 1px solid rgba(246, 245, 245, 0.08); }
  .un-row__k b { font-size: 1.1rem; }
  .un-row__img { aspect-ratio: 16 / 9; }
}
.post-page .bpu .post-card__title { font-family: var(--title-font); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; }

/* =================================================================
   CINEMATIC POSTS (frontmatter type: cinematic). Full-screen hero,
   layout per post via `cinematic-layout` (body[data-cin-layout]):
     stage (default) - centred title, numbered section strip below
     split           - text panel left, art + models pushed right
     hud-terran      - SC2 interface frame, transmission panel
   Models are placed by frontmatter vars (cinematic-model-x/-y/…).
   ================================================================= */
.cinematic-post .cin { position: relative; display: block; height: 100vh; height: 100svh; min-height: 560px; margin: 0; overflow: hidden; background-color: #050a09; background-size: cover; background-position: var(--cin-bg-pos, center 30%); }
.cinematic-post .cin::before,
.cinematic-post .cin::after { z-index: 1; }
.cinematic-post .cinematic-hero__fade { z-index: 1; height: 45%; background: linear-gradient(to top, #070d0c 0%, rgba(7, 13, 12, 0.7) 35%, transparent 100%); }
.cinematic-post .cinematic-hero__model { z-index: 2; }
.cinematic-post .cinematic-hero__model--behind { z-index: 0; }
.cinematic-post .cin__content { position: absolute; z-index: 6; max-width: none; padding: 0; text-align: left; }
.cinematic-post .cinematic-hero__sub { justify-content: flex-start; margin: 0 0 14px; font-size: 0.72rem; text-shadow: none; }
.cinematic-post .cinematic-hero__sub::before { flex: 0 0 28px; height: 2px; background: currentColor; border-radius: 0; }
.cinematic-post .cinematic-hero__sub::after { display: none; }
.cinematic-post .cinematic-hero__title { margin: 0 0 16px; font-size: clamp(2.6rem, 1rem + 4.6vw, 6rem); line-height: .95; letter-spacing: -0.04em; text-transform: uppercase; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6); }
.cin__crumbs { display: flex; gap: 8px; margin-bottom: 18px; font-family: var(--title-font); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-color4); }
.cin__crumbs a { color: var(--text-color1); }
.cin__crumbs span:last-child { color: var(--vs-theme-color2); }
.cin__desc { max-width: 620px; margin: 0 0 22px; font-size: 1.02rem; line-height: 1.65; color: var(--text-color1); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7); }
.cin__desc:empty { display: none; }
.cinematic-post .cin__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; padding: 0; border: 0; font-family: var(--title-font); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-color1); }
.cin__tag { padding: 6px 11px; color: var(--vs-theme-color2); border: 1px solid rgba(84, 184, 147, 0.5); background: rgba(5, 10, 9, 0.6); }
.cin__read:empty { display: none; }
.cin__read::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 2px 0; border-radius: 50%; background: var(--text-color3); vertical-align: middle; }
.cin__author { display: inline-flex; align-items: center; gap: 10px; letter-spacing: 0; text-transform: none; }
.cin__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(84, 184, 147, 0.45); }
.cin__by { display: flex; flex-direction: column; line-height: 1.25; }
.cin__name { font-size: 0.82rem; color: var(--title-color); }
.cinematic-post .cin__role { padding: 0; border: 0; font-family: var(--body-font, inherit); font-size: 0.72rem; font-weight: 400; color: var(--text-color4); }
.cinematic-post .cin__meta .post-hero__localization { font-size: 0.72rem; letter-spacing: 0; text-transform: none; }
.cin__frame,
.cin__bars,
.cin__sections { display: none; }
.cin__scroll { position: absolute; z-index: 3; display: none; font-family: var(--title-font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-color2); }
.cin__scroll::after { content: ""; display: block; width: 1px; height: 46px; margin: 10px auto 0; background: linear-gradient(var(--vs-theme-color2), transparent); animation: cin-drip 2.2s ease-in-out infinite; transform-origin: top; }
.cin__scroll:hover { color: var(--vs-theme-color2); }
@keyframes cin-drip {0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; }}
.cin__sections-k { font-family: var(--title-font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-color4); }
.cin__sec { display: flex; align-items: baseline; gap: 10px; font-family: var(--title-font); font-size: 0.72rem; font-weight: 700; line-height: 1.3; color: var(--text-color1); transition: color .2s, border-color .2s, background-color .2s; }
.cin__sec b { font-weight: 300; color: var(--vs-theme-color2); }
.cin__sec:hover { color: #fff; }
/* Race divider on the hero seam, picked by `cinematic-divider` (body[data-cin-divider]).
   Every divider is cut from the same 2640x2169 canvas to one box (y 194-1505),
   exported 1920x953, so these numbers fit them all. translateY pulls it up into
   the section tabs; the mask fades the hanging cables into the text;
   padding-top is where the text starts, as a share of the image height. */
.cinematic-post { --cin-divider: url(/assets/img/blogassets/SCEvo_Divider_Terran.webp); }
.cinematic-post[data-cin-divider="zerg"] { --cin-divider: url(/assets/img/blogassets/SCEvo_Divider_Zerg.webp); }
/* protoss: Terran until the Protoss art lands */
.cinematic-post[data-cin-divider="protoss"] { --cin-divider: url(/assets/img/blogassets/SCEvo_Divider_Terran.webp); }
.cinematic-post .bpl { padding-top: calc(100vw * 953 / 1920 * .336); }
.cinematic-post .bpl::before { content: ""; position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: calc(100vw * 953 / 1920); transform: translateY(-33.1%); background: var(--cin-divider) center / 100% auto no-repeat; -webkit-mask-image: linear-gradient(to bottom, #000 57.5%, transparent 78.4%); mask-image: linear-gradient(to bottom, #000 57.5%, transparent 78.4%); pointer-events: none; }
.cinematic-post[data-cin-divider="none"] .bpl { padding-top: clamp(40px, 5vw, 64px); }
.cinematic-post[data-cin-divider="none"] .bpl::before { content: none; }
.cinematic-post .bpl__grid { position: relative; z-index: 5; max-width: 1180px; }
.cinematic-post .project-row { gap: clamp(28px, 4vw, 64px); padding: clamp(36px, 5vw, 64px) 0; border-bottom: 0; }
.cinematic-post .project-row__img { flex: 0 0 54%; border-radius: 0; }
.cinematic-post .project-row__img img { border-radius: 0; border: 0; }
.cinematic-post .project-row__img--cinematic::after { border-radius: 0; background: linear-gradient(to left, #070d0c 0, transparent 30%); }
.cinematic-post .project-row--reverse .project-row__img--cinematic::after { background: linear-gradient(to right, #070d0c 0, transparent 30%); }
.cinematic-post .about-toc-mobile { margin: 0 0 24px; }
@media (min-width: 992px) {
  .cinematic-post .about-toc-mobile { display: none; }
}
.cinematic-post[data-cin-layout="stage"] .cin { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; text-align: center; }
.cinematic-post[data-cin-layout="stage"] .cin::before { background: radial-gradient(ellipse 55% 60% at 50% 40%, transparent, rgba(5, 10, 9, 0.85) 78%); }
.cinematic-post[data-cin-layout="stage"] .cin::after { background: linear-gradient(180deg, rgba(5, 10, 9, 0.6), transparent 25%); }
.cinematic-post[data-cin-layout="stage"] .cinematic-hero__fade { height: 55%; }
.cinematic-post[data-cin-layout="stage"] .cin__content { position: relative; left: auto; bottom: auto; max-width: 900px; margin: 0 auto 28px; padding: 0 24px; text-align: center; }
.cinematic-post[data-cin-layout="stage"] .cin__crumbs,
.cinematic-post[data-cin-layout="stage"] .cinematic-post .cin__meta,
.cinematic-post[data-cin-layout="stage"] .cin__meta { justify-content: center; }
.cinematic-post[data-cin-layout="stage"] .cinematic-hero__sub { justify-content: center; }
.cinematic-post[data-cin-layout="stage"] .cinematic-hero__sub::after { display: block; flex: 0 0 28px; height: 2px; background: currentColor; }
.cinematic-post[data-cin-layout="stage"] .cinematic-hero__title { font-size: clamp(2.4rem, 1rem + 4vw, 5.2rem); }
.cinematic-post[data-cin-layout="stage"] .cin__desc { margin-left: auto; margin-right: auto; }
.cinematic-post[data-cin-layout="stage"] .cin__sections { position: relative; z-index: 6; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; padding: 0 max(24px, calc((100vw - 1320px) / 2 + 12px)); background: linear-gradient(180deg, transparent, rgba(5, 10, 9, 0.9) 30%); border-top: 1px solid rgba(246, 245, 245, 0.08); }
.cinematic-post[data-cin-layout="stage"] .cin__sections-k { display: none; }
.cinematic-post[data-cin-layout="stage"] .cin__sec { flex-direction: column; gap: 6px; padding: 18px 16px 20px; text-align: left; background: rgba(14, 22, 21, 0.6); border-right: 1px solid rgba(246, 245, 245, 0.06); border-top: 2px solid transparent; }
.cinematic-post[data-cin-layout="stage"] .cin__sec b { font-size: 1.1rem; }
.cinematic-post[data-cin-layout="stage"] .cin__sec:hover { border-top-color: var(--vs-theme-color2); background: rgba(84, 184, 147, 0.08); }
/* {{split eyebrow="…"}}: small label above a split row's heading */
.post-page .project-row__content p.project-row__eyebrow { margin: 0 0 8px; line-height: 1.4; font-family: var(--title-font); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vs-theme-color2); }
.cinematic-post[data-cin-layout="split"] .cin { background-position: var(--cin-bg-pos, 70% 30%); }
.cinematic-post[data-cin-layout="split"] .cin::before { z-index: 2; inset: 0 auto 0 0; width: 52%; background: linear-gradient(90deg, #070d0c 70%, rgba(7, 13, 12, 0.85) 88%, transparent); clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.cinematic-post[data-cin-layout="split"] .cin::after { background: linear-gradient(180deg, rgba(5, 10, 9, 0.5), transparent 20%); }
.cinematic-post[data-cin-layout="split"] .cinematic-hero__model { translate: 22vw 0; }
.cinematic-post[data-cin-layout="split"] .cin__content { left: max(24px, calc((100vw - 1320px) / 2 + 12px)); top: 50%; width: min(520px, 40vw); transform: translateY(-50%); }
.cinematic-post[data-cin-layout="split"] .cinematic-hero__title { font-size: clamp(2.2rem, 1rem + 3vw, 4.4rem); }
.cinematic-post[data-cin-layout="split"] .cin__sections { position: absolute; z-index: 6; left: max(24px, calc((100vw - 1320px) / 2 + 12px)); bottom: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 6px 18px; }
.cinematic-post[data-cin-layout="split"] .cin__sections-k { grid-column: 1 / -1; margin-bottom: 4px; }
.cinematic-post[data-cin-layout="split"] .cin__sec { padding: 6px 0 6px 10px; border-left: 2px solid rgba(246, 245, 245, 0.12); }
.cinematic-post[data-cin-layout="split"] .cin__sec:hover { border-left-color: var(--vs-theme-color2); }
.cinematic-post[data-cin-layout="split"] .project-row__img { flex-basis: 58%; margin-left: calc(min(0px, (1180px - 100vw) / 2)); }
.cinematic-post[data-cin-layout="split"] .project-row--reverse .project-row__img { margin-left: 0; margin-right: calc(min(0px, (1180px - 100vw) / 2)); }
.cinematic-post[data-cin-layout="split"] .project-row__img--cinematic::after { background: linear-gradient(to left, #070d0c 0, transparent 22%); }
.cinematic-post[data-cin-layout="hud-terran"] .cin::before { background: repeating-linear-gradient(0deg, rgba(84, 184, 147, 0.06) 0 1px, transparent 1px 4px), radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, rgba(5, 10, 9, 0.8) 100%); }
.cinematic-post[data-cin-layout="hud-terran"] .cin::after { background: #0c3d33; mix-blend-mode: color; opacity: .35; }
.cinematic-post[data-cin-layout="hud-terran"] .cin__frame { position: absolute; z-index: 3; inset: clamp(96px, 13vh, 120px) clamp(16px, 2.5vw, 36px) clamp(20px, 3vh, 36px); display: block; border: 1px solid rgba(84, 184, 147, 0.18); pointer-events: none; }
.cinematic-post[data-cin-layout="hud-terran"] .cin__frame i { position: absolute; width: 28px; height: 28px; border: 2px solid var(--vs-theme-color2); }
.cinematic-post[data-cin-layout="hud-terran"] .cin__frame i:nth-child(1) { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.cinematic-post[data-cin-layout="hud-terran"] .cin__frame i:nth-child(2) { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.cinematic-post[data-cin-layout="hud-terran"] .cin__frame i:nth-child(3) { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.cinematic-post[data-cin-layout="hud-terran"] .cin__frame i:nth-child(4) { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.cinematic-post[data-cin-layout="hud-terran"] .cin__content { left: calc(clamp(16px, 2.5vw, 36px) + 28px); bottom: calc(clamp(20px, 3vh, 36px) + 28px); width: min(640px, 70vw); padding: 24px 26px 22px; background: rgba(5, 10, 9, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(84, 184, 147, 0.3); border-left: 3px solid var(--vs-theme-color2); }
.cinematic-post[data-cin-layout="hud-terran"] .cin__crumbs { display: none; }
.cinematic-post[data-cin-layout="hud-terran"] .cinematic-hero__sub::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; animation: cin-blink 1.4s steps(2) infinite; }
@keyframes cin-blink {50% { opacity: .25; }}
.cinematic-post[data-cin-layout="hud-terran"] .cinematic-hero__title { font-size: clamp(1.9rem, 1rem + 2.4vw, 3.4rem); }
.cinematic-post[data-cin-layout="hud-terran"] .cin__desc { font-size: 0.94rem; }
.cinematic-post[data-cin-layout="hud-terran"] .cin__sections { position: absolute; z-index: 6; right: calc(clamp(16px, 2.5vw, 36px) + 28px); top: 50%; display: grid; gap: 4px; width: 240px; transform: translateY(-50%); }
.cinematic-post[data-cin-layout="hud-terran"] .cin__sections-k { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(84, 184, 147, 0.3); color: var(--vs-theme-color2); }
.cinematic-post[data-cin-layout="hud-terran"] .cin__sec { padding: 8px 10px; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(5, 10, 9, 0.6); border: 1px solid rgba(84, 184, 147, 0.15); }
.cinematic-post[data-cin-layout="hud-terran"] .cin__sec:hover { border-color: var(--vs-theme-color2); background: rgba(84, 184, 147, 0.12); }
.cinematic-post[data-cin-layout="hud-terran"] .project-row__img { position: relative; overflow: visible; }
.cinematic-post[data-cin-layout="hud-terran"] .project-row__img::before { content: ""; position: absolute; z-index: 2; inset: -8px; border: 2px solid var(--vs-theme-color2); clip-path: polygon(0 0, 28px 0, 28px 2px, 2px 2px, 2px 28px, 0 28px, 0 100%, 0 100%, 0 calc(100% - 28px), 2px calc(100% - 28px), 2px calc(100% - 2px), 28px calc(100% - 2px), 28px 100%, calc(100% - 28px) 100%, calc(100% - 28px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 28px), 100% calc(100% - 28px), 100% 28px, calc(100% - 2px) 28px, calc(100% - 2px) 2px, calc(100% - 28px) 2px, calc(100% - 28px) 0, 100% 0, 100% 0); pointer-events: none; }
.cinematic-post[data-cin-layout="hud-terran"] .project-row__img--cinematic::after { background: repeating-linear-gradient(0deg, rgba(84, 184, 147, 0.07) 0 1px, transparent 1px 4px); }
.cinematic-post[data-cin-layout="hud-terran"] .project-row__content { padding: 22px 24px; background: rgba(8, 17, 15, 0.8); border-left: 3px solid var(--vs-theme-color2); }
@media (max-width: 991px) {
  .cinematic-post .cin { height: auto; min-height: 88svh; }
  .cinematic-post[data-cin-layout="split"] .cin__content,
  .cinematic-post[data-cin-layout="hud-terran"] .cin__content { left: 20px; right: 20px; width: auto; top: auto; bottom: 40px; transform: none; }
  .cinematic-post[data-cin-layout="split"] .cin::before { width: 100%; clip-path: none; background: linear-gradient(0deg, #070d0c 30%, transparent 75%); }
  .cinematic-post[data-cin-layout="split"] .cinematic-hero__model { translate: 0 -12vh; }
  .cinematic-post[data-cin-layout="split"] .cin__sections,
  .cinematic-post[data-cin-layout="hud-terran"] .cin__sections,
  .cinematic-post[data-cin-layout="hud-terran"] .cin__frame { display: none; }
  .cinematic-post[data-cin-layout="stage"] .cin__sections { grid-template-columns: 1fr 1fr; }
  .cinematic-post[data-cin-layout="split"] .project-row__img,
  .cinematic-post[data-cin-layout="split"] .project-row--reverse .project-row__img { margin: 0; }
  .cin__scroll { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-post .cin *,
  .cinematic-post .cin *::before,
  .cinematic-post .cin *::after { animation: none !important; }
}

/* Model placement and backdrop position from frontmatter (set as CSS vars
   by loadblogpost.js). Phones/tablets use the -m values when a post gives
   them (cinematic-model-x-mobile etc.), else the desktop ones. */
/* model widths are px on a 1920x1080 screen (phones: 390x844); --hero-k (set in
   loadblogpost.js) scales them with the hero the way cover scales the background */
.cinematic-post .cinematic-hero__model--1 { width: calc(var(--model-width, 680px) * var(--hero-k, 1)); transform: translate(calc(-50% + var(--model-x, 0px)), calc(-50% + var(--model-y, 0px))) scale(var(--model-scale, 1)); }
.cinematic-post .cinematic-hero__model--2 { width: calc(var(--model2-width, 680px) * var(--hero-k, 1)); transform: translate(calc(-50% + var(--model2-x, 0px)), calc(-50% + var(--model2-y, 0px))) scale(var(--model2-scale, 1)); }
@media (max-width: 991px) {
  .cinematic-post .cin { background-position: var(--cin-bg-pos-m, var(--cin-bg-pos, center 30%)); }
  .cinematic-post .cinematic-hero__model--1 { width: calc(var(--model-width-m, min(var(--model-width, 680px), 55vw)) * var(--hero-k, 1)); transform: translate(calc(-50% + var(--model-x-m, var(--model-x, 0px))), calc(-50% + var(--model-y-m, var(--model-y, 0px)))) scale(var(--model-scale-m, var(--model-scale, 1))); }
  .cinematic-post .cinematic-hero__model--2 { width: calc(var(--model2-width-m, min(var(--model2-width, 680px), 55vw)) * var(--hero-k, 1)); transform: translate(calc(-50% + var(--model2-x-m, var(--model2-x, 0px))), calc(-50% + var(--model2-y-m, var(--model2-y, 0px)))) scale(var(--model2-scale-m, var(--model2-scale, 1))); }
  .bph__bg img { object-position: var(--bg-pos-m, var(--bg-pos)); }
  .cinematic-post .cinematic-hero__model--hide-m { display: none !important; } /* cinematic-model[-2]-hide-mobile */
}
/* hero editor preview (posts/hero-editor.html → ?heroEdit=1): both heroes are
   kept, models can be dragged */
.hero-edit.cinematic-post .bph { display: none; }
.hero-edit .cinematic-hero__model { pointer-events: auto; cursor: move; outline: 1px dashed rgba(254, 198, 36, 0.55); outline-offset: -1px; }
.hero-edit .cinematic-hero__model.is-dragging { outline-color: #fec624; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 575px) {
  .bph { padding-top: 120px; }
  .bph__art { margin-top: 28px; }
  .post-page .unit-module-wrapper { padding-left: 18px; }
  .post-page .unit-changes { padding: 54px 14px 8px 18px; }
  .post-page .unit-title-bar { padding-left: 56px; }
  .post-page :is(.video-player-selector__btn, .img-compare-selector__btn) { height: 56px; }
  .post-page .blog-content blockquote { padding: 24px 4%; }
}

/* ==============================================================
   Model showcase ({{showcase}} tag, built by assets/js/showcase.js).
   .mshow[data-race][data-side][data-breakout][data-tint]; model placement
   --m-x / --m-y (% of the video's own size) and --m-width (% of the model
   column), each with an -m version for phones. Background per race:
   terran scanlines, zerg caustics (purple, or tint="orange"), protoss hex
   lattice. Tune it in tools/showcase-editor.html.
   ============================================================== */
.mshow { --mx: 28%; --c1: #54b893; --c2: #ff8a3d; margin: 72px 0; }
.mshow[data-side="right"] { --mx: 72%; }
.mshow[data-race="zerg"] { --c1: #a35bff; --c2: #ff4fb0; }
.mshow[data-race="zerg"][data-tint="orange"] { --c1: #ff7a1a; --c2: #ffcc4d; }
.mshow[data-race="protoss"] { --c1: #3fb6ff; --c2: #f2c14e; }

.mshow__frame { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 520px; border: 1px solid color-mix(in srgb, var(--c1) 35%, transparent); background: #050a09; }
.mshow[data-breakout="0"] .mshow__frame { overflow: hidden; }
.mshow__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mshow__bg > i, .mshow__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.mshow__model { position: relative; z-index: 2; grid-column: 1; grid-row: 1; pointer-events: none; }
/* clip-path trims a few rows: some renders are padded to an even height with
   a solid bright last row */
.mshow__model video { position: absolute; left: 50%; top: 50%; width: var(--m-width, 120%); max-width: none; translate: calc(-50% + var(--m-x, 0%)) calc(-50% + var(--m-y, 0%)); clip-path: inset(0 0 4px 0); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .6)); }
.mshow__info { position: relative; z-index: 3; grid-column: 2; grid-row: 1; align-self: center; padding: 56px 48px 56px 16px; }
.mshow[data-side="right"] .mshow__model { grid-column: 2; }
.mshow[data-side="right"] .mshow__info { grid-column: 1; padding: 56px 16px 56px 48px; }

.mshow .mshow__head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.mshow .mshow__icon { flex: 0 0 auto; width: 80px; height: 80px; margin: 0; border: 1px solid color-mix(in srgb, var(--c1) 55%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--c1) 25%, transparent); background: #000; }
.mshow .mshow__head .mshow__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 .66rem/1 var(--title-font); letter-spacing: .2em; text-transform: uppercase; color: var(--c1); }
.mshow .mshow__head .mshow__eyebrow img { width: 20px; height: 20px; margin: 0; object-fit: contain; }
.mshow .mshow__head .mshow__name { margin: 0; padding: 0; border: 0; font: 800 clamp(1.5rem, 1.1rem + 1.3vw, 2.3rem)/1.05 var(--title-font); text-transform: uppercase; color: #fff; }
.mshow .mshow__head .mshow__name::after { content: none; }
.mshow .mshow__blurb { margin: 0 0 24px; }
.mshow .mshow__info .mshow__blurb p { margin: 0 0 12px; font-size: 1rem; line-height: 1.75; color: #d1caca; }
.mshow .mshow__blurb > :last-child { margin-bottom: 0; }
.mshow .mshow__preview { position: relative; margin: 0; padding: 0; border: 0; background: none; }
.mshow__screen { position: relative; }
.mshow__screen video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid rgba(246, 245, 245, .12); background: #000; }
.mshow__screen::before, .mshow__screen::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--c1); pointer-events: none; }
.mshow__screen::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.mshow__screen::after { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.mshow .mshow__info .mshow__preview figcaption { margin-top: 8px; font: 700 .6rem/1 var(--title-font); letter-spacing: .18em; text-transform: uppercase; color: rgba(246, 245, 245, .45); }

/* terran: scanlines, a slow scan band, pulsing glows */
.t-base { background: radial-gradient(ellipse 70% 90% at var(--mx) 55%, #0d2a24, #050a09 72%); }
.t-glow--a { background: radial-gradient(circle at var(--mx) 58%, color-mix(in srgb, var(--c1) 34%, transparent), transparent 42%); animation: mshow-pulse 5s ease-in-out infinite; }
.t-glow--b { background: radial-gradient(circle at calc(100% - var(--mx)) 12%, color-mix(in srgb, var(--c2) 16%, transparent), transparent 40%); animation: mshow-pulse 7s ease-in-out -2s infinite; }
.t-lines { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--c1) 9%, transparent) 0 1px, transparent 1px 4px); }
.mshow__bg > .t-band { height: 35%; background: linear-gradient(transparent, color-mix(in srgb, var(--c1) 12%, transparent), transparent); animation: mshow-band 6s linear infinite; }
@keyframes mshow-band { from { transform: translateY(-100%); } to { transform: translateY(300%); } }

/* zerg: two seamless caustic textures drifting different ways */
.z-base { background: radial-gradient(ellipse 80% 90% at var(--mx) 70%, color-mix(in srgb, var(--c1) 22%, #07040b), #050307 72%); }
.z-caustic { background: var(--c1); -webkit-mask: var(--tex) 0 0 / var(--sz) repeat; mask: var(--tex) 0 0 / var(--sz) repeat; mix-blend-mode: screen; filter: blur(1px); }
.z-caustic--a { --sz: 420px 420px; opacity: .24; animation: mshow-zc-a 22s linear infinite; }
.z-caustic--b { --sz: 640px 640px; opacity: .17; animation: mshow-zc-b 31s linear infinite; }
.z-glow { background: radial-gradient(ellipse 40% 50% at var(--mx) 68%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 70%); animation: mshow-pulse 6s ease-in-out infinite; }
.z-vignette { background: radial-gradient(ellipse 85% 90% at var(--mx) 60%, transparent 45%, #050307 100%), linear-gradient(180deg, #050307 0%, transparent 30%); }
/* zerg bg="glows": soft lights fading in and out, each one moving while dark */
.mshow__bg > .z-orb { inset: auto; width: var(--s); height: var(--s); border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle, color-mix(in srgb, var(--c1) 70%, transparent), transparent 66%); mix-blend-mode: screen; opacity: 0; animation: mshow-orb var(--d, 8s) ease-in-out infinite; }
.mshow__bg > .z-orb--alt { background: radial-gradient(circle, color-mix(in srgb, var(--c2) 55%, transparent), transparent 66%); }
@keyframes mshow-orb { 0%, 100% { opacity: 0; scale: .7; } 45%, 60% { opacity: var(--o, .55); scale: 1; } }
@keyframes mshow-zc-a { to { -webkit-mask-position: 420px 840px; mask-position: 420px 840px; } }
@keyframes mshow-zc-b { to { -webkit-mask-position: -1280px 640px; mask-position: -1280px 640px; } }

/* protoss: hex lattice with a band of light sweeping across it */
.p-base { background: radial-gradient(ellipse 75% 90% at var(--mx) 50%, #0a1a2e, #04070d 72%); }
.p-glow { background: radial-gradient(circle at var(--mx) 50%, color-mix(in srgb, var(--c1) 26%, transparent), transparent 45%); }
.p-vignette { background: radial-gradient(ellipse 80% 90% at var(--mx) 50%, transparent 40%, #04070d 100%); }
.p-hex polygon { fill: none; stroke: var(--c1); }
.p-hex--dim polygon { stroke-opacity: .13; stroke-width: 1.2; }
.p-hex--lit { -webkit-mask: linear-gradient(115deg, transparent 45%, #000 50%, transparent 55%) 0 0 / 300% 100% no-repeat; mask: linear-gradient(115deg, transparent 45%, #000 50%, transparent 55%) 0 0 / 300% 100% no-repeat; animation: mshow-sweep 7s linear infinite; }
.p-hex--lit polygon { stroke-opacity: .85; stroke-width: 1.6; filter: drop-shadow(0 0 4px var(--c1)); }
@keyframes mshow-sweep { from { -webkit-mask-position: 150% 0; mask-position: 150% 0; } to { -webkit-mask-position: -50% 0; mask-position: -50% 0; } }

@keyframes mshow-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* phones / tablets: model on top, text below; clipped at the sides only so
   the model can still break out at the top */
@media (max-width: 991px) {
  .mshow { --mx: 50%; margin: 56px 0; }
  .mshow[data-side="right"] { --mx: 50%; }
  .mshow__frame { grid-template-columns: 1fr; min-height: 0; overflow-x: clip; }
  .mshow__model, .mshow[data-side="right"] .mshow__model { grid-column: 1; grid-row: 1; height: 300px; }
  .mshow__info, .mshow[data-side="right"] .mshow__info { grid-column: 1; grid-row: 2; padding: 8px 20px 28px; }
  .mshow__model video { width: var(--m-width-m, min(var(--m-width, 120%), 85%)); translate: calc(-50% + var(--m-x-m, var(--m-x, 0%))) calc(-50% + var(--m-y-m, var(--m-y, 0%))); }
  .mshow .mshow__icon { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .mshow__bg, .mshow__bg * { animation: none !important; }
  .mshow__bg > .z-orb { opacity: calc(var(--o, .55) * .7); } /* still lights, not none */
}

/* videos waiting for a click on slow connections (loadblogpost.js initLazyVideos) */
.post-page video.is-static { cursor: pointer; }

/* =================================================================
   ICON CLOUD ({{icon-cloud src="…json"}}) — new icons floating at
   mixed sizes. Size, offsets and drift timing are set per icon by
   loadblogpost.js initIconClouds (--size, --lift, --nudge, --drift,
   --delay). Hover or focus lifts an icon and shows its name.
   ================================================================= */
.post-page .blog-content .icon-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 30px; margin: 32px auto; padding: 40px 0 56px; list-style: none; }
.post-page .blog-content .icon-cloud .icon-cloud__icon { position: relative; width: var(--size); height: var(--size); margin: 0 var(--nudge); padding: 0; translate: 0 var(--lift); animation: icon-cloud-drift var(--drift) ease-in-out var(--delay) infinite alternate; outline: none; list-style: none; }
.post-page .blog-content .icon-cloud .icon-cloud__icon::before { content: none; }
.post-page .icon-cloud__icon[data-race="terran"]  { --race: #e0583b; }
.post-page .icon-cloud__icon[data-race="zerg"]    { --race: #b46ae6; }
.post-page .icon-cloud__icon[data-race="protoss"] { --race: #f0c24b; }
.post-page .icon-cloud__icon:hover,
.post-page .icon-cloud__icon:focus-visible { z-index: 2; animation-play-state: paused; }
.post-page .icon-cloud__icon img { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 4px; opacity: 0.8; filter: saturate(0.85); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); transition: transform 0.25s ease, opacity 0.25s, filter 0.25s, box-shadow 0.25s; }
.post-page .icon-cloud__icon:hover img,
.post-page .icon-cloud__icon:focus-visible img { transform: scale(1.3); opacity: 1; filter: none; box-shadow: 0 0 0 1px var(--race, #fff), 0 0 26px color-mix(in srgb, var(--race, #fff) 55%, transparent), 0 10px 28px rgba(0, 0, 0, 0.7); }
.post-page .icon-cloud__label { position: absolute; top: calc(100% + var(--size) * 0.2); left: 50%; translate: -50% -4px; white-space: nowrap; padding: 3px 8px; font-family: var(--title-font); font-size: 0.6rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.05em; color: #fff; background: rgba(5, 10, 9, 0.9); border: 1px solid color-mix(in srgb, var(--race, #fff) 50%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.2s, translate 0.2s; }
.post-page .icon-cloud__tag { color: var(--race, #fff); }
.post-page .icon-cloud__icon:hover .icon-cloud__label,
.post-page .icon-cloud__icon:focus-visible .icon-cloud__label { opacity: 1; translate: -50% 0; }
@keyframes icon-cloud-drift { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .post-page .blog-content .icon-cloud .icon-cloud__icon { animation: none; } }
@media (max-width: 575px) {
  .post-page .blog-content .icon-cloud { gap: 20px 18px; }
  .post-page .blog-content .icon-cloud .icon-cloud__icon { width: calc(var(--size) * 0.8); height: calc(var(--size) * 0.8); }
}

/* =================================================================
   HERO CREDIT (bg-credit, bg-credit-link) — names the map or art in
   the hero background, top-right under the header, on the regular
   hero and every cinematic layout. Liquipedia links get the LP icon
   (masked so it takes the text colour), other links an arrow.
   ================================================================= */
.post-page .hero-credit { position: absolute; z-index: 7; top: 132px; right: max(16px, calc((100vw - 1320px) / 2 + 12px)); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); margin: 0; padding: 5px 10px; font-family: var(--title-font); font-size: 0.62rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.06em; color: rgba(246, 245, 245, 0.75); background: rgba(5, 10, 9, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(246, 245, 245, 0.1); }
.post-page .hero-credit__k { font-weight: 400; text-transform: uppercase; color: rgba(246, 245, 245, 0.5); }
.post-page .hero-credit__name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.post-page a.hero-credit__name { transition: color .2s; }
.post-page a.hero-credit__name:hover { color: var(--vs-theme-color2); }
.post-page .hero-credit__lp { flex: 0 0 auto; width: 15px; height: 11px; background-color: currentColor; -webkit-mask: url('/assets/img/logos/liquipedia-logo.webp') center / contain no-repeat; mask: url('/assets/img/logos/liquipedia-logo.webp') center / contain no-repeat; }
.post-page .hero-credit__ext { display: inline-flex; flex: 0 0 auto; width: 9px; height: 9px; }
.post-page .hero-credit__ext svg { width: 100%; height: 100%; }
/* inside the HUD frame's top-right corner */
.cinematic-post[data-cin-layout="hud-terran"] .hero-credit { top: calc(clamp(96px, 13vh, 120px) + 14px); right: calc(clamp(16px, 2.5vw, 36px) + 40px); }
/* phones (loadblogpost.js moves it): under the regular hero's byline, or at
   the top of the post body for cinematic heroes */
.post-page .hero-credit--inline,
.post-page .hero-credit--body { position: static; display: inline-flex; margin: 14px 0 0; }
.post-page .hero-credit--body { display: flex; width: fit-content; margin: 0 0 20px auto; }