/* ==========================================================================
   SLOP DEALER — V2 LAYER "HOUSE LIGHTS UP" (2026-09-05)
   Loaded after site.css. Lane-tinted cards, ghost numerals, foil sheens,
   table-lamp atmosphere, pointer spotlight + tilt (site.js sets
   --mx/--my/--tx/--ty). Every release surface carries data-lane + --lane
   from assets/releases.json, so a new release inherits all of this by
   existing. Tokens come from site.css; nothing here redefines them.
   ========================================================================== */

:root {
  --lane: var(--ember);
  --ghost-stroke: rgba(242, 236, 219, 0.085);
}

/* ---------- Hero atmosphere ---------- */

.hero {
  isolation: isolate;
}

.hero::after {
  color: transparent;
  content: "♠";
  font-family: var(--font-display);
  font-size: clamp(22rem, 58vw, 60rem);
  inset: auto -0.08em -0.42em auto;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  -webkit-text-stroke: 1px var(--ghost-stroke);
  z-index: -1;
}

.hero-layout::before {
  background: radial-gradient(closest-side, rgba(255, 194, 75, 0.1), transparent 70%);
  content: "";
  filter: blur(10px);
  height: 26rem;
  pointer-events: none;
  position: absolute;
  right: -6rem;
  top: -10rem;
  width: 36rem;
  z-index: -1;
}

.hero .eyebrow::after,
.section-header .eyebrow::after,
.page-hero .eyebrow::after {
  background: linear-gradient(90deg, rgba(90, 220, 255, 0.7), transparent);
  content: "";
  flex: 0 0 3rem;
  height: 1px;
}

.hero-proof span {
  backdrop-filter: blur(6px);
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.hero-proof span:hover {
  border-color: var(--line-strong);
  color: var(--paper);
  transform: translateY(-1px);
}

/* Card fan: 3D tilt on the whole hand, foil sheen + lane glow per card */

.cardfan {
  transform: perspective(1400px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transform-style: preserve-3d;
  transition: transform 260ms ease-out;
}

.cardfan-card {
  border-radius: 6px;
}

.cardfan-card::before {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  content: "";
  inset: 6px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.cardfan-card::after {
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.22) 46%, rgba(255, 255, 255, 0.05) 52%, transparent 66%);
  content: "";
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-70%);
  transition: opacity 240ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.25, 1);
  z-index: 3;
}

.cardfan-card:hover::after {
  opacity: 1;
  transform: translateX(70%);
}

.cardfan-card:hover {
  box-shadow: var(--shadow-soft), 0 0 0 1px color-mix(in srgb, var(--lane) 60%, transparent), 0 0 46px color-mix(in srgb, var(--lane) 45%, transparent);
}

/* ---------- Marquee: edge fade + ember hairlines ---------- */

.marquee {
  border-bottom-color: rgba(255, 90, 31, 0.28);
  border-top-color: rgba(255, 90, 31, 0.28);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ---------- Ghost numerals on section headers ---------- */

main {
  counter-reset: sec;
}

.section > .section-header {
  position: relative;
}

.section > .section-header > div {
  position: relative;
  z-index: 1;
}

.section > .section-header::before {
  color: transparent;
  content: counter(sec, decimal-leading-zero);
  counter-increment: sec;
  font-family: var(--font-display);
  font-size: clamp(6rem, 13vw, 11rem);
  left: -0.06em;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  -webkit-text-stroke: 1px var(--ghost-stroke);
  top: -0.42em;
  z-index: 0;
}

/* ---------- Cards: lane rule, gradient panel, spotlight, playing-card chrome ---------- */

.route-card,
.shelf-card,
.media-card,
.update-card,
.catalog-card,
.shop-buy-card,
.shop-series-panel,
.blog-card,
.lane {
  background: linear-gradient(160deg, color-mix(in srgb, var(--lane) 7%, var(--panel)), var(--panel) 48%);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.route-card::before,
.shelf-card::before,
.media-card::before,
.update-card::before,
.catalog-card::before,
.shop-buy-card::before,
.shop-series-panel::before,
.blog-card::before {
  background: linear-gradient(90deg, var(--lane), color-mix(in srgb, var(--lane) 40%, transparent) 55%, transparent);
  content: "";
  height: 3px;
  inset: 0 0 auto 0;
  opacity: 0.9;
  position: absolute;
  z-index: 3;
}

.update-card,
.blog-card {
  --lane: var(--cyan);
}

/* pointer spotlight (JS feeds --mx/--my) */

.route-card::after,
.shelf-card::after,
.media-card::after,
.update-card::after,
.catalog-card::after,
.shop-buy-card::after,
.shop-series-panel::after,
.blog-card::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--lane) 16%, transparent), transparent 62%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 260ms ease;
  z-index: 0;
}

.route-card:hover::after,
.shelf-card:hover::after,
.media-card:hover::after,
.update-card:hover::after,
.catalog-card:hover::after,
.shop-buy-card:hover::after,
.shop-series-panel:hover::after,
.blog-card:hover::after {
  opacity: 1;
}

.route-card > *,
.shelf-card > *,
.media-card > *,
.update-card > *,
.catalog-card > *,
.shop-buy-card > *,
.shop-series-panel > *,
.blog-card > * {
  position: relative;
  z-index: 1;
}

.route-card:hover,
.shelf-card:hover,
.media-card:hover,
.update-card:hover,
.catalog-card:hover,
.shop-buy-card:hover,
.shop-series-panel:hover,
.blog-card:hover {
  border-color: color-mix(in srgb, var(--lane) 45%, var(--line-strong));
  box-shadow: var(--shadow-hard), 0 24px 60px -24px color-mix(in srgb, var(--lane) 55%, transparent);
}

/* Route cards: ghost numeral + lane number */

.route-num {
  color: var(--lane);
  white-space: nowrap;
}

.route-top {
  align-items: start;
  gap: 0.6rem;
}

.route-genre {
  text-align: right;
}

.route-ghost {
  bottom: -0.32em;
  color: transparent;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: 0.4rem;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--lane) 30%, transparent);
  transition: transform 300ms ease, -webkit-text-stroke-color 300ms ease;
  z-index: 0;
}

