/* ==========================================================================
   Sticker Slab — Components
   Every color/shape value references a token in vars.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sticker card — the signature surface treatment
   -------------------------------------------------------------------------- */
.sticker-card {
  background: var(--ts-surface);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius);
  box-shadow: var(--ts-shadow-sticker);
  transition: transform var(--ts-t-fast) var(--ts-ease),
              box-shadow var(--ts-t-fast) var(--ts-ease);
}
.sticker-card--flush {
  padding: 0;
  overflow: hidden;
}
.sticker-card--pad {
  padding: var(--ts-space-5);
}

/* Interactive sticker cards depress on active */
a.sticker-card,
button.sticker-card,
.sticker-card--interactive {
  display: block;
  color: inherit;
}
a.sticker-card:hover,
button.sticker-card:hover,
.sticker-card--interactive:hover {
  transform: translate(calc(var(--ts-shadow-x) * -0.5), calc(var(--ts-shadow-y) * -0.25));
}
a.sticker-card:active,
button.sticker-card:active,
.sticker-card--interactive:active {
  transform: translate(var(--ts-shadow-x), var(--ts-shadow-y));
  box-shadow: 0 0 0 var(--ts-ink);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
/*  Lubalin Graph Demi ships with descender space baked into its em box, so
 *  text without descenders (SUBSCRIBE, NEWS) sits visually high in a
 *  flex-centered pill. Every heading-font pill below carries an asymmetric
 *  padding-top / padding-bottom to compensate. Adjust --ts-pill-nudge to
 *  taste — larger = text sits lower. */
:root { --ts-pill-nudge: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ts-space-2);
  padding-block: calc(var(--ts-space-3) + var(--ts-pill-nudge))
                 calc(var(--ts-space-3) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-5);
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-md);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: var(--ts-ink);
  background: var(--ts-surface);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius-pill);
  box-shadow: var(--ts-shadow-sticker);
  cursor: pointer;
  transition: transform var(--ts-t-fast) var(--ts-ease),
              box-shadow var(--ts-t-fast) var(--ts-ease),
              background var(--ts-t-fast) var(--ts-ease);
  white-space: nowrap;
}
.btn:hover { color: var(--ts-ink); }
.btn:active {
  transform: translate(var(--ts-shadow-x), var(--ts-shadow-y));
  box-shadow: 0 0 0 var(--ts-ink);
}
.btn--primary   { background: var(--ts-accent-1); color: var(--ts-surface); }
.btn--secondary { background: var(--ts-accent-2); color: var(--ts-ink); }
.btn--tertiary  { background: var(--ts-accent-3); color: var(--ts-ink); }
.btn--dark      { background: var(--ts-ink); color: var(--ts-surface); }
.btn--ghost     { background: transparent; }
.btn--primary:hover   { color: var(--ts-surface); }
.btn--dark:hover      { color: var(--ts-surface); }

.btn--sm {
  padding-block: calc(var(--ts-space-2) + var(--ts-pill-nudge))
                 calc(var(--ts-space-2) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-4);
  font-size: var(--ts-fs-sm);
}
.btn--lg {
  padding-block: calc(var(--ts-space-4) + var(--ts-pill-nudge))
                 calc(var(--ts-space-4) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-6);
  font-size: var(--ts-fs-lg);
}
.btn--block { display: flex; width: 100%; }

/* Icon-only round button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--ts-ink);
  background: var(--ts-surface);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: 50%;
  box-shadow: var(--ts-shadow-sticker-sm);
  transition: transform var(--ts-t-fast) var(--ts-ease),
              box-shadow var(--ts-t-fast) var(--ts-ease);
}
.icon-btn:hover { color: var(--ts-ink); }
.icon-btn:active {
  transform: translate(0, 3px);
  box-shadow: 0 0 0 var(--ts-ink);
}
.icon-btn svg,
.icon-btn img {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Pill navigation
   3-column grid: brand | centered links | right actions.
   Padding is fixed across all scroll states — the header does not shrink.
   -------------------------------------------------------------------------- */
.pill-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--ts-space-3);
  padding: var(--ts-space-3) var(--ts-space-4);
  background: var(--ts-surface);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius-pill);
  box-shadow: var(--ts-shadow-sticker);
}

.pill-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-3);
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-lg);
  color: var(--ts-ink);
}
.pill-nav__brand img,
.pill-nav__brand svg { height: 2rem; width: auto; }

.pill-nav__links {
  display: flex;
  gap: var(--ts-space-2);
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  flex-wrap: wrap;
}
.pill-nav__links li { margin: 0; padding: 0; }
.pill-nav__links a {
  display: inline-flex;
  align-items: center;
  padding-block: calc(var(--ts-space-3) + var(--ts-pill-nudge))
                 calc(var(--ts-space-3) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-4);
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-md);
  line-height: 1;
  color: var(--ts-ink);
  border-radius: var(--ts-radius-pill);
  transition: background var(--ts-t-fast) var(--ts-ease),
              color var(--ts-t-fast) var(--ts-ease);
  white-space: nowrap;
}
.pill-nav__links a:hover,
.pill-nav__links a[aria-current="page"],
.pill-nav__links .is-current > a {
  background: var(--ts-ink);
  color: var(--ts-surface);
}

.pill-nav__right {
  display: flex;
  align-items: center;
  gap: var(--ts-space-3);
}

.pill-nav__login {
  display: inline-flex;
  align-items: center;
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-md);
  line-height: 1;
  color: var(--ts-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  padding-block: calc(var(--ts-space-3) + var(--ts-pill-nudge))
                 calc(var(--ts-space-3) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-2);
  white-space: nowrap;
}
.pill-nav__login:hover {
  color: var(--ts-accent-1);
}

.pill-nav__cta {
  font-size: var(--ts-fs-md);
  padding-block: calc(var(--ts-space-3) + var(--ts-pill-nudge))
                 calc(var(--ts-space-3) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pill-nav__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: 50%;
  background: var(--ts-surface);
  box-shadow: var(--ts-shadow-sticker-sm);
}

/* Mobile menu drawer */
.mobile-menu {
  display: none;
  margin-top: var(--ts-space-3);
  padding: var(--ts-space-4);
  background: var(--ts-surface);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius);
  box-shadow: var(--ts-shadow-sticker);
}
.mobile-menu[data-open="true"] { display: block; }
.mobile-menu__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ts-space-4);
  display: grid;
  gap: var(--ts-space-2);
}
.mobile-menu__list a {
  display: block;
  padding: var(--ts-space-3) var(--ts-space-4);
  font-family: var(--ts-font-heading);
  font-weight: 700;
  color: var(--ts-ink);
  background: var(--ts-bg);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius);
  box-shadow: var(--ts-shadow-sticker-sm);
}
.mobile-menu__actions {
  display: grid;
  gap: var(--ts-space-3);
  margin-bottom: var(--ts-space-4);
  padding-bottom: var(--ts-space-4);
  border-bottom: 2px solid var(--ts-ink-line);
}
.mobile-menu__actions:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.mobile-menu__login {
  display: block;
  text-align: center;
  padding-block: calc(var(--ts-space-2) + var(--ts-pill-nudge))
                 calc(var(--ts-space-2) - var(--ts-pill-nudge));
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-md);
  color: var(--ts-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.mobile-menu__login:hover { color: var(--ts-accent-1); }

/* Mobile drawer CTA — mirror of .pill-nav__cta but scoped to the drawer
   (the pill-nav__cta class is hidden by the mobile media query).
   Explicit padding-block with --ts-pill-nudge so the Lubalin text sits
   at the visual center of the pill, matching the desktop SUBSCRIBE/UPGRADE. */
.mobile-menu__cta {
  padding-block: calc(var(--ts-space-3) + var(--ts-pill-nudge))
                 calc(var(--ts-space-3) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-5);
  font-size: var(--ts-fs-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mobile-menu__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-2);
}

@media (max-width: 900px) {
  .pill-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ts-space-3);
    padding: var(--ts-space-3) var(--ts-space-4);
  }
  .pill-nav__links,
  .pill-nav__login,
  .pill-nav__cta {
    display: none;
  }
  .pill-nav__toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   Sticker link-row
   Full-width row, used for sidebar Categories/Follow and mobile menu.
   NEVER used as a page's primary content layout.
   -------------------------------------------------------------------------- */
.sticker-row {
  display: flex;
  align-items: center;
  gap: var(--ts-space-3);
  padding: var(--ts-space-3) var(--ts-space-4);
  background: var(--ts-surface);
  color: var(--ts-ink);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius);
  box-shadow: var(--ts-shadow-sticker-sm);
  text-decoration: none;
  transition: transform var(--ts-t-fast) var(--ts-ease),
              box-shadow var(--ts-t-fast) var(--ts-ease);
}
.sticker-row:hover { color: var(--ts-ink); transform: translateY(-1px); }
.sticker-row:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--ts-ink);
}
.sticker-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ts-surface);
  color: var(--ts-ink);
  border: 2px solid var(--ts-ink);
  flex-shrink: 0;
}
.sticker-row__icon svg,
.sticker-row__icon img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  color: var(--ts-ink);
}
/* Icons stay black even on colored rows — override the row's currentColor. */
.color-cycle .sticker-row .sticker-row__icon,
.color-cycle .sticker-row .sticker-row__icon svg { color: var(--ts-ink); }