.route-card:hover .route-ghost {
  -webkit-text-stroke-color: color-mix(in srgb, var(--lane) 65%, transparent);
  transform: translateY(-6px);
}

/* Shelf cards: playing-card index chips, NEW ribbon, foil sweep, cover vignette */

.shelf-num {
  border-color: color-mix(in srgb, var(--lane) 60%, transparent);
  border-radius: 3px;
  color: var(--lane);
}

.shelf-suit {
  align-items: center;
  background: rgba(6, 7, 11, 0.88);
  border: 1px solid color-mix(in srgb, var(--lane) 60%, transparent);
  border-radius: 3px;
  color: var(--lane);
  display: inline-flex;
  font-size: 1rem;
  height: 1.75rem;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 0.7rem;
  text-shadow: 0 0 12px color-mix(in srgb, var(--lane) 70%, transparent);
  top: 0.7rem;
  width: 1.75rem;
  z-index: 2;
}

.shelf-new {
  background: var(--ember);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), var(--glow-ember);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  padding: 0.35rem 0;
  position: absolute;
  right: -2.6rem;
  text-align: center;
  text-transform: uppercase;
  top: 1.35rem;
  transform: rotate(45deg);
  width: 9rem;
  z-index: 3;
}

.shelf-suit:has(+ .shelf-new) {
  display: none;
}

.shelf-card-cover::before,
.catalog-card > a:first-child::before {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 45%, transparent 60%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-120%);
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.25, 1);
  z-index: 2;
}

.shelf-card:hover .shelf-card-cover::before,
.catalog-card:hover > a:first-child::before {
  transform: translateX(120%);
}

.shelf-card-cover::after {
  background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--panel) 85%, transparent));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.shelf-card-body h3 {
  letter-spacing: 0.005em;
}

.text-link.buy {
  color: var(--ember-soft);
}

.text-link.buy:hover {
  color: var(--paper);
}

/* Catalogue cards on the releases page */

.catalog-card > a:first-child {
  overflow: hidden;
  position: relative;
}

.catalog-card .shelf-num {
  left: 0.5rem;
  top: 0.5rem;
}

.catalog-card .shelf-new {
  font-size: 0.56rem;
  right: -2.9rem;
  top: 1rem;
  width: 8.5rem;
}

.catalog-card img {
  transition: transform 500ms ease;
}

.catalog-card:hover img {
  transform: scale(1.03);
}

.catalog-group-header {
  position: relative;
}

.catalog-group-header h3 span {
  color: var(--soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  margin-left: 1rem;
  vertical-align: middle;
}

/* Filter chips (releases page) */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.chip {
  background: rgba(14, 19, 28, 0.85);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0.55rem 0.95rem;
  text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.chip:hover {
  border-color: var(--line-strong);
  color: var(--paper);
  transform: translateY(-1px);
}

.chip[aria-pressed="true"] {
  background: var(--ember);
  border-color: var(--ember);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  color: var(--ink);
}

/* ---------- Drop feature: spotlight, ghost word, tilt ---------- */

.drop-feature {
  background:
    radial-gradient(34rem 22rem at 18% 50%, color-mix(in srgb, var(--lane) 13%, transparent), transparent 62%),
    radial-gradient(28rem 18rem at 88% 12%, rgba(255, 90, 31, 0.08), transparent 62%),
    var(--panel);
  border-color: color-mix(in srgb, var(--lane) 35%, var(--line-strong));
  isolation: isolate;
}

.drop-feature::after {
  bottom: -0.22em;
  color: transparent;
  content: "Drop";
  font-family: var(--font-display);
  font-size: clamp(7rem, 16vw, 13rem);
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: -0.06em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--lane) 22%, transparent);
  z-index: 0;
}

.drop-feature > * {
  position: relative;
  z-index: 1;
}

.drop-feature-cover {
  transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transform-style: preserve-3d;
  transition: transform 220ms ease-out;
}

.drop-feature-cover img {
  border-radius: 4px;
  box-shadow: var(--shadow-hard), 0 34px 70px -24px color-mix(in srgb, var(--lane) 70%, transparent);
}

.drop-feature-copy h3 {
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 48px color-mix(in srgb, var(--lane) 40%, transparent);
}

.drop-feature .meta span:first-child {
  color: var(--lane);
}

/* ---------- Media cards: lane play ring ---------- */

.media-thumb::after {
  z-index: 2;
}

.media-card:hover .media-thumb::after {
  background: var(--lane);
  border-color: var(--lane);
  box-shadow: 0 0 22px color-mix(in srgb, var(--lane) 60%, transparent);
}

/* ---------- Buttons: shine sweep ---------- */

.button {
  overflow: hidden;
  position: relative;
}

.button.hot::after {
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-120%);
  transition: transform 650ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.button.hot:hover::after {
  transform: translateX(120%);
}

/* ---------- Header: scroll hairline + brand spade ---------- */

.site-header::after {
  background: linear-gradient(90deg, transparent, var(--ember) 30%, var(--cyan) 70%, transparent);
  bottom: -1px;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  transition: opacity 300ms ease;
}

.site-header[data-scrolled="true"]::after {
  opacity: 0.75;
}

.brand-mark {
  position: relative;
}

.brand-mark::after {
  bottom: -0.35rem;
  color: var(--paper);
  content: "♠";
  font-size: 0.7rem;
  line-height: 1;
  position: absolute;
  right: -0.35rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  transform: rotate(4deg);
}

/* ---------- Subpage heroes: bottom fade into the page ---------- */