/* Follow list is always accent-1 blue with white text, regardless of
   position in the color-cycle scheme. The icon circle stays white
   with a black icon. `body.color-cycle` bumps specificity above the
   `.color-cycle .sticker-row:nth-child(4n+X)` cycle rules below. */
.follow-list .sticker-row,
body.color-cycle .follow-list .sticker-row,
body.color-cycle .follow-list .sticker-row:nth-child(n) {
  background: var(--ts-accent-1);
  color: var(--ts-surface);
}
.sticker-row__title {
  flex: 1;
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-md);
}
.sticker-row__trailing {
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-sm);
  color: var(--ts-ink-soft);
  padding: 0.15rem var(--ts-space-3);
  border-radius: var(--ts-radius-pill);
  border: 2px solid var(--ts-ink);
  background: var(--ts-bg);
}

/* Position-cycled color variants (opt-in via body class) */
.color-cycle .sticker-row:nth-child(4n+1) { background: var(--ts-accent-1); color: var(--ts-surface); }
.color-cycle .sticker-row:nth-child(4n+2) { background: var(--ts-accent-2); color: var(--ts-ink); }
.color-cycle .sticker-row:nth-child(4n+3) { background: var(--ts-accent-3); color: var(--ts-ink); }
.color-cycle .sticker-row:nth-child(4n+4) { background: var(--ts-accent-4); color: var(--ts-surface); }
.color-cycle .sticker-row:nth-child(4n+1) .sticker-row__trailing,
.color-cycle .sticker-row:nth-child(4n+4) .sticker-row__trailing {
  color: var(--ts-surface);
  background: rgba(255,255,255,0.15);
  border-color: var(--ts-surface);
}

/* --------------------------------------------------------------------------
   Gold lozenge — occasional promo callout
   -------------------------------------------------------------------------- */
.gold-lozenge {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-2);
  padding-block: calc(var(--ts-space-2) + var(--ts-pill-nudge))
                 calc(var(--ts-space-2) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-4);
  background: var(--ts-ink);
  color: var(--ts-gold);
  border: 2px solid var(--ts-gold);
  border-radius: var(--ts-radius-pill);
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  background-image: linear-gradient(
    180deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0)   50%,
    rgba(0,0,0,0.2)       100%
  );
  box-shadow: 0 2px 0 var(--ts-gold);
}

/* --------------------------------------------------------------------------
   Tag / category badge
   -------------------------------------------------------------------------- */
.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-2);
  padding-block: calc(0.2rem + var(--ts-pill-nudge))
                 calc(0.2rem - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-3);
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ts-ink);
  background: var(--ts-surface);
  border: 2px solid var(--ts-ink);
  border-radius: var(--ts-radius-pill);
  text-decoration: none;
}
.tag-badge:hover { color: var(--ts-ink); background: var(--ts-bg); }

.tag-badge--accent-1 { background: var(--ts-accent-1); color: var(--ts-surface); }
.tag-badge--accent-2 { background: var(--ts-accent-2); }
.tag-badge--accent-3 { background: var(--ts-accent-3); }
.tag-badge--accent-4 { background: var(--ts-accent-4); color: var(--ts-surface); }

.tag-badge__count {
  padding: 0 0.4rem;
  font-size: var(--ts-fs-xs);
  background: rgba(0,0,0,0.15);
  border-radius: var(--ts-radius-pill);
}

/* --------------------------------------------------------------------------
   Post card
   -------------------------------------------------------------------------- */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

/* Stretched-link: the title's anchor gets a pseudo-element that covers
   the entire card, so clicking anywhere on the card (padding, excerpt,
   meta whitespace) still navigates to the post. Real interactive
   children (the media anchor, tag badges, author name) sit above it
   via z-index so their own clicks still land. */
.post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.post-card__media,
.post-card__tags,
.post-card__meta a,
.post-card__meta strong {
  position: relative;
  z-index: 2;
}
.post-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ts-bg);
  border-bottom: var(--ts-border-w) solid var(--ts-ink);
  overflow: hidden;
}
.post-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--ts-t-med) var(--ts-ease);
}
.post-card:hover .post-card__media img { transform: scale(1.03); }
/* Fallback image (posts with no feature_image). Uses the same
   object-fit as regular feature images so the crop looks intentional
   even though the source is a static asset. */
.post-card__media--fallback {
  object-position: center;
}
.post-card__tags {
  position: absolute;
  top: var(--ts-space-3);
  left: var(--ts-space-3);
  display: flex;
  gap: var(--ts-space-2);
  flex-wrap: wrap;
}
.post-card__body {
  padding: var(--ts-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
  flex: 1;
}
.post-card__title {
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-xl);
  line-height: 1.2;
  margin: 0;
  color: var(--ts-ink);
}
.post-card__excerpt {
  color: var(--ts-ink-soft);
  font-size: var(--ts-fs-md);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--ts-space-3);
  font-size: var(--ts-fs-sm);
  color: var(--ts-ink-soft);
  margin-top: auto;
  padding-top: var(--ts-space-3);
  border-top: 1px solid var(--ts-ink-line);
}
.post-card__meta strong { color: var(--ts-ink); font-weight: 700; }

/* Feature (large) post card */
.post-card--feature {
  grid-column: 1 / -1;
}
.post-card--feature .post-card__body { padding: var(--ts-space-6); gap: var(--ts-space-4); }
.post-card--feature .post-card__title { font-size: var(--ts-fs-3xl); }
.post-card--feature .post-card__excerpt {
  font-size: var(--ts-fs-lg);
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
@media (min-width: 900px) {
  .post-card--feature {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-areas: "body media";
  }
  .post-card--feature .post-card__body  { grid-area: body; }
  .post-card--feature .post-card__media {
    grid-area: media;
    aspect-ratio: auto;
    border-bottom: 0;
    border-left: var(--ts-border-w) solid var(--ts-ink);
  }
}

/* --------------------------------------------------------------------------
   Sidebar widgets
   -------------------------------------------------------------------------- */
.widget { margin-bottom: var(--ts-space-5); }
.widget__title {
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--ts-space-3);
  color: var(--ts-ink);
  display: inline-block;
  padding-block: calc(var(--ts-space-2) + var(--ts-pill-nudge))
                 calc(var(--ts-space-2) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-4);
  background: var(--ts-surface);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius-pill);
  box-shadow: var(--ts-shadow-sticker-sm);
}

/* About-me widget */
.widget-about { text-align: center; padding: var(--ts-space-5); }
.widget-about__avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: var(--ts-border-w) solid var(--ts-ink);
  box-shadow: var(--ts-shadow-sticker-sm);
  margin: 0 auto var(--ts-space-3);
  background: var(--ts-bg);
  object-fit: cover;
}
.widget-about__name {
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-lg);
  margin: 0 0 var(--ts-space-2);
}
.widget-about__bio {
  color: var(--ts-ink-soft);
  font-size: var(--ts-fs-sm);
  margin: 0 0 var(--ts-space-4);
}
.widget-about__socials {
  display: flex;
  gap: var(--ts-space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* Popular posts widget (numbered 01–04) */
.popular-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ts-space-3); }
.popular-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ts-space-4);
  align-items: center;
  padding: var(--ts-space-3);
  background: var(--ts-surface);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius);
  box-shadow: var(--ts-shadow-sticker-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--ts-t-fast) var(--ts-ease),
              box-shadow var(--ts-t-fast) var(--ts-ease);
}
.popular-item:hover { color: inherit; transform: translateY(-1px); }
.popular-item:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--ts-ink);
}
.popular-item__num {
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-2xl);
  color: var(--ts-accent-1);
  line-height: 1;
  min-width: 2.5rem;
  text-align: center;
}
.popular-item__title {
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-md);
  line-height: 1.25;
  color: var(--ts-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.popular-item:nth-child(4n+1) .popular-item__num { color: var(--ts-accent-1); }
.popular-item:nth-child(4n+2) .popular-item__num { color: var(--ts-accent-2); }
.popular-item:nth-child(4n+3) .popular-item__num { color: var(--ts-accent-3); }
.popular-item:nth-child(4n+4) .popular-item__num { color: var(--ts-accent-4); }

/* Category list */
.category-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ts-space-2); }

/* Follow list */
.follow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ts-space-2); }

/* Social account display order — applied wherever data-platform="…" is set
   (sidebar Follow, mobile menu drawer, site footer socials). Unlisted
   platforms fall to the end. Ghost's helper returns accounts in its own
   fixed order; this overrides it with our editorial preference. */
[data-platform] { order: 100; }
[data-platform="youtube"]   { order: 1; }
[data-platform="instagram"] { order: 2; }
[data-platform="facebook"]  { order: 3; }
[data-platform="tiktok"]    { order: 4; }
[data-platform="bluesky"]   { order: 5; }
[data-platform="x"]         { order: 6; }

/* --------------------------------------------------------------------------
   Membership / subscribe CTA block (wraps Ghost Portal)
   -------------------------------------------------------------------------- */