.page-hero::after {
  background: linear-gradient(180deg, transparent 55%, rgba(6, 7, 11, 0.85));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

/* ---------- Book detail: lane glow ---------- */

.book-detail-cover img {
  border-radius: 4px;
  box-shadow: var(--shadow-hard), 0 40px 80px -30px color-mix(in srgb, var(--lane) 60%, transparent);
}

.book-facts li:first-child {
  border-color: color-mix(in srgb, var(--lane) 55%, transparent);
  color: var(--lane);
}

/* ---------- CTA band: halftone ---------- */

.cta-band::before {
  background-image: radial-gradient(rgba(0, 0, 0, 0.16) 1px, transparent 1.6px);
  background-size: 12px 12px;
  content: "";
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
  mask-image: linear-gradient(90deg, transparent 30%, #000);
  pointer-events: none;
  position: absolute;
}

.cta-band-inner {
  position: relative;
}

/* ---------- Footer hairline ---------- */

.site-footer {
  position: relative;
}

.site-footer::before {
  background: linear-gradient(90deg, var(--ember), var(--cyan) 50%, var(--violet));
  content: "";
  height: 2px;
  left: 0;
  opacity: 0.6;
  position: absolute;
  right: 0;
  top: -1px;
}

/* ---------- Reveal stagger: extend to catalogue + shop grids ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .catalog-grid [data-reveal]:nth-child(2),
  html.js .shop-buy-grid [data-reveal]:nth-child(2),
  html.js .shop-series-grid [data-reveal]:nth-child(2) {
    transition-delay: 90ms;
  }

  html.js .shelf-grid [data-reveal]:nth-child(5),
  html.js .shelf-grid [data-reveal]:nth-child(6) {
    transition-delay: 120ms;
  }

  html.js .shelf-grid [data-reveal]:nth-child(7),
  html.js .shelf-grid [data-reveal]:nth-child(8) {
    transition-delay: 210ms;
  }
}

/* ---------- Responsive + motion guards ---------- */

@media (max-width: 1020px) {
  .route-ghost {
    font-size: 5.5rem;
  }
}

@media (max-width: 640px) {
  .hero::after,
  .section > .section-header::before,
  .drop-feature::after {
    content: none;
  }

  .shelf-new {
    font-size: 0.56rem;
    right: -2.9rem;
    top: 1rem;
    width: 8.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cardfan,
  .drop-feature-cover {
    transform: none !important;
  }

  .cardfan-card::after,
  .shelf-card-cover::before,
  .catalog-card > a:first-child::before,
  .button.hot::after {
    content: none;
  }
}

/* ---------- Blog index: featured card goes horizontal, date line stops stretching ---------- */

.blog-card-body .article-meta {
  flex: 0 0 auto;
  margin-bottom: 0.2rem;
}

@media (min-width: 1021px) {
  .blog-card.featured {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .blog-card.featured .blog-card-media {
    height: 100%;
    min-height: 100%;
  }

  .blog-card.featured .blog-card-media img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
  }

  .blog-card.featured .blog-card-body {
    justify-content: center;
    padding: 1.6rem 1.8rem;
  }

  .blog-card.featured .blog-card-body h3 {
    font-size: 1.5rem;
  }

  .blog-card.featured .blog-card-body p:not(.article-meta) {
    flex: 0 0 auto;
    font-size: 1rem;
  }
}

/* ---------- Comments: heading in the narrow column, form gets the room ---------- */

.comments-panel {
  align-items: start;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}

.comments-panel > div:first-child {
  position: sticky;
  top: 6rem;
}

.comments-panel h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.comment-widget,
.comments-fallback {
  background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 6%, var(--panel)), var(--panel) 50%);
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  position: relative;
}

.comment-widget::before {
  background: linear-gradient(90deg, var(--cyan), color-mix(in srgb, var(--cyan) 40%, transparent) 55%, transparent);
  content: "";
  height: 3px;
  inset: 0 0 auto 0;
  position: absolute;
}

.comment-status {
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
}

.comment-form {
  gap: 1.1rem 1.4rem;
}

.comment-form input,
.comment-form textarea {
  border-radius: 4px;
  font-size: 1rem;
  padding: 0.85rem 0.95rem;
}

.comment-form textarea {
  min-height: 9rem;
  resize: vertical;
}

/* The spam honeypot was visible: .comment-form label (0,1,1) outranked .comment-honeypot (0,1,0). */
.comment-form .comment-honeypot {
  display: none !important;
}

.comment-form-footer {
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}

.comment-form-footer p {
  color: var(--muted);
  max-width: 26rem;
}

.comment-item {
  border-bottom: 1px solid var(--line);
  padding: 0.2rem 0 1.1rem;
}

.comment-item-header strong {
  color: var(--paper);
}

@media (max-width: 1020px) {
  .comments-panel > div:first-child {
    position: static;
  }
}

/* @blog-themes:start */
/* ==========================================================================
   BLOG SERIES THEMES (2026-10-04)
   Two essay series get their own room. Everything hangs off the section ids
   on the blog index and each page's canonical URL, so regenerated pages pick
   the theme up with no markup change.
     Scale Wars                    deep space: starfield, orbit, instrument cards
     The Emperor Has Some Clothes  lacquer red and gold: lattice, fret, seal numerals
   ========================================================================== */

:root {
  --sw-glass: rgba(9, 14, 32, 0.8);
  --em-red: #d92b20;
  --em-red-soft: #ff7059;
  --em-gold: #f0c05a;
  --em-cream: #fbe9c8;
  --em-lacquer: #170607;
  --font-cjk: "Kaiti SC", "STKaiti", "KaiTi", "KaiTi_GB2312", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --sw-stars-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Ccircle cx='449.4' cy='210.9' r='0.84' fill='%23fff' opacity='0.50'/%3E%3Ccircle cx='447.6' cy='384.5' r='0.89' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='283.3' cy='401.5' r='0.74' fill='%23bfe6ff' opacity='0.66'/%3E%3Ccircle cx='270.2' cy='354.4' r='0.82' fill='%23fff' opacity='0.58'/%3E%3Ccircle cx='369.4' cy='240.9' r='0.70' fill='%23bfe6ff' opacity='0.68'/%3E%3Ccircle cx='288.1' cy='399.7' r='0.44' fill='%23ffe2c2' opacity='0.39'/%3E%3Ccircle cx='344.8' cy='24.0' r='0.36' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='217.0' cy='286.4' r='0.79' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='41.9' cy='39.5' r='0.59' fill='%23fff' opacity='0.42'/%3E%3Ccircle cx='190.7' cy='133.4' r='0.70' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='353.3' cy='325.5' r='0.61' fill='%23fff' opacity='0.40'/%3E%3Ccircle cx='214.1' cy='497.5' r='0.84' fill='%23bfe6ff' opacity='0.35'/%3E%3Ccircle cx='243.6' cy='355.3' r='0.63' fill='%23ffe2c2' opacity='0.73'/%3E%3Ccircle cx='409.0' cy='485.9' r='0.44' fill='%23fff' opacity='0.29'/%3E%3Ccircle cx='506.3' cy='282.5' r='0.55' fill='%23bfe6ff' opacity='0.66'/%3E%3Ccircle cx='146.8' cy='322.8' r='0.58' fill='%23fff' opacity='0.32'/%3E%3Ccircle cx='475.6' cy='402.8' r='0.75' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='38.5' cy='448.7' r='0.54' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='264.3' cy='519.2' r='0.40' fill='%23fff' opacity='0.40'/%3E%3Ccircle cx='90.2' cy='80.4' r='0.64' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='47.0' cy='28.5' r='0.36' fill='%23bfe6ff' opacity='0.61'/%3E%3Ccircle cx='512.7' cy='189.5' r='0.37' fill='%23bfe6ff' opacity='0.49'/%3E%3Ccircle cx='502.8' cy='404.8' r='0.41' fill='%23bfe6ff' opacity='0.49'/%3E%3Ccircle cx='41.8' cy='166.8' r='0.47' fill='%23fff' opacity='0.27'/%3E%3Ccircle cx='407.6' cy='19.1' r='0.86' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='322.2' cy='457.9' r='0.82' fill='%23fff' opacity='0.72'/%3E%3Ccircle cx='253.6' cy='5.6' r='0.54' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='155.3' cy='265.8' r='0.47' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='63.7' cy='471.4' r='0.75' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='165.6' cy='201.9' r='0.82' fill='%23fff' opacity='0.53'/%3E%3Ccircle cx='0.4' cy='252.9' r='0.73' fill='%23bfe6ff' opacity='0.71'/%3E%3Ccircle cx='157.9' cy='38.3' r='0.39' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='2.8' cy='222.1' r='0.69' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='194.2' cy='425.3' r='0.65' fill='%23fff' opacity='0.56'/%3E%3Ccircle cx='321.1' cy='404.0' r='0.63' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='0.5' cy='416.2' r='0.84' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='355.4' cy='212.1' r='0.42' fill='%23ffe2c2' opacity='0.26'/%3E%3Ccircle cx='38.3' cy='279.2' r='0.62' fill='%23bfe6ff' opacity='0.55'/%3E%3Ccircle cx='442.0' cy='280.9' r='0.43' fill='%23fff' opacity='0.37'/%3E%3Ccircle cx='61.3' cy='506.7' r='0.75' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='37.3' cy='26.2' r='0.64' fill='%23fff' opacity='0.26'/%3E%3Ccircle cx='392.1' cy='460.1' r='0.87' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='173.7' cy='235.5' r='0.68' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='249.0' cy='181.5' r='0.80' fill='%23fff' opacity='0.31'/%3E%3Ccircle cx='485.6' cy='232.7' r='0.55' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='258.1' cy='482.4' r='0.83' fill='%23fff' opacity='0.49'/%3E%3Ccircle cx='278.4' cy='97.7' r='0.58' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='199.4' cy='503.5' r='0.36' fill='%23fff' opacity='0.41'/%3E%3Ccircle cx='66.0' cy='53.3' r='0.85' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='233.0' cy='448.6' r='0.79' fill='%23bfe6ff' opacity='0.29'/%3E%3Ccircle cx='177.3' cy='86.4' r='0.74' fill='%23fff' opacity='0.27'/%3E%3Ccircle cx='383.8' cy='345.5' r='0.67' fill='%23fff' opacity='0.59'/%3E%3Ccircle cx='116.6' cy='16.0' r='0.85' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='256.4' cy='371.4' r='0.88' fill='%23ffe2c2' opacity='0.74'/%3E%3Ccircle cx='190.1' cy='66.7' r='0.46' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='418.8' cy='68.5' r='0.70' fill='%23ffe2c2' opacity='0.48'/%3E%3Ccircle cx='189.8' cy='143.9' r='0.47' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='419.9' cy='400.6' r='0.65' fill='%23fff' opacity='0.40'/%3E%3Ccircle cx='357.9' cy='112.1' r='0.42' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='21.4' cy='150.1' r='0.63' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='15.7' cy='184.9' r='0.80' fill='%23fff' opacity='0.37'/%3E%3Ccircle cx='39.4' cy='510.7' r='0.42' fill='%23fff' opacity='0.29'/%3E%3Ccircle cx='316.5' cy='66.0' r='0.58' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='416.7' cy='448.3' r='0.62' fill='%23fff' opacity='0.49'/%3E%3C/svg%3E");
  --sw-stars-bright: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='860' height='860'%3E%3Ccircle cx='619.2' cy='288.6' r='1.25' fill='%23fff' opacity='0.89'/%3E%3Cpath d='M613.3 288.6H625.0M619.2 282.7V294.4' stroke='%23fff' stroke-width='.5' opacity='.55'/%3E%3Ccircle cx='73.0' cy='608.7' r='1.04' fill='%239fe4ff' opacity='0.81'/%3E%3Cpath d='M63.7 608.7H82.3M73.0 599.4V618.0' stroke='%239fe4ff' stroke-width='.5' opacity='.55'/%3E%3Ccircle cx='669.6' cy='669.3' r='1.68' fill='%239fe4ff' opacity='0.79'/%3E%3Ccircle cx='137.2' cy='170.1' r='1.10' fill='%239fe4ff' opacity='0.72'/%3E%3Ccircle cx='103.4' cy='605.2' r='1.41' fill='%23fff' opacity='0.73'/%3E%3Ccircle cx='77.2' cy='450.7' r='1.38' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='120.7' cy='730.1' r='1.04' fill='%23ffd9a8' opacity='0.82'/%3E%3Ccircle cx='748.3' cy='735.5' r='1.23' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='771.5' cy='379.6' r='1.00' fill='%23fff' opacity='0.86'/%3E%3Ccircle cx='787.7' cy='352.6' r='1.66' fill='%239fe4ff' opacity='0.97'/%3E%3Ccircle cx='193.3' cy='474.5' r='1.03' fill='%23fff' opacity='0.89'/%3E%3Cpath d='M187.5 474.5H199.0M193.3 468.8V480.3' stroke='%23fff' stroke-width='.5' opacity='.55'/%3E%3Ccircle cx='396.0' cy='416.6' r='1.01' fill='%239fe4ff' opacity='0.87'/%3E%3Ccircle cx='735.9' cy='274.0' r='1.22' fill='%23fff' opacity='0.89'/%3E%3Ccircle cx='381.9' cy='264.9' r='1.07' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='497.4' cy='391.3' r='1.06' fill='%23ffd9a8' opacity='0.80'/%3E%3Cpath d='M489.2 391.3H505.6M497.4 383.1V399.4' stroke='%23ffd9a8' stroke-width='.5' opacity='.55'/%3E%3Ccircle cx='558.8' cy='445.2' r='1.28' fill='%239fe4ff' opacity='0.89'/%3E%3Ccircle cx='525.9' cy='186.7' r='1.41' fill='%23fff' opacity='0.89'/%3E%3Cpath d='M519.3 186.7H532.6M525.9 180.1V193.3' stroke='%23fff' stroke-width='.5' opacity='.55'/%3E%3Ccircle cx='537.0' cy='451.8' r='1.26' fill='%23fff' opacity='0.82'/%3E%3Cpath d='M530.9 451.8H543.2M537.0 445.6V457.9' stroke='%23fff' stroke-width='.5' opacity='.55'/%3E%3Ccircle cx='826.2' cy='554.5' r='1.07' fill='%23ffd9a8' opacity='0.80'/%3E%3Ccircle cx='674.6' cy='427.1' r='1.61' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='165.9' cy='494.1' r='1.23' fill='%239fe4ff' opacity='0.99'/%3E%3Ccircle cx='308.7' cy='219.5' r='1.56' fill='%239fe4ff' opacity='0.95'/%3E%3C/svg%3E");
  --sw-orbit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 620'%3E%3Cdefs%3E%3CradialGradient id='p' cx='30%25' cy='28%25' r='80%25'%3E%3Cstop offset='0' stop-color='%233c5a96'/%3E%3Cstop offset='.45' stop-color='%23121a3a'/%3E%3Cstop offset='1' stop-color='%2303040c'/%3E%3C/radialGradient%3E%3CradialGradient id='h' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='.72' stop-color='%235adcff' stop-opacity='0'/%3E%3Cstop offset='.86' stop-color='%235adcff' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%235adcff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='rotate(-16 600 250)' fill='none'%3E%3Cellipse cx='600' cy='250' rx='420' ry='118' stroke='%235adcff' stroke-opacity='.16' stroke-dasharray='2 9'/%3E%3Cellipse cx='600' cy='250' rx='300' ry='84' stroke='%235adcff' stroke-opacity='.34'/%3E%3C/g%3E%3Ccircle cx='600' cy='250' r='188' fill='url(%23h)'/%3E%3Ccircle cx='600' cy='250' r='150' fill='url(%23p)'/%3E%3Ccircle cx='600' cy='250' r='150' fill='none' stroke='%235adcff' stroke-opacity='.3'/%3E%3Cg transform='rotate(-16 600 250)' fill='none'%3E%3Cpath d='M300 250A300 84 0 0 0 900 250' stroke='%235adcff' stroke-opacity='.5'/%3E%3Cpath d='M180 250A420 118 0 0 0 1020 250' stroke='%235adcff' stroke-opacity='.2' stroke-dasharray='2 9'/%3E%3Ccircle cx='430' cy='319' r='3.2' fill='%23eaf9ff'/%3E%3Ccircle cx='430' cy='319' r='9' stroke='%235adcff' stroke-opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --em-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23f0c05a' stroke-opacity='0.09' stroke-width='1.2'%3E%3Cpath d='M0 40H30M50 40H80M40 0V30M40 50V80M10 0H70M10 80H70M0 10V70M80 10V70'/%3E%3Crect x='30' y='30' width='20' height='20'/%3E%3Cpath d='M0 10H10V0M70 0V10H80M80 70H70V80M10 80V70H0'/%3E%3C/g%3E%3C/svg%3E");
  --em-lattice-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23f0c05a' stroke-opacity='0.3' stroke-width='1.2'%3E%3Cpath d='M0 40H30M50 40H80M40 0V30M40 50V80M10 0H70M10 80H70M0 10V70M80 10V70'/%3E%3Crect x='30' y='30' width='20' height='20'/%3E%3Cpath d='M0 10H10V0M70 0V10H80M80 70H70V80M10 80V70H0'/%3E%3C/g%3E%3C/svg%3E");
  --em-fret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Cpath d='M0 13H22M19 13V1H5V9H13V5H9' fill='none' stroke='%23f0c05a' stroke-opacity='0.55' stroke-width='1.4'/%3E%3C/svg%3E");
  --em-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f6c84c' d='M12 2 14.35 8.76 21.51 8.91 15.8 13.24 17.88 20.09 12 16 6.12 20.09 8.2 13.24 2.49 8.91 9.65 8.76Z'/%3E%3C/svg%3E");
}

/* ---------- Scale Wars: section on the blog index ---------- */

#scale-wars-essays {
  --lane: var(--cyan);
  background:
    radial-gradient(48rem 28rem at 88% 4%, rgba(157, 107, 255, 0.2), transparent 62%),
    radial-gradient(42rem 26rem at 2% 100%, rgba(90, 220, 255, 0.12), transparent 64%),
    var(--sw-stars-dim) 0 0 / 520px 520px,
    linear-gradient(180deg, #03040c 0%, #070b1c 52%, #03040c 100%);
  border-bottom: 1px solid rgba(90, 220, 255, 0.2);
  border-top: 1px solid rgba(90, 220, 255, 0.2);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

#scale-wars-essays::before {
  animation: sw-twinkle 7s ease-in-out infinite alternate;
  background: var(--sw-stars-bright) 0 0 / 860px 860px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}

#scale-wars-essays::after {
  background: var(--sw-orbit) right top / contain no-repeat;
  content: "";
  height: 620px;
  pointer-events: none;
  position: absolute;
  right: -300px;
  top: -250px;
  width: 900px;
  z-index: -1;
}