.cta-subscribe {
  padding: var(--ts-space-6);
  text-align: center;
}
.cta-subscribe h2 { margin: 0 0 var(--ts-space-3); }
.cta-subscribe p { color: var(--ts-ink-soft); margin: 0 0 var(--ts-space-5); }
.cta-subscribe form {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
  max-width: 420px;
  margin: 0 auto;
}
@media (min-width: 620px) {
  .cta-subscribe form {
    flex-direction: row;
    max-width: 520px;
  }
  .cta-subscribe form .btn { flex-shrink: 0; }
}

/* --------------------------------------------------------------------------
   Media / embed card
   -------------------------------------------------------------------------- */
.media-card {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ts-ink);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius);
  overflow: hidden;
  box-shadow: var(--ts-shadow-sticker);
  cursor: pointer;
}
.media-card img,
.media-card iframe,
.media-card video {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}
.media-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.15);
  color: var(--ts-surface);
  transition: background var(--ts-t-fast) var(--ts-ease);
}
.media-card:hover .media-card__play { background: rgba(0,0,0,0.25); }
.media-card__play::before {
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  background: var(--ts-accent-1);
  border: var(--ts-border-w) solid var(--ts-surface);
  border-radius: 50%;
  box-shadow: 0 4px 0 rgba(0,0,0,0.35);
  position: relative;
}
.media-card__play::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border-left: 1.2rem solid var(--ts-surface);
  border-top: 0.8rem solid transparent;
  border-bottom: 0.8rem solid transparent;
  margin-left: 0.3rem;
}
.media-card--playing .media-card__play { display: none; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ts-space-3);
  margin: var(--ts-space-7) 0;
  font-family: var(--ts-font-heading);
  font-weight: 700;
}
.pagination__page {
  padding-block: calc(var(--ts-space-2) + var(--ts-pill-nudge))
                 calc(var(--ts-space-2) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-4);
  background: var(--ts-surface);
  border: 2px solid var(--ts-ink);
  border-radius: var(--ts-radius-pill);
  color: var(--ts-ink-soft);
}

/* --------------------------------------------------------------------------
   Membership page (pricing toggle)
   -------------------------------------------------------------------------- */
.pricing-toggle {
  display: inline-flex;
  padding: 0.35rem;
  background: var(--ts-surface);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius-pill);
  box-shadow: var(--ts-shadow-sticker-sm);
}
.pricing-toggle button {
  padding-block: calc(var(--ts-space-2) + var(--ts-pill-nudge))
                 calc(var(--ts-space-2) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-5);
  font-family: var(--ts-font-heading);
  font-weight: 700;
  color: var(--ts-ink);
  border-radius: var(--ts-radius-pill);
  transition: background var(--ts-t-fast) var(--ts-ease),
              color var(--ts-t-fast) var(--ts-ease);
}
.pricing-toggle button[aria-pressed="true"] {
  background: var(--ts-ink);
  color: var(--ts-surface);
}

.tier-grid {
  display: grid;
  gap: var(--ts-space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tier-card {
  padding: var(--ts-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-4);
}
.tier-card__name {
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-xl);
  margin: 0;
}
.tier-card__price {
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-3xl);
  color: var(--ts-accent-1);
  line-height: 1;
}
.tier-card__price small {
  font-size: var(--ts-fs-sm);
  color: var(--ts-ink-soft);
  font-weight: 500;
}
.tier-card__desc { color: var(--ts-ink-soft); margin: 0; }
.tier-card__benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ts-space-3);
  display: grid;
  gap: var(--ts-space-2);
}
.tier-card__benefits li {
  padding-left: var(--ts-space-5);
  position: relative;
  margin: 0;
}
.tier-card__benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--ts-accent-2);
}
.tier-card[data-cadence="yearly"] .price-monthly,
.tier-card[data-cadence="monthly"] .price-yearly { display: none; }

/* --------------------------------------------------------------------------
   Author / tag headers
   -------------------------------------------------------------------------- */
.archive-header {
  padding: var(--ts-space-6);
  text-align: center;
  margin-bottom: var(--ts-space-6);
  display: grid;
  gap: var(--ts-space-3);
  justify-items: center;
}
.archive-header__avatar {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: var(--ts-border-w) solid var(--ts-ink);
  box-shadow: var(--ts-shadow-sticker-sm);
  object-fit: cover;
}
.archive-header__name {
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-3xl);
  margin: 0;
}
.archive-header__meta { color: var(--ts-ink-soft); }

/* --------------------------------------------------------------------------
   Post (single) content
   -------------------------------------------------------------------------- */

/* Combined hero + body wrapper — one sticker card holds both. */
.post-main-card {
  margin-bottom: var(--ts-space-6);
  overflow: hidden;
}

.post-hero {
  padding: var(--ts-space-6);
  text-align: center;
  display: grid;
  gap: var(--ts-space-4);
  justify-items: center;
}
/* When post-hero stands alone (archive headers etc.) it still needs
   its own margin-bottom. Inside .post-main-card we zero it out. */