@keyframes sw-twinkle {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

#scale-wars-essays .eyebrow::before,
:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .eyebrow::before {
  background: transparent;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  box-shadow: var(--glow-cyan), inset 0 0 6px rgba(90, 220, 255, 0.6);
  transform: none;
}

#scale-wars-essays .section-header h2 {
  text-shadow: 0 0 46px rgba(90, 220, 255, 0.3);
}

/* instrument scale under the header */
#scale-wars-essays .section-header::after {
  background:
    linear-gradient(90deg, var(--cyan), rgba(90, 220, 255, 0)) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(90, 220, 255, 0.85) 0 1px, transparent 1px 60px) left bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(90, 220, 255, 0.5) 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat;
  content: "";
  grid-column: 1 / -1;
  height: 12px;
  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 88%);
  mask-image: linear-gradient(90deg, #000 20%, transparent 88%);
}

#scale-wars-essays .blog-grid {
  counter-reset: sw-essay;
}

#scale-wars-essays .blog-card {
  background: linear-gradient(165deg, rgba(90, 220, 255, 0.1), var(--sw-glass) 42%);
  border-color: rgba(90, 220, 255, 0.2);
  counter-increment: sw-essay;
}

/* viewfinder corners over each banner */
#scale-wars-essays .blog-card-media::after {
  --c: rgba(90, 220, 255, 0.85);
  background:
    linear-gradient(var(--c), var(--c)) left 12px top 12px / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left 12px top 12px / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) right 12px top 12px / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right 12px top 12px / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) left 12px bottom 12px / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left 12px bottom 12px / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) right 12px bottom 12px / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right 12px bottom 12px / 1px 18px no-repeat,
    linear-gradient(180deg, transparent 58%, rgba(3, 4, 12, 0.55));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