.post-main-card .post-hero { padding-bottom: var(--ts-space-5); }
.post-hero__tags {
  display: flex;
  gap: var(--ts-space-2);
  flex-wrap: wrap;
  justify-content: center;
}
.post-hero__title {
  font-size: var(--ts-fs-4xl);
  margin: 0;
  max-width: 900px;
}
.post-hero__excerpt {
  font-size: var(--ts-fs-lg);
  color: var(--ts-ink-soft);
  max-width: 720px;
  margin: 0;
}
.post-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--ts-space-3);
  font-size: var(--ts-fs-sm);
  color: var(--ts-ink-soft);
}
.post-hero__meta strong { color: var(--ts-ink); }
.post-hero__avatar {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--ts-ink);
  object-fit: cover;
}
.post-feature-image {
  margin-bottom: var(--ts-space-6);
  border-radius: var(--ts-radius);
  border: var(--ts-border-w) solid var(--ts-ink);
  box-shadow: var(--ts-shadow-sticker);
  overflow: hidden;
}
.post-feature-image img { width: 100%; height: auto; display: block; }

.post-content {
  padding: clamp(var(--ts-space-5), 4vw, var(--ts-space-8));
  font-size: var(--ts-fs-lg);
  line-height: 1.7;
  border-top: 2px solid var(--ts-ink-line);
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 { margin-top: var(--ts-space-6); }
/* All standalone images in the post body are centered, sticker-styled. */
.post-content img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--ts-radius-sm);
  border: 2px solid var(--ts-ink);
}

.post-content .kg-card {
  margin: var(--ts-space-6) auto;
}

/* Koenig image card: the <figure> IS .kg-image-card — get the sticker
   treatment on it and strip per-image styling from the <img> inside so
   it fills the card cleanly.
   width: fit-content lets the card hug the image's natural size, and
   max-width: 100% keeps it inside the post body — so a 400px image
   gets a 400px card, and a 4000px image is clamped to the reading
   column. */
.post-content .kg-image-card {
  width: fit-content;
  max-width: 100%;
  margin: var(--ts-space-6) auto;
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius);
  overflow: hidden;
  box-shadow: var(--ts-shadow-sticker-sm);
  text-align: center;
}
.post-content .kg-image-card img {
  display: block;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  max-width: 100%;
}
.post-content .kg-image-card figcaption {
  padding: var(--ts-space-3) var(--ts-space-4);
  background: var(--ts-surface);
  color: var(--ts-ink-soft);
  font-size: var(--ts-fs-sm);
  text-align: center;
  border-top: 1px solid var(--ts-ink-line);
}
.post-content .kg-callout-card {
  padding: var(--ts-space-5);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius);
  background: var(--ts-bg);
}
/* Koenig editor image widths — required by Ghost gscan.
   Our post body lives inside the bordered .post-main-card, so full
   viewport-width breakouts escape the card boundary and look broken.
   We flatten kg-width-wide and kg-width-full to just fill the content
   column instead. Regular Koenig image cards still hug their image
   via width: fit-content. */
.post-content .kg-width-wide,
.post-content .kg-width-full {
  width: 100%;
  max-width: 100%;
  margin: var(--ts-space-6) 0;
}
.post-content .kg-width-wide img,
.post-content .kg-width-full img {
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 0;
}

/* Header card (Koenig) — hero-style block with title / subtitle /
   optional button. Ghost supports kg-style-{dark,light,accent,image}
   and kg-size-{small,medium,large}.
   Bleeds horizontally to the outer .post-main-card edges by negating
   .post-content's clamp() padding — so it reads as a full-width band
   of the outer card rather than a separate rounded box inside it.
   .post-main-card's overflow: hidden clips it cleanly at the outer
   rounded corners. */
.post-content .kg-header-card {
  --header-card-bleed: clamp(var(--ts-space-5), 4vw, var(--ts-space-8));
  position: relative;
  overflow: hidden;
  width: auto;
  max-width: none;
  margin-top: var(--ts-space-6);
  margin-bottom: var(--ts-space-6);
  margin-left: calc(-1 * var(--header-card-bleed));
  margin-right: calc(-1 * var(--header-card-bleed));
  padding-block: var(--ts-space-6);
  padding-inline: var(--header-card-bleed);
  text-align: center;
  border: 0;
  border-radius: 0;
  color: var(--ts-surface);
  background: var(--ts-ink);
  box-shadow: none;
}
.post-content > .kg-header-card:first-child { margin-top: 0; }
.post-content > .kg-header-card:last-child  { margin-bottom: 0; }
.post-content .kg-header-card.kg-style-dark   { background: var(--ts-ink);      color: var(--ts-surface); }
.post-content .kg-header-card.kg-style-light  { background: var(--ts-surface);  color: var(--ts-ink); }
.post-content .kg-header-card.kg-style-accent { background: var(--ts-accent-1); color: var(--ts-surface); }
.post-content .kg-header-card.kg-style-image  {
  color: var(--ts-surface);
  background-size: cover;
  background-position: center;
}
.post-content .kg-header-card.kg-style-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
}
.post-content .kg-header-card.kg-style-image > * { position: relative; z-index: 1; }

.post-content .kg-header-card.kg-size-small  { padding-block: var(--ts-space-5); }
.post-content .kg-header-card.kg-size-medium { padding-block: var(--ts-space-7); }
.post-content .kg-header-card.kg-size-large  { padding-block: var(--ts-space-8); }

.post-content .kg-header-card-header {
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: clamp(var(--ts-fs-2xl), 5vw, var(--ts-fs-4xl));
  line-height: 1.1;
  margin: 0 0 var(--ts-space-3);
  color: inherit;
}
.post-content .kg-header-card-subheader {
  font-family: var(--ts-font-body);
  font-weight: 400;
  font-size: var(--ts-fs-lg);
  line-height: 1.4;
  margin: 0 0 var(--ts-space-5);
  opacity: 0.85;
  color: inherit;
}
.post-content .kg-header-card-subheader:last-child { margin-bottom: 0; }

.post-content .kg-header-card-button {
  display: inline-block;
  padding: var(--ts-space-3) var(--ts-space-5);
  border: 2px solid currentColor;
  border-radius: var(--ts-radius-pill);
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-md);
  color: inherit;
  text-decoration: none;
  transition: opacity var(--ts-t-fast) var(--ts-ease);
}
.post-content .kg-header-card-button:hover { opacity: 0.85; color: inherit; }

/* Gallery card (Koenig) — rows of images; Ghost sets each image's flex
   ratio inline, we handle layout + the theme's image treatment. */
.post-content .kg-gallery-card { margin: var(--ts-space-6) 0; }
.post-content .kg-gallery-container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 100%;
}
.post-content .kg-gallery-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.post-content .kg-gallery-row:not(:first-of-type) { margin-top: var(--ts-space-3); }
.post-content .kg-gallery-image { position: relative; }
.post-content .kg-gallery-image:not(:first-of-type) { margin-left: var(--ts-space-3); }
.post-content .kg-gallery-image img {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--ts-ink);
  border-radius: var(--ts-radius-sm);
}

/* Bookmark card (Koenig) — full sticker treatment across every inner
   class the editor emits (container / content / title / description /
   metadata / icon / author / publisher / thumbnail). */
.post-content .kg-bookmark-card { width: 100%; margin: var(--ts-space-6) 0; }
.post-content .kg-bookmark-container {
  display: flex;
  min-height: 148px;
  color: var(--ts-ink);
  text-decoration: none;
  background: var(--ts-surface);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius);
  box-shadow: var(--ts-shadow-sticker-sm);
  overflow: hidden;
}
.post-content .kg-bookmark-container:hover { color: var(--ts-ink); }
.post-content .kg-bookmark-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--ts-space-5);
  overflow: hidden;
}
.post-content .kg-bookmark-title {
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-md);
  line-height: 1.3;
  color: var(--ts-ink);
}
.post-content .kg-bookmark-description {
  display: -webkit-box;
  margin-top: var(--ts-space-2);
  font-size: var(--ts-fs-sm);
  line-height: 1.5;
  color: var(--ts-ink-soft);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-content .kg-bookmark-metadata {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--ts-space-3);
  font-family: var(--ts-font-body);
  font-size: var(--ts-fs-xs);
  font-weight: 600;
  color: var(--ts-ink);
}
.post-content .kg-bookmark-icon {
  width: 20px;
  height: 20px;
  margin-right: var(--ts-space-2);
  border: 0;
  border-radius: 4px;
}
.post-content .kg-bookmark-author,
.post-content .kg-bookmark-publisher {
  display: inline;
  color: var(--ts-ink-soft);
}
.post-content .kg-bookmark-author:after {
  content: "•";
  margin: 0 var(--ts-space-2);
  color: var(--ts-ink-mute);
}
.post-content .kg-bookmark-publisher {
  max-width: 240px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.post-content .kg-bookmark-thumbnail {
  position: relative;
  flex-grow: 1;
  min-width: 33%;
  max-height: 100%;
  border-left: var(--ts-border-w) solid var(--ts-ink);
}
.post-content .kg-bookmark-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

/* Button card — Koenig's kg-button-card / kg-btn / kg-btn-accent.
   Mirrors our .btn component so buttons dropped into post body match
   the header CTA / sidebar CTA / Subscribe button visually. */
.post-content .kg-button-card {
  margin: var(--ts-space-6) 0;
  text-align: center;
}
.post-content .kg-button-card.kg-align-left   { text-align: left; }
.post-content .kg-button-card.kg-align-center { text-align: center; }
.post-content .kg-button-card.kg-align-right  { text-align: right; }

.post-content .kg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ts-space-2);
  padding-block: calc(var(--ts-space-3) + var(--ts-pill-nudge))
                 calc(var(--ts-space-3) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-5);
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-md);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: var(--ts-ink);
  background: var(--ts-surface);
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius-pill);
  box-shadow: var(--ts-shadow-sticker);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--ts-t-fast) var(--ts-ease),
              box-shadow var(--ts-t-fast) var(--ts-ease),
              background var(--ts-t-fast) var(--ts-ease);
}
.post-content .kg-btn:hover { color: var(--ts-ink); }
.post-content .kg-btn:active {
  transform: translate(var(--ts-shadow-x), var(--ts-shadow-y));
  box-shadow: 0 0 0 var(--ts-ink);
}
.post-content .kg-btn-accent {
  background: var(--ts-accent-1);
  color: var(--ts-surface);
}
.post-content .kg-btn-accent:hover { color: var(--ts-surface); }