#scale-wars-essays .blog-card-body .article-meta {
  color: var(--cyan);
}

#scale-wars-essays .blog-card-body .article-meta::after {
  color: var(--soft);
  content: " / " counter(sw-essay, decimal-leading-zero);
}

/* ---------- Scale Wars: blog front door + essay pages ---------- */

:root:has(> head > link[rel="canonical"][href$="slopdealer.com/blog/"]) .page-hero {
  --hero-image: url("articles/split-metabolism/the-relay-layer-owns-the-map/banner.webp");
  --hero-overlay:
    linear-gradient(90deg, rgba(3, 4, 12, 0.92) 0%, rgba(3, 4, 12, 0.62) 42%, rgba(3, 4, 12, 0.08) 100%),
    linear-gradient(180deg, rgba(3, 4, 12, 0.05), rgba(3, 4, 12, 0.55));
  --hero-position: center 38%;
}

:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) body {
  background:
    radial-gradient(60rem 34rem at 94% 2%, rgba(157, 107, 255, 0.13), transparent 62%),
    radial-gradient(56rem 34rem at 2% 38%, rgba(90, 220, 255, 0.07), transparent 62%),
    var(--sw-stars-bright) 0 0 / 860px 860px,
    var(--sw-stars-dim) 0 0 / 520px 520px,
    linear-gradient(180deg, #03040c 0%, #070b1c 45%, #03040c 100%);
  background-attachment: scroll;
}

:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .page-hero {
  border-bottom-color: rgba(90, 220, 255, 0.35);
  box-shadow: 0 1px 0 rgba(90, 220, 255, 0.12), 0 18px 60px -30px rgba(90, 220, 255, 0.5);
}

:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .article {
  counter-reset: sw-fig;
}

:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .article > .article-meta {
  color: var(--cyan);
}

/* small orbit mark ahead of every section heading */
:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .article h2::before {
  background:
    radial-gradient(circle at 6px 50%, transparent 0 3px, var(--cyan) 3.2px 4.6px, transparent 5px),
    linear-gradient(90deg, var(--cyan), transparent) 16px 50% / calc(100% - 16px) 1px no-repeat;
  content: "";
  display: block;
  height: 12px;
  margin-bottom: 0.9rem;
  width: 5.5rem;
}

:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .article li::marker {
  color: var(--cyan);
}

:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .quick-version {
  background: linear-gradient(165deg, rgba(90, 220, 255, 0.08), var(--sw-glass) 46%);
  border-color: rgba(90, 220, 255, 0.22);
  border-left-color: var(--cyan);
}

:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .article-figure {
  border-color: rgba(90, 220, 255, 0.28);
  counter-increment: sw-fig;
  position: relative;
}

:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .article-figure::after {
  --c: rgba(90, 220, 255, 0.85);
  background:
    linear-gradient(var(--c), var(--c)) left 12px top 12px / 20px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left 12px top 12px / 1px 20px no-repeat,
    linear-gradient(var(--c), var(--c)) right 12px top 12px / 20px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right 12px top 12px / 1px 20px no-repeat;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .article-figure figcaption {
  background: rgba(9, 14, 32, 0.92);
  border-top-color: rgba(90, 220, 255, 0.28);
}

:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .article-figure figcaption::before {
  color: var(--cyan);
  content: "FIG " counter(sw-fig, decimal-leading-zero) " / ";
}

:root:has(> head > link[rel="canonical"][href*="/blog/scale-wars/"]) .aside-box {
  background: linear-gradient(170deg, rgba(90, 220, 255, 0.08), var(--sw-glass) 40%);
  border-color: rgba(90, 220, 255, 0.24);
}

/* ---------- The Emperor Has Some Clothes: section (blog index + series index) ---------- */

#the-emperor-has-some-clothes {
  --lane: var(--em-red);
  background:
    radial-gradient(52rem 30rem at 8% 0%, rgba(217, 43, 32, 0.3), transparent 62%),
    radial-gradient(46rem 28rem at 100% 100%, rgba(240, 192, 90, 0.1), transparent 60%),
    linear-gradient(180deg, #150506 0%, #1c0708 50%, #100405 100%);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

/* carved lattice screen, fading out toward the reading side */
#the-emperor-has-some-clothes::before {
  background: var(--em-lattice) 0 0 / 80px 80px;
  content: "";
  inset: 0;
  -webkit-mask-image: linear-gradient(100deg, transparent 12%, #000 80%);
  mask-image: linear-gradient(100deg, transparent 12%, #000 80%);
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

/* red rule with a star at the centre */
#the-emperor-has-some-clothes::after,
:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .page-hero::after {
  background:
    var(--em-star) center / 22px 22px no-repeat,
    radial-gradient(closest-side, var(--em-lacquer) 62%, transparent) center / 64px 100% no-repeat,
    linear-gradient(var(--em-red), var(--em-red)) center / 100% 2px no-repeat;
  content: "";
  height: 30px;
  inset: 0 0 auto 0;
  pointer-events: none;
  position: absolute;
}

#the-emperor-has-some-clothes .eyebrow,
:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .eyebrow {
  color: var(--em-gold);
}

#the-emperor-has-some-clothes .eyebrow::before,
:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .eyebrow::before {
  background: var(--em-red);
  border-radius: 1px;
  box-shadow: 0 0 18px rgba(217, 43, 32, 0.75);
  transform: none;
}

#the-emperor-has-some-clothes .eyebrow::after,
:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .eyebrow::after {
  background: linear-gradient(90deg, rgba(240, 192, 90, 0.85), transparent);
}

#the-emperor-has-some-clothes .section-header h2 {
  max-width: 13ch;
  text-shadow: 0 0 46px rgba(217, 43, 32, 0.45);
}

/* seal stamp */
#the-emperor-has-some-clothes .section-header h2::after,
:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .page-hero::before {
  background: var(--em-red);
  border-radius: 0.08em;
  box-shadow: inset 0 0 0 0.06em var(--em-red), inset 0 0 0 0.1em rgba(251, 233, 200, 0.8), 0 0 34px rgba(217, 43, 32, 0.45);
  color: var(--em-cream);
  content: "帝";
  content: "帝" / "";
  display: inline-grid;
  font-family: var(--font-cjk);
  font-weight: 700;
  height: 1.5em;
  line-height: 1;
  place-items: center;
  text-shadow: none;
  width: 1.5em;
}

#the-emperor-has-some-clothes .section-header h2::after {
  font-size: 0.56em;
  margin-left: 0.45em;
  transform: rotate(-5deg) translateY(-0.16em);
  vertical-align: middle;
}

/* fret line under the header */
#the-emperor-has-some-clothes .section-header::after {
  background: var(--em-fret) left center / 22px 14px repeat-x;
  content: "";
  grid-column: 1 / -1;
  height: 14px;
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent 90%);
  mask-image: linear-gradient(90deg, #000 25%, transparent 90%);
}

#the-emperor-has-some-clothes .blog-grid {
  counter-reset: em-essay;
}

#the-emperor-has-some-clothes .blog-card {
  background: linear-gradient(160deg, rgba(217, 43, 32, 0.18), rgba(23, 6, 7, 0.95) 50%);
  border-color: rgba(240, 192, 90, 0.22);
  counter-increment: em-essay;
}