/* Embed card — YouTube / Vimeo / etc. Uses the classic padding-top:56.25%
   16:9 trick from Ghost's docs. This reserves the correct DOM box before
   the <iframe> initializes, so YouTube's thumbnail-quality heuristic sees
   the full display size and fetches maxresdefault instead of caching a
   pixelated thumbnail. :has() scopes it to iframe-containing embeds only
   — Twitter/Instagram widgets keep their own dimensions. */
.post-content .kg-embed-card {
  margin: var(--ts-space-6) auto;
  max-width: 100%;
}
.post-content .kg-embed-card:has(iframe),
.post-content .kg-embed-card:has(object),
.post-content .kg-embed-card:has(embed) {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius);
  box-shadow: var(--ts-shadow-sticker-sm);
  background: var(--ts-ink);
}
.post-content .kg-embed-card iframe,
.post-content .kg-embed-card object,
.post-content .kg-embed-card embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Post footer meta + author card */
.post-author-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ts-space-4);
  align-items: center;
  padding: var(--ts-space-5);
  margin-top: var(--ts-space-6);
}
.post-author-card__avatar {
  width: 4rem; height: 4rem;
  border-radius: 50%;
  border: var(--ts-border-w) solid var(--ts-ink);
  box-shadow: var(--ts-shadow-sticker-sm);
  object-fit: cover;
  background: var(--ts-bg);
}
.post-author-card__name {
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-lg);
  margin: 0 0 var(--ts-space-2);
}
.post-author-card__bio { color: var(--ts-ink-soft); font-size: var(--ts-fs-sm); margin: 0; }

/* Stacked variant — used inside .post-footer-grid so both cards mirror. */
.post-author-card--stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ts-space-3);
  text-align: center;
  padding: var(--ts-space-6);
  margin-top: 0;
}
.post-author-card--stacked .post-author-card__avatar {
  width: 5rem; height: 5rem;
}
.post-author-card--stacked .post-author-card__name { margin: 0; }
.post-author-card--stacked .post-author-card__bio { margin: 0; max-width: 280px; }
.post-author-card__socials {
  display: flex;
  gap: var(--ts-space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--ts-space-2);
}
.post-author-card__socials:empty { display: none; }

/* Side-by-side grid below the post body: CTA left, author right. */
.post-footer-grid {
  display: grid;
  gap: var(--ts-space-5);
  grid-template-columns: 1fr;
  margin-top: var(--ts-space-6);
}
@media (min-width: 700px) {
  .post-footer-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}
.post-footer-grid__cell {
  margin-top: 0;
  height: 100%;
}
/* CTA in the footer grid centers vertically inside its cell so the
   card matches the author card's height without stacking at the top. */
.post-footer-grid .cta-subscribe {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.post-footer-grid .cta-subscribe > .gold-lozenge {
  align-self: center;
}

/* --------------------------------------------------------------------------
   Read more / previous-next grid
   -------------------------------------------------------------------------- */
.read-more {
  margin-top: var(--ts-space-8);
}
.read-more__title {
  text-align: center;
  margin-bottom: var(--ts-space-5);
}
.read-more__grid {
  display: grid;
  gap: var(--ts-space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.empty-state {
  padding: var(--ts-space-8) var(--ts-space-5);
  text-align: center;
  color: var(--ts-ink-soft);
}