#the-emperor-has-some-clothes .blog-card::before {
  background: linear-gradient(90deg, var(--em-red), var(--em-gold) 58%, transparent);
}

#the-emperor-has-some-clothes .blog-card-media img {
  border-bottom: 1px solid rgba(240, 192, 90, 0.22);
}

#the-emperor-has-some-clothes .blog-card-body {
  padding-left: 4.9rem;
}

/* essay number as a vertical seal */
#the-emperor-has-some-clothes .blog-card-body::before {
  background: var(--em-red);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--em-red), inset 0 0 0 3px rgba(251, 233, 200, 0.7), 0 0 22px rgba(217, 43, 32, 0.35);
  color: var(--em-cream);
  content: counter(em-essay, cjk-ideographic);
  content: counter(em-essay, cjk-ideographic) / "";
  font-family: var(--font-cjk);
  font-size: 1.3rem;
  font-weight: 700;
  left: 1.15rem;
  line-height: 2.6rem;
  min-height: 2.6rem;
  padding: 0.4rem 0;
  position: absolute;
  text-align: center;
  top: 1.2rem;
  width: 2.6rem;
  writing-mode: vertical-rl;
}

#the-emperor-has-some-clothes .blog-card-body .article-meta {
  display: none;
}

#the-emperor-has-some-clothes .blog-card:hover h3 {
  color: var(--em-gold);
}

#the-emperor-has-some-clothes .text-link {
  color: var(--em-gold);
}

#the-emperor-has-some-clothes .text-link:hover {
  color: var(--em-red-soft);
}

/* ---------- The Emperor Has Some Clothes: series index + essay pages ---------- */

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) body {
  background:
    radial-gradient(60rem 34rem at 6% -6%, rgba(217, 43, 32, 0.16), transparent 60%),
    radial-gradient(56rem 34rem at 98% 30%, rgba(240, 192, 90, 0.05), transparent 62%),
    linear-gradient(180deg, #0c0506 0%, #120708 45%, #0a0405 100%);
  background-attachment: fixed;
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .page-hero {
  --hero-image: var(--em-lattice-strong);
  --hero-overlay:
    radial-gradient(46rem 26rem at 6% 12%, rgba(217, 43, 32, 0.36), transparent 64%),
    linear-gradient(100deg, #150506 34%, rgba(21, 5, 6, 0.55) 72%, rgba(21, 5, 6, 0.25) 100%);
  background-color: #150506;
  background-size: auto, auto, 80px 80px;
  border-bottom: 0;
  overflow: hidden;
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .page-hero::after {
  inset: auto 0 0 0;
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .page-hero::before {
  font-size: clamp(4rem, 9vw, 7.5rem);
  opacity: 0.94;
  position: absolute;
  right: max(1.5rem, calc((100vw - var(--max)) / 2));
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .page-hero.hero-emperor {
  --hero-overlay:
    radial-gradient(46rem 26rem at 4% 10%, rgba(217, 43, 32, 0.3), transparent 64%),
    linear-gradient(90deg, rgba(16, 4, 5, 0.97) 0%, rgba(16, 4, 5, 0.88) 34%, rgba(16, 4, 5, 0.3) 72%, rgba(16, 4, 5, 0.55) 100%),
    linear-gradient(180deg, rgba(16, 4, 5, 0.1), rgba(16, 4, 5, 0.7));
  --hero-position: center 40%;
  background-size: cover;
}

/* on a print, the seal sits in the corner like a collector's mark */
:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .page-hero.hero-emperor::before {
  bottom: 2.7rem;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  top: auto;
  transform: rotate(-6deg);
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .page-hero h1 {
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 54px rgba(217, 43, 32, 0.5);
}

/* the series page already names itself in the hero */
:root:has(> head > link[rel="canonical"][href$="/blog/the-emperor-has-some-clothes/"]) #the-emperor-has-some-clothes {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

:root:has(> head > link[rel="canonical"][href$="/blog/the-emperor-has-some-clothes/"]) #the-emperor-has-some-clothes::after,
:root:has(> head > link[rel="canonical"][href$="/blog/the-emperor-has-some-clothes/"]) #the-emperor-has-some-clothes > .section-header {
  display: none;
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .article > .article-meta {
  color: var(--em-gold);
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .article a {
  color: var(--em-red-soft);
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .article a:hover {
  color: var(--em-gold);
}

/* opening letter set like a seal */
:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .dispatch-article > p:nth-of-type(2)::first-letter {
  background: var(--em-red);
  border: 1px solid rgba(251, 233, 200, 0.65);
  border-radius: 3px;
  color: var(--em-cream);
  float: left;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.95;
  margin: 0.35rem 0.75rem 0 0;
  padding: 0.5rem 0.65rem 0.35rem;
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .article-figure {
  border-color: rgba(240, 192, 90, 0.3);
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .dispatch-article::after {
  background: var(--em-fret) left center / 22px 14px repeat-x;
  content: "";
  display: block;
  height: 14px;
  margin-top: 3rem;
  width: 132px;
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .aside-box {
  background: linear-gradient(170deg, rgba(217, 43, 32, 0.16), rgba(23, 6, 7, 0.94) 42%);
  border-color: rgba(240, 192, 90, 0.26);
  border-top: 2px solid var(--em-red);
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .aside-box h3 {
  color: var(--em-gold);
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .aside-box a:hover {
  color: var(--em-gold);
}

/* ---------- The Emperor Has Some Clothes: the book ---------- */

.emperor-book {
  align-items: center;
  background: linear-gradient(120deg, rgba(217, 43, 32, 0.24), rgba(23, 6, 7, 0.95) 48%);
  border: 1px solid rgba(240, 192, 90, 0.3);
  border-left: 3px solid var(--em-red);
  display: grid;
  gap: 1.2rem 1.8rem;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  padding: 1.2rem 1.6rem 1.2rem 1.3rem;
}

.emperor-book-cover img {
  border: 1px solid rgba(240, 192, 90, 0.5);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
  transition: transform 200ms ease, box-shadow 200ms ease;
  width: 100%;
}

.emperor-book-cover:hover img {
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.5);
  transform: translate(-3px, -3px);
}

.emperor-book .eyebrow {
  margin-bottom: 0.6rem;
}

.emperor-book h3 {
  font-size: 1.4rem;
}

.emperor-book p:not(.eyebrow) {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-top: 0.4rem;
  max-width: 46rem;
}

.emperor-book .button {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .emperor-book {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .emperor-book .button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .book-cta img {
  border-color: rgba(240, 192, 90, 0.5);
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .lane-tag {
  border-color: rgba(240, 192, 90, 0.55);
  color: var(--em-gold);
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .aside-box .text-link {
  color: var(--em-gold);
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .aside-box .text-link:hover {
  color: var(--em-red-soft);
}

:root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .aside-box .book-cta {
  border-bottom: 1px solid rgba(240, 192, 90, 0.2);
  padding-bottom: 1.2rem;
}

/* ---------- Series picker on the blog index ---------- */

.series-picker-card[href="#scale-wars-essays"] {
  background:
    radial-gradient(14rem 8rem at 100% 0%, rgba(157, 107, 255, 0.3), transparent 70%),
    var(--sw-stars-bright) 30% 20% / 430px 430px,
    var(--sw-stars-dim) 0 0 / 300px 300px,
    #050818;
  border-color: rgba(90, 220, 255, 0.4);
}

.series-picker-card[href="#scale-wars-essays"]:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.series-picker-card[href="#the-emperor-has-some-clothes"] {
  background:
    linear-gradient(100deg, var(--em-lacquer) 30%, rgba(23, 6, 7, 0.5)),
    var(--em-lattice-strong) right center / 60px 60px,
    var(--em-lacquer);
  border-color: rgba(240, 192, 90, 0.4);
  border-top: 2px solid var(--em-red);
}

.series-picker-card[href="#the-emperor-has-some-clothes"]:hover {
  border-color: var(--em-gold);
  border-top-color: var(--em-red);
  color: var(--em-gold);
}

/* ---------- Layout breakpoints ---------- */

@media (min-width: 1021px) {
  /* lead essay: text left, lattice window right when there is no picture */
  #the-emperor-has-some-clothes .blog-card.featured:not(:has(.blog-card-media)) {
    background:
      linear-gradient(90deg, #1b0708 0%, #1b0708 50%, rgba(27, 7, 8, 0) 100%),
      var(--em-lattice-strong) right center / 80px 80px,
      radial-gradient(30rem 18rem at 94% 50%, rgba(217, 43, 32, 0.5), transparent 70%),
      var(--em-lacquer);
    grid-template-columns: minmax(0, 1fr);
  }

  #the-emperor-has-some-clothes .blog-card.featured:not(:has(.blog-card-media)) .blog-card-body {
    padding-right: 40%;
  }

  /* lead essay: the seal sits above the title instead of beside it */
  #the-emperor-has-some-clothes .blog-card.featured .blog-card-body {
    padding-left: 1.8rem;
  }

  #the-emperor-has-some-clothes .blog-card.featured .blog-card-body::before {
    align-self: flex-start;
    font-size: 1.9rem;
    line-height: 3.5rem;
    margin-bottom: 0.5rem;
    min-height: 3.5rem;
    position: static;
    width: 3.5rem;
  }
}

@media (max-width: 820px) {
  #scale-wars-essays::after {
    opacity: 0.6;
    right: -420px;
  }

  :root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .page-hero::before,
  :root:has(> head > link[rel="canonical"][href*="/blog/the-emperor-has-some-clothes/"]) .page-hero.hero-emperor::before {
    bottom: auto;
    font-size: 2.3rem;
    right: 1.25rem;
    top: 1.4rem;
    transform: rotate(-6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #scale-wars-essays::before {
    animation: none;
  }
}
/* @blog-themes:end */