/* ======================================================================
   MODERN BLOG REDESIGN
   Scoped under body.tmb-modern so parent Wesper styles are overridden
   without touching the cyberpunk single-post styles in style.css
   ====================================================================== */

/* ------- Design tokens ------- */
body.tmb-modern {
  --tmb-bg: #fafaf9;
  --tmb-surface: #ffffff;
  --tmb-surface-2: #f4f4f5;
  --tmb-text: #18181b;
  --tmb-text-muted: #52525b;
  --tmb-text-faint: #71717a;
  --tmb-border: #e4e4e7;
  --tmb-border-strong: #d4d4d8;
  --tmb-accent: #4f46e5;
  --tmb-accent-hover: #4338ca;
  --tmb-accent-deep: #3730a3;       /* darker shade for gradient end-stops */
  --tmb-accent-soft: rgba(var(--tmb-accent-rgb), 0.1);
  --tmb-accent-contrast: #ffffff;
  --tmb-accent-rgb: 79, 70, 229;
  --tmb-code-bg: #f4f4f5;
  --tmb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --tmb-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
  --tmb-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 0, 0, 0.06);
  --tmb-radius-sm: 6px;
  --tmb-radius: 12px;
  --tmb-radius-lg: 18px;
  --tmb-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tmb-font-serif: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tmb-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --tmb-max-w: 1240px;        /* site chrome max width; sized to fit the
                                 share-rail + 820px prose + 260px TOC grid
                                 with 32px gaps and a touch of side padding. */
  --tmb-read-w: 820px;        /* reading column width on posts. 720px is the
                                 classical body-copy measure; bumped to 820px
                                 so the 3-col grid (share|prose|TOC) fills
                                 more of the 1200px chrome and feels less
                                 thin relative to the site header width. */
  --tmb-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--tmb-bg);
  color: var(--tmb-text);
  font-family: var(--tmb-font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* Dark mode: follows parent Wesper's day/night toggle, NOT the OS preference,
   so visitors with dark-mode OSes don't see a dark site while parent is light. */
body.tmb-modern.options_dark_skin {
    --tmb-bg: #09090b;
    --tmb-surface: #131316;
    --tmb-surface-2: #1c1c20;
    --tmb-text: #fafafa;
    --tmb-text-muted: #a1a1aa;
    --tmb-text-faint: #71717a;
    --tmb-border: #27272a;
    --tmb-border-strong: #3f3f46;
    --tmb-accent: #818cf8;
    --tmb-accent-hover: #a5b4fc;
    --tmb-accent-deep: #4338ca;     /* darker than --tmb-accent in dark mode too */
    --tmb-accent-soft: rgba(var(--tmb-accent-rgb), 0.12);
    --tmb-accent-contrast: #09090b;
    --tmb-accent-rgb: 129, 140, 248;
    --tmb-code-bg: #1c1c20;
    --tmb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --tmb-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
    --tmb-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.3);
}

/* ------- Override parent Wesper CSS variables (its rules read from these) ------- */
body.tmb-modern {
  --jl-bg-color:        var(--tmb-bg);
  --jl-txt-color:       var(--tmb-text);
  --jl-main-color:      var(--tmb-accent);
  --jl-body-font:       var(--tmb-font-sans);
  --jl-title-font:      var(--tmb-font-sans);
  --jl-menu-font:       var(--tmb-font-sans);
  --jl-body-font-size:  17px;
  --jl-body-line-height: 1.65;
  --jl-body-font-weight: 400;
}

/* ------- Neutralize parent wrappers ------- */
body.tmb-modern .options_layout_wrapper,
body.tmb-modern .options_layout_container {
  max-width: none;
  padding: 0;
  margin: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ------- Force typography family + color on everything the parent restyled ------- */
body.tmb-modern,
body.tmb-modern p,
body.tmb-modern ul,
body.tmb-modern ol,
body.tmb-modern li,
body.tmb-modern dl,
body.tmb-modern dt,
body.tmb-modern dd,
body.tmb-modern span,
body.tmb-modern div,
body.tmb-modern input,
body.tmb-modern select,
body.tmb-modern textarea,
body.tmb-modern button,
body.tmb-modern label,
body.tmb-modern th,
body.tmb-modern td {
  font-family: var(--tmb-font-sans);
}

body.tmb-modern h1,
body.tmb-modern h2,
body.tmb-modern h3,
body.tmb-modern h4,
body.tmb-modern h5,
body.tmb-modern h6 {
  font-family: var(--tmb-font-sans);
  color: var(--tmb-text);
  margin: 0;
  letter-spacing: -0.02em;
}

body.tmb-modern p { color: var(--tmb-text); margin: 0 0 1em; }

/* Article body is the only place the serif wins */
body.tmb-modern .tmb-article-content,
body.tmb-modern .tmb-article-content p,
body.tmb-modern .tmb-article-content li,
body.tmb-modern .tmb-article-content blockquote,
body.tmb-modern .tmb-comment-content,
body.tmb-modern .tmb-comment-content p {
  font-family: var(--tmb-font-serif);
}

/* Parent forces body background via --jl-bg-color and uses !important on links.
   Explicit overrides with matching weight: */
body.tmb-modern { background: var(--tmb-bg) !important; color: var(--tmb-text); }

body.tmb-modern * { box-sizing: border-box; }
body.tmb-modern a {
  color: var(--tmb-accent);
  text-decoration: none !important;
  transition: color var(--tmb-transition);
}
body.tmb-modern a:hover { color: var(--tmb-accent-hover); }

/* Keep article-body links readable as links */
body.tmb-modern .tmb-article-content a,
body.tmb-modern .tmb-comment-content a {
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.tmb-modern .tmb-article-content a:hover,
body.tmb-modern .tmb-comment-content a:hover {
  text-decoration-thickness: 2px !important;
}

body.tmb-modern img { max-width: 100%; height: auto; display: block; }

body.tmb-modern ::selection { background: var(--tmb-accent); color: var(--tmb-accent-contrast); }

body.tmb-modern a:focus-visible,
body.tmb-modern button:focus-visible,
body.tmb-modern input:focus-visible,
body.tmb-modern textarea:focus-visible,
body.tmb-modern select:focus-visible {
  outline: 2px solid var(--tmb-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------- Skip link ------- */
.tmb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tmb-accent);
  color: #fff;
  padding: 12px 20px;
  z-index: 9999;
  border-radius: 0 0 var(--tmb-radius-sm) 0;
  font-weight: 600;
}
.tmb-skip:focus { left: 0; color: #fff; }

/* ------- Header ------- */
.tmb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 249, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;       /* no border at top — added on scroll */
  transform: translate3d(0, 0, 0);            /* GPU-promoted layer, smooth animation */
  will-change: transform;
  transition:
    transform 360ms cubic-bezier(0.32, 0.72, 0, 1),  /* Apple-style spring out */
    background-color 220ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease;
  backface-visibility: hidden;                /* avoid sub-pixel flicker on transform */
}
/* Suppress every transition on the header (and its descendants) during the
   initial render — kills the flicker when WP admin bar mounts and shifts
   the layout. JS removes 'tmb-booting' after first paint. */
html.tmb-booting .tmb-header,
html.tmb-booting .tmb-header *,
html.tmb-booting .tmb-reading-bar,
html.tmb-booting .tmb-nav,
html.tmb-booting .tmb-nav-list > li {
  transition: none !important;
  animation: none !important;
}
/* Slid-up (auto-hide) — extra 1px so the (transparent) bottom edge tucks fully */
.tmb-header.is-hidden {
  transform: translate3d(0, calc(-100% - 1px), 0);
  transition:
    transform 280ms cubic-bezier(0.4, 0, 1, 1), /* faster snap up when hiding */
    background-color 220ms ease,
    box-shadow 240ms ease;
}
/* Past the scroll-threshold — header gets a soft shadow + tighter background.
   JS toggles .is-scrolled on the body once past 12px of scroll. */
.tmb-header.is-scrolled {
  background: rgba(250, 250, 249, 0.94);
  border-bottom-color: var(--tmb-border);
  box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.10);
}
body.options_dark_skin .tmb-header {
  background: rgba(9, 9, 11, 0.78);
}
body.options_dark_skin .tmb-header.is-scrolled {
  background: rgba(9, 9, 11, 0.94);
  box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .tmb-header { transition: background-color 220ms ease, box-shadow 240ms ease; }
  .tmb-header.is-hidden { transform: none; }
}
body.options_dark_skin .tmb-header { background: rgba(9, 9, 11, 0.82); }

/* WP admin bar offset so the sticky header doesn't collide with it */
body.admin-bar .tmb-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .tmb-header { top: 46px; }
}

.tmb-header-inner {
  max-width: var(--tmb-max-w);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
}

/* Hide reading bar when it would collide with admin bar on desktop */
body.admin-bar .tmb-reading-bar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .tmb-reading-bar { top: 46px; }
}
.tmb-logo {
  font-family: var(--tmb-font-sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--tmb-text) !important;
  white-space: nowrap;
}
.tmb-logo:hover { color: var(--tmb-text) !important; }
.tmb-logo-img { display: inline-flex; align-items: center; }
.tmb-logo-img img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.tmb-footer-brand .tmb-logo-img img { height: 40px; max-width: 220px; }

/* Ultra-premium wordmark: SVG monogram + heavy accented wordmark */
.tmb-logo-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tmb-font-sans);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--tmb-text) !important;
  transition: transform var(--tmb-transition);
  flex-shrink: 0;
}
.tmb-logo-wordmark:hover { transform: translateY(-1px); }

/* Monogram icon — rounded square badge with gradient depth */
.tmb-logo-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
  border-radius: 10px;
  filter: drop-shadow(0 2px 6px rgba(var(--tmb-accent-rgb), 0.22));
  transition: filter 260ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tmb-logo-wordmark:hover .tmb-logo-mark {
  filter: drop-shadow(0 4px 12px rgba(var(--tmb-accent-rgb), 0.38));
  transform: rotate(-4deg) scale(1.04);
}
.tmb-logo-mark-pulse {
  transform-origin: 32px 32px;
  animation: tmb-logo-pulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes tmb-logo-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .tmb-logo-mark-pulse { animation: none; }
  .tmb-logo-wordmark:hover .tmb-logo-mark { transform: none; }
}

/* Wordmark text */
.tmb-logo-wordmark .tmb-logo-text { display: inline-flex; align-items: baseline; }
.tmb-logo-wordmark .tmb-logo-lead { color: var(--tmb-text); }
.tmb-logo-wordmark .tmb-logo-accent {
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 50%, #4338ca 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tmb-logo-wordmark:hover .tmb-logo-accent {
  background-position: 100% 50%;
}

/* Footer variant — slightly larger, aligned center */
.tmb-footer-brand .tmb-logo-wordmark { font-size: 26px; gap: 12px; }
.tmb-footer-brand .tmb-logo-mark { width: 40px; height: 40px; }

/* Responsive */
@media (max-width: 640px) {
  .tmb-logo-wordmark { font-size: 20px; gap: 8px; }
  .tmb-logo-mark { width: 32px; height: 32px; }
  .tmb-footer-brand .tmb-logo-wordmark { font-size: 22px; gap: 10px; }
  .tmb-footer-brand .tmb-logo-mark { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
  .tmb-logo-wordmark { font-size: 18px; gap: 7px; }
  .tmb-logo-mark { width: 30px; height: 30px; border-radius: 8px; }
}
.tmb-nav {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.tmb-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap;
}
.tmb-nav-list li,
.tmb-nav li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
  background: transparent !important;
}
/* ------- Menu CTA button -------
   Add the class "tmb-menu-cta" to a menu item in
   Appearance → Menus → Screen Options → check "CSS Classes" → expand the
   item → paste `tmb-menu-cta` in the "CSS Classes (optional)" field.

   Upgraded styling: brand-gradient pill, inset top highlight (etched feel),
   layered colored shadow, sliding arrow on hover via ::after. The arrow
   text content is a Unicode rightwards arrow so it works without HTML
   changes (menu items are WP-generated). */
.tmb-nav-list > li.tmb-menu-cta > a {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--tmb-accent) 0%, var(--tmb-accent-deep) 100%) !important;
  color: var(--tmb-accent-contrast) !important;
  padding: 7px 16px !important;       /* slimmer — matches height of regular nav items */
  border-radius: 8px !important;       /* rounded rectangle (was 999px pill) */
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  /* Layered shadow:
     - inset top highlight  → "etched" / lit-from-above feel
     - inset bottom shadow  → subtle depth at the base
     - colored glow         → brand-tinted ambient
     - drop shadow          → grounds the element */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(var(--tmb-accent-rgb), 0.30),
    0 1px 3px rgba(0, 0, 0, 0.08);
  transition:
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
    gap 200ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 220ms ease;
  white-space: nowrap;
  overflow: hidden;          /* contain the shimmer sweep on hover */
}
/* Arrow indicator — overrides the default no-chevron rule below.
   Inline Unicode arrow keeps it font-rendered (sharp, scales with text). */
.tmb-nav-list > li.tmb-menu-cta > a::after {
  content: "→" !important;
  display: inline-block !important;
  font-size: 14px;
  line-height: 1;
  position: static !important;
  width: auto !important; height: auto !important;
  border: 0 !important;
  margin: 0 !important;
  transform: translateX(0) !important;
  opacity: 0.9;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}
/* Shimmer sweep on hover — a thin diagonal gloss that crosses the pill.
   Uses ::before so the arrow ::after stays free for the text indicator. */
.tmb-nav-list > li.tmb-menu-cta > a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  pointer-events: none;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: inherit;
}

.tmb-nav-list > li.tmb-menu-cta > a:hover {
  color: var(--tmb-accent-contrast) !important;
  transform: translateY(-2px);
  gap: 12px;
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 10px 28px rgba(var(--tmb-accent-rgb), 0.45),
    0 2px 6px rgba(0, 0, 0, 0.10);
}
.tmb-nav-list > li.tmb-menu-cta > a:hover::after {
  transform: translateX(3px) !important;
  opacity: 1;
}
.tmb-nav-list > li.tmb-menu-cta > a:hover::before {
  transform: translateX(100%);
}
.tmb-nav-list > li.tmb-menu-cta > a:active {
  transform: translateY(-1px) scale(0.985);
  transition-duration: 80ms;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 6px 16px rgba(var(--tmb-accent-rgb), 0.35);
}
.tmb-nav-list > li.tmb-menu-cta > a:focus-visible {
  outline: 2px solid var(--tmb-accent);
  outline-offset: 3px;
}
/* Suppress the submenu bridge pseudo on the CTA (kept for future-proofing
   in case a CTA item is ever made a parent). The arrow ::after above
   intentionally overrides the chevron display:none from the submenu rules. */
.tmb-nav-list > li.tmb-menu-cta::after { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .tmb-nav-list > li.tmb-menu-cta > a,
  .tmb-nav-list > li.tmb-menu-cta > a::after,
  .tmb-nav-list > li.tmb-menu-cta > a::before {
    transition: none !important;
    animation: none !important;
  }
  .tmb-nav-list > li.tmb-menu-cta > a:hover { transform: none; }
  .tmb-nav-list > li.tmb-menu-cta > a:hover::before { transform: translateX(-100%); }
}

@media (max-width: 900px) {
  .tmb-nav-list > li.tmb-menu-cta > a {
    text-align: center;
    justify-content: center;
    margin: 14px 0 !important;
    padding: 12px 20px !important;       /* taller on mobile for tap-target comfort, still rectangular */
    border-radius: 10px !important;       /* slightly softer on mobile (visual ratio) */
    font-size: 15px !important;
    border-bottom: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.20),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18),
      0 6px 18px rgba(var(--tmb-accent-rgb), 0.34),
      0 2px 4px rgba(0, 0, 0, 0.08);
  }
}

/* ------- Submenus — desktop dropdowns + mobile accordions ------- */
.tmb-nav-list > li { position: relative; }
.tmb-nav-list > li > a { position: relative; }
.tmb-nav-list > li > ul.children,
.tmb-nav-list > li > ul.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Chevron indicator on parent items — CSS-only, always visible */
.tmb-nav-list > li.has-submenu > a::after,
.tmb-nav-list > li.menu-item-has-children > a::after,
.tmb-nav-list > li:has(> ul.children) > a::after,
.tmb-nav-list > li:has(> ul.sub-menu) > a::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
  vertical-align: middle;
}

/* Desktop: hover/focus reveals dropdown */
@media (min-width: 901px) {
  .tmb-nav-list > li > ul.children,
  .tmb-nav-list > li > ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;                       /* flush — no hover gap */
    left: 0;
    min-width: 220px;
    background: var(--tmb-bg);
    border: 1px solid var(--tmb-border);
    border-radius: var(--tmb-radius);
    box-shadow: var(--tmb-shadow-lg);
    padding: 8px;
    margin-top: 0;
    z-index: 105;
  }
  /* Transparent bridge below parent extends the hover zone — catches the
     cursor in the moment between leaving the parent and entering the dropdown. */
  .tmb-nav-list > li.has-submenu::after,
  .tmb-nav-list > li.menu-item-has-children::after,
  .tmb-nav-list > li:has(> ul.sub-menu)::after,
  .tmb-nav-list > li:has(> ul.children)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    pointer-events: none;
  }
  .tmb-nav-list > li.has-submenu:hover::after,
  .tmb-nav-list > li.menu-item-has-children:hover::after,
  .tmb-nav-list > li:has(> ul.sub-menu):hover::after,
  .tmb-nav-list > li:has(> ul.children):hover::after { pointer-events: auto; }
  .tmb-nav-list > li:hover > ul.children,
  .tmb-nav-list > li:hover > ul.sub-menu,
  .tmb-nav-list > li:focus-within > ul.children,
  .tmb-nav-list > li:focus-within > ul.sub-menu { display: block; }
  .tmb-nav-list > li > ul.children li,
  .tmb-nav-list > li > ul.sub-menu li {
    display: block;
    list-style: none;
  }
  .tmb-nav-list > li > ul.children li a,
  .tmb-nav-list > li > ul.sub-menu li a {
    display: block;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--tmb-text-muted) !important;
    border-radius: 6px;
    white-space: nowrap;
  }
  .tmb-nav-list > li > ul.children li a:hover,
  .tmb-nav-list > li > ul.sub-menu li a:hover {
    background: var(--tmb-surface-2);
    color: var(--tmb-text) !important;
  }
  .tmb-nav-list > li:hover > a::after,
  .tmb-nav-list > li:focus-within > a::after {
    transform: rotate(-135deg) translateY(1px);
    opacity: 1;
  }
}

/* Mobile: tap parent link toggles submenu (JS handles preventDefault) */
@media (max-width: 900px) {
  /* Chevron sits on the right edge of the row, big and tappable */
  .tmb-nav-list > li.has-submenu > a,
  .tmb-nav-list > li.menu-item-has-children > a,
  .tmb-nav-list > li:has(> ul.children) > a,
  .tmb-nav-list > li:has(> ul.sub-menu) > a {
    padding-right: 44px !important;
  }
  .tmb-nav-list > li.has-submenu > a::after,
  .tmb-nav-list > li.menu-item-has-children > a::after,
  .tmb-nav-list > li:has(> ul.children) > a::after,
  .tmb-nav-list > li:has(> ul.sub-menu) > a::after {
    position: absolute;
    top: 50%;
    right: 14px;
    margin: 0;
    width: 9px;
    height: 9px;
    transform: translateY(-75%) rotate(45deg);
    opacity: 0.65;
  }
  .tmb-nav-list > li.is-open > a::after {
    transform: translateY(-25%) rotate(-135deg) !important;
    opacity: 1;
  }

  /* Submenu panel — inline accordion */
  .tmb-nav-list > li > ul.children,
  .tmb-nav-list > li > ul.sub-menu {
    display: none;
    padding: 4px 0 12px 18px !important;
    background: transparent;
    border: none;
    box-shadow: none;
    position: static;
  }
  .tmb-nav-list > li.is-open > ul.children,
  .tmb-nav-list > li.is-open > ul.sub-menu { display: block; }
  .tmb-nav-list > li > ul.children li,
  .tmb-nav-list > li > ul.sub-menu li {
    display: block;
    list-style: none;
    margin: 0 !important;
  }
  .tmb-nav-list > li > ul.children li a,
  .tmb-nav-list > li > ul.sub-menu li a {
    display: block !important;
    padding: 12px 8px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--tmb-text-muted) !important;
    border-bottom: 1px solid var(--tmb-border) !important;
  }
  .tmb-nav-list > li > ul.children li:last-child a,
  .tmb-nav-list > li > ul.sub-menu li:last-child a {
    border-bottom: none !important;
  }

  /* "View all" navigation link — distinct accent-colored row at top of submenu */
  .tmb-nav-list .tmb-view-all a {
    color: var(--tmb-accent) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 8px !important;
    border-bottom: 1px solid var(--tmb-border) !important;
    letter-spacing: 0.02em;
  }
}

/* Desktop: show "View all" at top of dropdown panel too */
@media (min-width: 901px) {
  .tmb-nav-list .tmb-view-all a {
    color: var(--tmb-accent) !important;
    font-weight: 600;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--tmb-border);
    border-radius: 6px 6px 0 0 !important;
    margin-bottom: 4px;
  }
  .tmb-nav-list .tmb-view-all a:hover {
    background: var(--tmb-accent-soft) !important;
    color: var(--tmb-accent) !important;
  }
}
.tmb-nav a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--tmb-radius-sm);
  color: var(--tmb-text-muted) !important;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  transition: background var(--tmb-transition), color var(--tmb-transition);
}
.tmb-nav a:hover,
.tmb-nav .current-menu-item > a,
.tmb-nav .current_page_item > a,
.tmb-nav .current-cat > a {
  background: var(--tmb-surface-2);
  color: var(--tmb-text) !important;
}
.tmb-header-actions { display: flex; align-items: center; gap: 6px; }
/* Icon buttons — clean minimalist, no background boxes.
   All state permutations explicitly set to transparent so no cascade
   (parent theme, Elementor, browser default) can paint a box. */
.tmb-icon-btn,
.tmb-icon-btn:hover,
.tmb-icon-btn:focus,
.tmb-icon-btn:focus-within,
.tmb-icon-btn:focus-visible,
.tmb-icon-btn:active,
.tmb-icon-btn:visited,
.tmb-icon-btn[aria-expanded="true"],
.tmb-icon-btn[aria-expanded="false"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
}

.tmb-icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--tmb-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tmb-text-muted) !important;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 101;
}
.tmb-icon-btn * { color: inherit !important; }
.tmb-burger span { background: currentColor !important; }
.tmb-icon-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
  stroke: currentColor;
}

/* Interactions — color + scale only */
.tmb-icon-btn:hover { color: var(--tmb-accent) !important; }
.tmb-icon-btn:focus-visible { color: var(--tmb-accent) !important; outline-offset: 4px !important; }
.tmb-icon-btn:active { transform: scale(0.92); color: var(--tmb-accent) !important; }

/* Expanded toggles — stay in text color, no box */
.tmb-menu-toggle[aria-expanded="true"],
.tmb-search-toggle[aria-expanded="true"] {
  color: var(--tmb-text) !important;
}

/* Theme toggle — sun in dark mode, moon in light, with a smooth icon morph */
.tmb-theme-toggle {
    position: relative;
    overflow: hidden;
    transition: color var(--tmb-transition), transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tmb-theme-toggle:hover { transform: rotate(-12deg); }
body.options_dark_skin .tmb-theme-toggle:hover { transform: rotate(12deg); }

/* Stack both icons in the same position; toggle visibility + rotation/scale */
.tmb-theme-toggle .tmb-theme-icon-sun,
.tmb-theme-toggle .tmb-theme-icon-moon {
    width: 20px; height: 20px;
    position: absolute;
    inset: 0;
    margin: auto;
    transform-origin: 50% 50%;
    transition:
        opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot for that satisfying snap */
    pointer-events: none;
}
/* Light mode: moon visible, sun hidden + rotated out */
.tmb-theme-toggle .tmb-theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
.tmb-theme-toggle .tmb-theme-icon-sun  { opacity: 0; transform: rotate(-90deg) scale(0.4); }
/* Dark mode: sun visible, moon hidden + rotated out */
body.options_dark_skin .tmb-theme-toggle .tmb-theme-icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
body.options_dark_skin .tmb-theme-toggle .tmb-theme-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }

/* Sub-pixel reservation — keep the button at its normal 40×40 footprint */
.tmb-theme-toggle::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
}

/* ---- Global color transition during a theme switch ----
   Only active for ~320ms when the user clicks the toggle, so normal
   hover/focus interactions stay snappy. JS toggles .is-theme-changing
   on <html>. */
html.is-theme-changing,
html.is-theme-changing body,
html.is-theme-changing body * {
    transition:
        background-color 320ms cubic-bezier(0.4, 0, 0.2, 1),
        color 320ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 320ms cubic-bezier(0.4, 0, 0.2, 1),
        fill 320ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke 320ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* View Transitions API smooth crossfade (Chrome 111+, Safari 18+) */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 360ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(root) { animation-name: tmb-theme-fade-out; }
::view-transition-new(root) { animation-name: tmb-theme-fade-in; }
@keyframes tmb-theme-fade-out { to { opacity: 0; } }
@keyframes tmb-theme-fade-in  { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    html.is-theme-changing,
    html.is-theme-changing body,
    html.is-theme-changing body * { transition: none !important; }
    .tmb-theme-toggle .tmb-theme-icon-sun,
    .tmb-theme-toggle .tmb-theme-icon-moon { transition: opacity 0s; transform: none; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: 0s; }
}
.tmb-menu-toggle { display: none; }

/* Hamburger that morphs into an X */
.tmb-burger {
  position: relative;
  width: 20px;
  height: 14px;
  display: inline-block;
}
.tmb-burger span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 150ms linear,
              top 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tmb-burger span:nth-child(1) { top: 0; }
.tmb-burger span:nth-child(2) { top: 6px; }
.tmb-burger span:nth-child(3) { top: 12px; }
.tmb-menu-toggle[aria-expanded="true"] .tmb-burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.tmb-menu-toggle[aria-expanded="true"] .tmb-burger span:nth-child(2) { opacity: 0; }
.tmb-menu-toggle[aria-expanded="true"] .tmb-burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .tmb-menu-toggle { display: inline-flex !important; }

  /* Mobile nav overlay — always rendered in DOM, animated via opacity + transform.
     Hidden state has visibility:hidden after the close transition completes
     so it can't be tabbed into when closed. */
  .tmb-nav {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--tmb-bg) !important;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    padding: 80px 24px 40px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 99 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex: none !important;

    /* CLOSED state */
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
    visibility: hidden;
    pointer-events: none;
    transform-origin: top center;
    transition:
      opacity   240ms cubic-bezier(0.4, 0, 0.2, 1),
      transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
      backdrop-filter 240ms ease,
      visibility 0s linear 320ms;            /* delay until close anim finishes */
  }
  .tmb-nav.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition:
      opacity   260ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 380ms cubic-bezier(0.32, 0.72, 0, 1),  /* spring-out feel */
      backdrop-filter 320ms ease,
      visibility 0s linear 0s;
  }

  /* Staggered nav items — each slides up a fraction of a second after the
     previous, so the menu reveals in a wave instead of all at once. */
  .tmb-nav-list > li {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity   280ms cubic-bezier(0.4, 0, 0.2, 1),
      transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .tmb-nav.open .tmb-nav-list > li { opacity: 1; transform: translateY(0); }
  .tmb-nav.open .tmb-nav-list > li:nth-child(1) { transition-delay:  80ms; }
  .tmb-nav.open .tmb-nav-list > li:nth-child(2) { transition-delay: 130ms; }
  .tmb-nav.open .tmb-nav-list > li:nth-child(3) { transition-delay: 180ms; }
  .tmb-nav.open .tmb-nav-list > li:nth-child(4) { transition-delay: 230ms; }
  .tmb-nav.open .tmb-nav-list > li:nth-child(5) { transition-delay: 280ms; }
  .tmb-nav.open .tmb-nav-list > li:nth-child(6) { transition-delay: 320ms; }
  .tmb-nav.open .tmb-nav-list > li:nth-child(7) { transition-delay: 360ms; }
  .tmb-nav.open .tmb-nav-list > li:nth-child(8) { transition-delay: 400ms; }
  /* When closing, all items snap back together (no stagger out) */
  .tmb-nav:not(.open) .tmb-nav-list > li { transition-delay: 0ms !important; }

  @media (prefers-reduced-motion: reduce) {
    .tmb-nav, .tmb-nav.open { transition: opacity 0s, visibility 0s; transform: none; }
    .tmb-nav-list > li, .tmb-nav.open .tmb-nav-list > li {
      transition: none; transform: none; transition-delay: 0s;
    }
  }
  .tmb-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .tmb-nav a {
    display: block;
    padding: 16px 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--tmb-text) !important;
    border-bottom: 1px solid var(--tmb-border);
    border-radius: 0;
  }
  .tmb-nav a:hover,
  .tmb-nav .current-menu-item > a,
  .tmb-nav .current_page_item > a {
    background: transparent;
    color: var(--tmb-accent) !important;
  }
  .tmb-nav-list li:last-child a,
  .tmb-nav li:last-child a { border-bottom: none; }

  body.admin-bar .tmb-nav { top: 46px; padding-top: 88px; }
}

/* Lock body scroll when menu is open */
body.tmb-modern.tmb-menu-open {
  overflow: hidden;
  touch-action: none;
}

.tmb-search-bar {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--tmb-bg);
  border-bottom: 1px solid var(--tmb-border);
  padding: 20px 24px;
}
.tmb-search-bar.open { display: block; }
.tmb-search-bar form { max-width: 640px; margin: 0 auto; display: flex; gap: 8px; }
.tmb-search-bar input[type="search"],
.tmb-search-bar input[type="text"] {
  flex: 1;
  padding: 14px 18px;
  font-size: 16px;
  font-family: inherit;
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius-sm);
  color: var(--tmb-text);
  outline: none;
  transition: border-color var(--tmb-transition), box-shadow var(--tmb-transition);
}
.tmb-search-bar input[type="search"]:focus,
.tmb-search-bar input[type="text"]:focus {
  border-color: var(--tmb-accent);
  box-shadow: 0 0 0 3px var(--tmb-accent-soft);
}
.tmb-search-bar button[type="submit"],
.tmb-search-bar input[type="submit"] {
  padding: 14px 24px;
  background: var(--tmb-accent);
  color: var(--tmb-accent-contrast);
  border: none;
  border-radius: var(--tmb-radius-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tmb-transition);
}
.tmb-search-bar button[type="submit"]:hover { background: var(--tmb-accent-hover); }

/* ------- Reading progress ------- */
.tmb-reading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--tmb-accent);
  width: 0%;
  z-index: 200;
  transition: width 50ms linear;
}

/* ------- Main ------- */
.tmb-main { min-height: 60vh; }
.tmb-container {
  max-width: var(--tmb-max-w);
  margin: 0 auto;
  padding: 48px 24px;
}

/* ======================================================================
   MAGAZINE LANDING TEMPLATE (template-landing-magazine.php)
   Newsfy-style dense editorial layout. All scoped under .tmb-mag.
   ====================================================================== */
.tmb-mag {
    max-width: var(--tmb-max-w);
    margin: 0 auto;
    padding: 32px 24px 56px;
    display: flex;
    flex-direction: column;
    gap: 52px;
}
@media (max-width: 720px) {
    .tmb-mag { padding: 20px 16px 40px; gap: 36px; }
}

/* Placeholder thumbnail — shown when a post has no featured image.
   Mode-aware tones so it never feels too bright or invisibly blends in.
   Subtle accent stripe at the bottom hints at brand without dominating. */
.tmb-mag-card-thumb.is-placeholder,
.tmb-mag-col-feature-img.is-placeholder {
    /* Light-mode default: faint indigo wash, just enough to differentiate from card body */
    background:
      linear-gradient(135deg, #eef0fb 0%, #e3e7f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6366f1;
    font-family: var(--tmb-font-sans);
    font-weight: 800;
    letter-spacing: -0.04em;
    position: relative;
    border: 1px solid var(--tmb-border);
}
body.options_dark_skin .tmb-mag-card-thumb.is-placeholder,
body.options_dark_skin .tmb-mag-col-feature-img.is-placeholder {
    /* Dark-mode: deeper than card surface but not the saturated brand */
    background: linear-gradient(135deg, #1f1f24 0%, #16161a 100%);
    color: #818cf8;
}
.tmb-mag-card-thumb.is-placeholder span,
.tmb-mag-col-feature-img.is-placeholder span {
    font-size: clamp(22px, 3vw, 36px);
    line-height: 1;
    opacity: 0.45;
}
/* Subtle accent stripe at the bottom edge */
.tmb-mag-card-thumb.is-placeholder::after,
.tmb-mag-col-feature-img.is-placeholder::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tmb-accent), transparent);
    opacity: 0.5;
    pointer-events: none;
}

.tmb-mag-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tmb-border);
    flex-wrap: wrap;
}
.tmb-mag-section-head h2,
.tmb-mag-col-head h2 {
    font-family: var(--tmb-font-sans);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--tmb-text);
    margin: 0;
    position: relative;
    padding-left: 16px;
}
.tmb-mag-section-head h2::before,
.tmb-mag-col-head h2::before {
    content: "";
    position: absolute;
    left: 0; top: 2px; bottom: 2px;
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--tmb-accent), var(--tmb-accent-deep));
    box-shadow: 0 4px 12px rgba(var(--tmb-accent-rgb), 0.35);
}
.tmb-mag-col-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--tmb-accent) !important;
    white-space: nowrap;
}

/* ----- Hero ----- */
.tmb-mag-hero {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 18px;
}
.tmb-mag-hero-main {
    position: relative;
    aspect-ratio: 1200 / 628;       /* matches your source images exactly */
    max-height: 540px;              /* don't go absurdly large at very wide viewports */
    overflow: hidden;
    border-radius: var(--tmb-radius-lg);
    display: block;
    text-decoration: none !important;
    color: #fff !important;
    background: var(--tmb-surface-2);
}
.tmb-mag-hero-main > img,
.tmb-mag-hero-main > picture,
.tmb-mag-hero-main > picture > img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tmb-mag-hero-main:hover img { transform: scale(1.04); }
.tmb-mag-hero-main::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.95) 100%),
      linear-gradient(90deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 50%);
    pointer-events: none;
}
@media (max-width: 900px) {
    .tmb-mag-hero-main { max-height: 420px; }
}
@media (max-width: 600px) {
    .tmb-mag-hero-main { aspect-ratio: 4 / 5; max-height: none; }
}
.tmb-mag-hero-overlay {
    position: absolute;
    bottom: 0; left: 0;
    z-index: 1;
    padding: 26px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(620px, 70%);
}
@media (max-width: 600px) {
    .tmb-mag-hero-overlay { max-width: 100%; padding: 20px 22px 22px; }
}
.tmb-mag-hero-cat {
    display: inline-block;
    align-self: flex-start;
    padding: 5px 12px;
    background: var(--tmb-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
/* Hero text always white — sits over the image with a dark gradient overlay,
   so it must win against the global body.tmb-modern h1/p typography rules
   that would otherwise paint it with --tmb-text (dark in light mode). */
body.tmb-modern .tmb-mag-hero-title {
    font-family: var(--tmb-font-sans);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 4px 0 6px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
    /* Clamp 2 lines so it doesn't blow out the overlay */
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
body.tmb-modern .tmb-mag-hero-excerpt {
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    line-height: 1.45;
    margin: 0;
    max-width: 580px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
    /* clamp 2 lines */
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
body.tmb-modern .tmb-mag-hero-meta { color: rgba(255,255,255,0.78); font-size: 13px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }

.tmb-mag-hero-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}
@media (max-width: 900px) {
    .tmb-mag-hero { grid-template-columns: 1fr; }
    .tmb-mag-hero-side { flex-direction: row; justify-content: stretch; }
    .tmb-mag-hero-side > * { flex: 1; min-width: 0; }
}
@media (max-width: 600px) {
    .tmb-mag-hero-side { flex-direction: column; }
    .tmb-mag-hero-overlay { padding: 22px 22px 24px; }
}

/* ----- Generic mag card (used in side, list, compact) ----- */
.tmb-mag-card {
    background: var(--tmb-surface);
    border: 1px solid var(--tmb-border);
    border-radius: var(--tmb-radius);
    overflow: hidden;
    transition: border-color var(--tmb-transition), transform var(--tmb-transition);
}
.tmb-mag-card:hover { border-color: var(--tmb-accent); transform: translateY(-2px); }
.tmb-mag-card-thumb {
    display: block;
    overflow: hidden;
    background: var(--tmb-surface-2);
    position: relative;
    width: 100%;
}
.tmb-mag-card-thumb > img,
.tmb-mag-card-thumb > picture,
.tmb-mag-card-thumb > picture > img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tmb-mag-card:hover .tmb-mag-card-thumb > img,
.tmb-mag-card:hover .tmb-mag-card-thumb > picture > img { transform: scale(1.05); }
.tmb-mag-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tmb-mag-card-cat {
    color: var(--tmb-accent) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
}
.tmb-mag-card-title {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    /* clamp 2 lines */
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.tmb-mag-card-title a { color: var(--tmb-text); }
.tmb-mag-card-title a:hover { color: var(--tmb-accent); }
.tmb-mag-card-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    color: var(--tmb-text-faint);
}
.tmb-mag-card-meta .dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.5; }

/* Side variant — image left, text right (small, used in hero rail).
   Tuned for 1200×628 (16:9-ish) source images; thumb honors aspect-ratio
   instead of stretching to fill the card. */
.tmb-mag-card-side {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0;
    align-items: center;
}
.tmb-mag-card-side .tmb-mag-card-thumb {
    aspect-ratio: 1200 / 628;     /* zero crop on your source images */
    align-self: start;            /* honor aspect-ratio — don't stretch to card height */
    min-height: 0;
}
.tmb-mag-card-side .tmb-mag-card-body { padding: 14px 16px; gap: 4px; justify-content: center; }
.tmb-mag-card-side .tmb-mag-card-title { font-size: 14px; line-height: 1.35; -webkit-line-clamp: 2; line-clamp: 2; }
.tmb-mag-card-side .tmb-mag-card-meta { font-size: 11px; }
.tmb-mag-card-side .tmb-mag-card-cat { font-size: 10px; }

/* List variant — image left, text right (taller; tabs / recent news) */
.tmb-mag-card-list {
    display: grid;
    grid-template-columns: 180px 1fr;
}
.tmb-mag-card-list .tmb-mag-card-thumb { aspect-ratio: 1200 / 628; }
.tmb-mag-card-list .tmb-mag-card-body { padding: 14px 18px; gap: 6px; justify-content: center; }
.tmb-mag-card-list .tmb-mag-card-title { font-size: 15px; line-height: 1.35; }
@media (max-width: 480px) {
    .tmb-mag-card-list { grid-template-columns: 120px 1fr; }
    .tmb-mag-card-list .tmb-mag-card-body { padding: 12px 14px; }
    .tmb-mag-card-list .tmb-mag-card-title { font-size: 14px; }
}

/* Compact variant — small horizontal list item (two-col section + Popular).
   16:9 thumb to match 1200×628 source aspect ratio. */
.tmb-mag-card-compact {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    border: none;
    border-bottom: 1px solid var(--tmb-border);
    border-radius: 0;
    background: transparent;
    padding: 12px 0;
    align-items: center;
}
.tmb-mag-card-compact:hover { transform: none; border-color: var(--tmb-border); }
.tmb-mag-card-compact .tmb-mag-card-thumb {
    aspect-ratio: 1200 / 628;
    border-radius: 8px;
    overflow: hidden;
}
.tmb-mag-card-compact .tmb-mag-card-body { padding: 0; gap: 4px; justify-content: center; }
.tmb-mag-card-compact .tmb-mag-card-title { font-size: 14px; line-height: 1.35; -webkit-line-clamp: 2; line-clamp: 2; }
.tmb-mag-card-compact .tmb-mag-card-cat { font-size: 10px; }
.tmb-mag-card-compact .tmb-mag-card-meta { font-size: 11px; }
.tmb-mag-card-compact:last-child { border-bottom: none; padding-bottom: 0; }

/* ----- Tabs ----- */
.tmb-mag-tab-buttons {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.tmb-mag-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    background: transparent;
    border: 1px solid var(--tmb-border);
    border-radius: 999px;
    color: var(--tmb-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transform: translateY(0);
    transition: background var(--tmb-transition),
                color var(--tmb-transition),
                border-color var(--tmb-transition),
                box-shadow var(--tmb-transition),
                transform 120ms ease;
}
.tmb-mag-tab-btn:hover {
    color: var(--tmb-text);
    border-color: var(--tmb-text-muted);
    transform: translateY(-1px);
}
.tmb-mag-tab-btn.is-active,
.tmb-mag-tab-btn.is-active:hover {
    background: linear-gradient(135deg, var(--tmb-accent), var(--tmb-accent-deep));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--tmb-accent-rgb), 0.35);
    transform: translateY(0);
}

/* Dark-mode contrast — the default border/transparent-bg blends into the
   page background. Add a subtle white-tinted fill + brighter border so
   inactive tabs stay legible. */
body.options_dark_skin .tmb-mag-tab-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.72);
}
body.options_dark_skin .tmb-mag-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}
/* Active state stays the gradient — only re-pin to override the hover bg */
body.options_dark_skin .tmb-mag-tab-btn.is-active,
body.options_dark_skin .tmb-mag-tab-btn.is-active:hover {
    background: linear-gradient(135deg, var(--tmb-accent), var(--tmb-accent-deep));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 22px rgba(var(--tmb-accent-rgb), 0.40);
}
.tmb-mag-tab-panel { display: none; }
.tmb-mag-tab-panel.is-active { display: block; animation: tmb-tab-fade 280ms cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes tmb-tab-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tmb-mag-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    align-items: stretch;
}
.tmb-mag-list > .tmb-mag-card { height: 100%; }
@media (max-width: 720px) {
    .tmb-mag-list { grid-template-columns: 1fr; gap: 14px; }
}

/* ----- Two-column section ----- */
.tmb-mag-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}
@media (max-width: 900px) {
    .tmb-mag-cols { grid-template-columns: 1fr; gap: 44px; }
}
.tmb-mag-col-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tmb-border);
}
.tmb-mag-col-feature {
    margin-bottom: 16px;
    border-radius: var(--tmb-radius);
    overflow: hidden;
    background: var(--tmb-surface);
    border: 1px solid var(--tmb-border);
}
.tmb-mag-col-feature-img {
    display: block;
    aspect-ratio: 1200 / 628;     /* matches source images — no max-height conflict */
    overflow: hidden;
    background: var(--tmb-surface-2);
    position: relative;
    width: 100%;
}
/* Bulletproof image fill — beats parent theme's wp-post-image, LiteSpeed
   lazyload, and any size-attribute / height:auto interference */
.tmb-mag-col-feature-img > img,
.tmb-mag-col-feature-img > picture,
.tmb-mag-col-feature-img > picture > img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tmb-mag-col-feature:hover .tmb-mag-col-feature-img > img,
.tmb-mag-col-feature:hover .tmb-mag-col-feature-img > picture > img {
    transform: scale(1.04);
}
/* Placeholder column-feature: same ratio as real images for layout consistency */
.tmb-mag-col-feature-img.is-placeholder {
    aspect-ratio: 1200 / 628;
}
.tmb-mag-col-feature-img.is-placeholder span {
    font-size: clamp(32px, 5vw, 52px);
    opacity: 0.4;
}
.tmb-mag-col-feature-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.tmb-mag-col-feature-body h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.01em;
}
.tmb-mag-col-feature-body h3 a { color: var(--tmb-text); }
.tmb-mag-col-feature-body p {
    color: var(--tmb-text-muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* ----- Promo strip ----- */
.tmb-mag-promo {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px 28px;
    border-radius: var(--tmb-radius);
    background: linear-gradient(90deg, var(--tmb-accent-deep), var(--tmb-accent), var(--tmb-accent));
    color: #fff;
    box-shadow: 0 12px 32px rgba(var(--tmb-accent-rgb), 0.28);
}
.tmb-mag-promo-tag {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255,255,255,0.18);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.tmb-mag-promo strong {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    flex: 1;
    min-width: 220px;
}
.tmb-mag-promo-cta {
    padding: 10px 22px;
    background: #fff;
    color: var(--tmb-accent-hover) !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    transition: transform var(--tmb-transition);
}
.tmb-mag-promo-cta:hover { transform: translateY(-2px); }
@media (max-width: 600px) {
    .tmb-mag-promo { padding: 16px 18px; gap: 12px; }
    .tmb-mag-promo strong { font-size: 14px; min-width: 0; }
    .tmb-mag-promo-cta { padding: 9px 16px; font-size: 13px; }
}

/* ----- Recent news ----- */
.tmb-mag-recent .tmb-mag-list { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .tmb-mag-recent .tmb-mag-list { grid-template-columns: 1fr; } }

/* ----- Author + Popular meta band ----- */
.tmb-mag-meta {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 36px;
    align-items: start;
    padding: 32px;
    background: var(--tmb-surface);
    border: 1px solid var(--tmb-border);
    border-radius: var(--tmb-radius-lg);
}
@media (max-width: 720px) { .tmb-mag-meta { grid-template-columns: 1fr; padding: 22px; gap: 28px; } }

.tmb-mag-meta-author { text-align: center; padding-right: 24px; border-right: 1px solid var(--tmb-border); }
@media (max-width: 720px) { .tmb-mag-meta-author { padding-right: 0; border-right: none; padding-bottom: 24px; border-bottom: 1px solid var(--tmb-border); } }
.tmb-mag-author-avatar {
    width: 96px !important; height: 96px !important;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: block;
    border: 3px solid var(--tmb-bg);
    box-shadow: var(--tmb-shadow);
}
.tmb-mag-meta-author h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--tmb-text);
}
.tmb-mag-meta-author p {
    color: var(--tmb-text-muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 16px;
}

.tmb-mag-meta-popular h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tmb-text-muted);
    margin: 0 0 16px;
}
.tmb-mag-popular-list {
    list-style: none;
    margin: 0; padding: 0;
    counter-reset: tmb-pop;
}
.tmb-mag-popular-list li {
    counter-increment: tmb-pop;
    margin-bottom: 12px;
    position: relative;
    padding-left: 32px;
}
.tmb-mag-popular-list li::before {
    content: counter(tmb-pop, decimal-leading-zero);
    position: absolute;
    left: 0; top: 4px;
    font-size: 18px;
    font-weight: 900;
    color: var(--tmb-accent);
    opacity: 0.5;
    letter-spacing: -0.04em;
}
.tmb-mag-popular-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 12px;
    align-items: center;
    color: var(--tmb-text) !important;
    text-decoration: none !important;
    padding: 8px;
    border-radius: var(--tmb-radius-sm);
    transition: background var(--tmb-transition);
}
.tmb-mag-popular-item:hover { background: var(--tmb-surface-2); }
.tmb-mag-popular-item img {
    width: 60px; height: 60px;
    object-fit: cover;
    border-radius: 8px;
}
.tmb-mag-popular-item span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tmb-text);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== Educational disclaimer banner ===== */
.tmb-mag-disclaimer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 26px;
    border-radius: var(--tmb-radius-lg);
    border: 1px solid rgba(245, 158, 11, 0.28);
    background:
      linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}
/* Subtle accent bar on the left edge */
.tmb-mag-disclaimer::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #f59e0b, #d97706);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}

.tmb-mag-disclaimer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}
.tmb-mag-disclaimer-icon svg { width: 20px; height: 20px; }

.tmb-mag-disclaimer-body { min-width: 0; }
.tmb-mag-disclaimer-heading {
    font-family: var(--tmb-font-sans);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--tmb-text);
    margin: 0 0 4px;
    line-height: 1.3;
    text-transform: none;
}
.tmb-mag-disclaimer p {
    color: var(--tmb-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    max-width: 78ch;
}

/* Dark-mode tones — slightly warmer accent on dark surface */
body.options_dark_skin .tmb-mag-disclaimer {
    border-color: rgba(251, 191, 36, 0.22);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.07), rgba(251, 191, 36, 0.015));
}
body.options_dark_skin .tmb-mag-disclaimer-icon {
    background: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
}
body.options_dark_skin .tmb-mag-disclaimer::before {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.32);
}

@media (max-width: 600px) {
    .tmb-mag-disclaimer { padding: 18px 18px 18px 22px; gap: 14px; }
    .tmb-mag-disclaimer-icon { width: 36px; height: 36px; }
    .tmb-mag-disclaimer-heading { font-size: 14px; }
    .tmb-mag-disclaimer p { font-size: 13.5px; }
}

/* ===== Tag cloud + Telegram CTA — premium upgrade ===== */
.tmb-mag-tags {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 32px;
    align-items: stretch;
}
@media (max-width: 760px) {
    .tmb-mag-tags { grid-template-columns: 1fr; gap: 24px; }
}

/* ----- Section headings (eyebrow style) ----- */
.tmb-mag-tags-title,
.tmb-mag-tg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tmb-font-sans);
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--tmb-text-muted) !important;
    margin: 0 0 18px !important;
    line-height: 1;
}
.tmb-mag-tags-title::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tmb-accent);
    box-shadow: 0 0 0 4px var(--tmb-accent-soft);
    flex-shrink: 0;
}
.tmb-mag-tg-eyebrow {
    color: rgba(255, 255, 255, 0.78) !important;
    margin-bottom: 14px !important;
}
.tmb-mag-tg-eyebrow svg { width: 14px; height: 14px; opacity: 0.92; flex-shrink: 0; }

/* ----- Tag cloud ----- */
.tmb-mag-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tmb-mag-tag-cloud a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    background: var(--tmb-surface) !important;
    border: 1px solid var(--tmb-border) !important;
    border-radius: 999px !important;
    color: var(--tmb-text-muted) !important;
    font-family: var(--tmb-font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0;
    text-decoration: none !important;
    transition:
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tmb-mag-tag-cloud a::before {
    content: "#";
    margin-right: 4px;
    color: var(--tmb-accent);
    font-weight: 700;
    opacity: 0.55;
    transition: opacity 200ms ease, color 200ms ease;
}
.tmb-mag-tag-cloud a:hover {
    background: var(--tmb-accent) !important;
    border-color: var(--tmb-accent) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(var(--tmb-accent-rgb), 0.32);
}
.tmb-mag-tag-cloud a:hover::before {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}

/* ----- Telegram CTA card — premium ----- */
.tmb-mag-tg-block {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 32px 30px 30px;
    border-radius: 20px;
    color: #fff;
    background:
      radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18) 0%, transparent 55%),
      linear-gradient(135deg, #229ED9 0%, #2AABEE 50%, #1E88E5 100%);
    box-shadow:
      0 16px 40px -8px rgba(34, 158, 217, 0.50),
      0 4px 12px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
/* Oversized Telegram paper-plane watermark in the corner */
.tmb-mag-tg-block::before {
    content: "";
    position: absolute;
    bottom: -55px;
    right: -55px;
    width: 240px;
    height: 240px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0Zm5.562 8.161-1.858 8.762c-.14.62-.507.772-1.027.481l-2.84-2.092-1.37 1.317c-.152.152-.279.279-.572.279l.204-2.888 5.254-4.744c.228-.204-.05-.317-.354-.113l-6.49 4.087-2.798-.873c-.607-.19-.619-.607.127-.899l10.938-4.214c.506-.19.95.114.786.897Z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.12;
    z-index: -1;
    pointer-events: none;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms ease;
}
/* Subtle diagonal shine sweep */
.tmb-mag-tg-block::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
    pointer-events: none;
    z-index: -1;
    animation: tmb-tg-shine 6s ease-in-out infinite;
}
@keyframes tmb-tg-shine {
    0%, 100% { transform: translateX(-30%); }
    50%      { transform: translateX(30%); }
}
.tmb-mag-tg-block:hover::before {
    opacity: 0.18;
    transform: rotate(-6deg) scale(1.05);
}

.tmb-mag-tg-headline {
    font-family: var(--tmb-font-sans) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    margin: 0 0 10px !important;
    text-transform: none !important;
}
.tmb-mag-tg-block p {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin: 0 0 22px !important;
    max-width: 38ch;
}

/* Premium Telegram button.
   The selector is doubled (.tmb-btn.tmb-mag-tg-btn) so the color/background
   here win against the generic .tmb-btn rule below — without that, the
   accent-contrast color from .tmb-btn resolves to white on light brand
   colors and the text disappears against the white pill. */
.tmb-mag-tg-btn,
.tmb-btn.tmb-mag-tg-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 22px !important;
    background: #fff !important;
    color: #1E88E5 !important;
    border-radius: 999px !important;
    font-family: var(--tmb-font-sans) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transition:
        transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 220ms ease,
        gap 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.tmb-mag-tg-btn:hover,
.tmb-btn.tmb-mag-tg-btn:hover {
    background: #fff !important;
    color: #229ED9 !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24);
    gap: 14px !important;
}
.tmb-mag-tg-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.tmb-mag-tg-arrow {
    display: inline-block;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 2px;
}
.tmb-mag-tg-btn:hover .tmb-mag-tg-arrow {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .tmb-mag-tg-block::after { animation: none; }
    .tmb-mag-tg-block:hover::before { transform: none; }
}
@media (max-width: 480px) {
    .tmb-mag-tg-block { padding: 26px 22px; }
    .tmb-mag-tg-headline { font-size: 21px !important; }
    .tmb-mag-tg-block::before { width: 180px; height: 180px; bottom: -40px; right: -40px; }
}

/* ======================================================================
   Inline Related Posts (plugin-injected CTA links)
   Targets <a> with a nested <style> + .postTitle/.ctaText. Forces theme-aware
   colors + premium card styling. Works in both light and dark mode.
   ====================================================================== */
body.tmb-modern .tmb-article-content a:has(.postTitle),
body.tmb-modern .tmb-article-content a:has(.ctaText) {
  display: block !important;
  padding: 18px 22px !important;
  margin: 1.6em 0 !important;
  background: var(--tmb-surface) !important;
  background-color: var(--tmb-surface) !important;
  background-image: none !important;
  border: 1px solid var(--tmb-border) !important;
  border-left: 4px solid var(--tmb-accent) !important;
  border-radius: var(--tmb-radius) !important;
  box-shadow: var(--tmb-shadow-sm) !important;
  text-decoration: none !important;
  color: var(--tmb-text) !important;
  transition: background var(--tmb-transition),
              border-color var(--tmb-transition),
              transform var(--tmb-transition),
              box-shadow var(--tmb-transition) !important;
  position: relative;
  opacity: 1 !important;
}
body.tmb-modern .tmb-article-content a:has(.postTitle):hover,
body.tmb-modern .tmb-article-content a:has(.ctaText):hover {
  background: var(--tmb-accent-soft) !important;
  background-color: var(--tmb-accent-soft) !important;
  border-color: var(--tmb-accent) !important;
  box-shadow: var(--tmb-shadow) !important;
  transform: translateX(3px);
}
/* Neutralize the inner div's plugin padding — our wrapper <a> handles spacing */
body.tmb-modern .tmb-article-content a:has(.postTitle) > div,
body.tmb-modern .tmb-article-content a:has(.ctaText) > div {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Eyebrow label — small uppercase "Related read →" */
body.tmb-modern .tmb-article-content .ctaText {
  display: block !important;
  color: var(--tmb-accent) !important;
  font-family: var(--tmb-font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  background: transparent !important;
}
body.tmb-modern .tmb-article-content .ctaText::before {
  content: "Related read \2192";    /* → */
}

/* Post title — main heading of the card */
body.tmb-modern .tmb-article-content .postTitle {
  display: block !important;
  color: var(--tmb-text) !important;
  font-family: var(--tmb-font-sans) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  background: transparent !important;
}
body.tmb-modern .tmb-article-content a:has(.postTitle):hover .postTitle,
body.tmb-modern .tmb-article-content a:has(.ctaText):hover .postTitle {
  color: var(--tmb-accent) !important;
  text-decoration: none !important;
}

@media (max-width: 640px) {
  body.tmb-modern .tmb-article-content a:has(.postTitle),
  body.tmb-modern .tmb-article-content a:has(.ctaText) {
    padding: 16px 18px !important;
    margin: 1.4em 0 !important;
  }
  body.tmb-modern .tmb-article-content .postTitle { font-size: 16px !important; }
}

/* ======================================================================
   PREMIUM POLISH (Tier 1)
   - scroll-reveal, drop cap, pull-quote, animated link underlines,
     numbered editor's picks
   ====================================================================== */

/* Scroll reveal — JS adds .tmb-reveal to targets, then .is-visible when
   they enter the viewport. */
.tmb-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 550ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 550ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.tmb-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger grid children so cards cascade in */
.tmb-grid > .tmb-card.tmb-reveal { transition-delay: 0ms; }
.tmb-grid > .tmb-card.tmb-reveal:nth-child(2) { transition-delay: 80ms; }
.tmb-grid > .tmb-card.tmb-reveal:nth-child(3) { transition-delay: 160ms; }
.tmb-grid > .tmb-card.tmb-reveal:nth-child(4) { transition-delay: 220ms; }
.tmb-grid > .tmb-card.tmb-reveal:nth-child(5) { transition-delay: 280ms; }
.tmb-grid > .tmb-card.tmb-reveal:nth-child(6) { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .tmb-reveal { opacity: 1; transform: none; transition: none; }
}

/* Drop cap — first letter of first paragraph in an article */
body.tmb-modern .tmb-article-content > p:first-child::first-letter {
  float: left;
  font-family: var(--tmb-font-sans);
  font-size: 4.6em;
  font-weight: 800;
  line-height: 0.92;
  margin: 4px 12px 0 -2px;
  color: var(--tmb-accent);
  letter-spacing: -0.04em;
}
@media (max-width: 640px) {
  body.tmb-modern .tmb-article-content > p:first-child::first-letter {
    font-size: 3.8em;
    margin-right: 10px;
  }
}

/* Pull-quote / blockquote redesign — covers raw <blockquote> and all
   Gutenberg block variants (.wp-block-quote, .wp-block-pullquote,
   .is-style-large, .is-style-plain) */
body.tmb-modern .tmb-article-content blockquote,
body.tmb-modern .tmb-article-content .wp-block-quote,
body.tmb-modern .tmb-article-content .wp-block-pullquote {
  position: relative;
  border: none !important;
  border-left: none !important;
  padding: 8px 0 8px 56px !important;
  margin: 2.2em 0 !important;
  font-family: var(--tmb-font-sans);
  font-size: 22px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--tmb-text) !important;
  letter-spacing: -0.01em;
  font-style: normal !important;
  background: transparent !important;
}
body.tmb-modern .tmb-article-content blockquote::before,
body.tmb-modern .tmb-article-content .wp-block-quote::before,
body.tmb-modern .tmb-article-content .wp-block-pullquote::before {
  content: "\201C";                     /* fancy left quote */
  position: absolute;
  top: -18px;
  left: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 88px;
  line-height: 1;
  color: var(--tmb-accent);
  font-weight: 700;
  pointer-events: none;
}
body.tmb-modern .tmb-article-content blockquote p,
body.tmb-modern .tmb-article-content .wp-block-quote p,
body.tmb-modern .tmb-article-content .wp-block-pullquote p {
  margin: 0 0 12px !important;
  color: var(--tmb-text) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
}
body.tmb-modern .tmb-article-content blockquote p:last-child,
body.tmb-modern .tmb-article-content .wp-block-quote p:last-child,
body.tmb-modern .tmb-article-content .wp-block-pullquote p:last-child { margin-bottom: 0 !important; }

/* Attribution (cite) */
body.tmb-modern .tmb-article-content blockquote cite,
body.tmb-modern .tmb-article-content .wp-block-quote cite,
body.tmb-modern .tmb-article-content .wp-block-pullquote cite,
body.tmb-modern .tmb-article-content blockquote footer,
body.tmb-modern .tmb-article-content .wp-block-quote footer,
body.tmb-modern .tmb-article-content .wp-block-pullquote__citation {
  display: block;
  margin-top: 14px;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 600;
  color: var(--tmb-text-muted) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.tmb-modern .tmb-article-content blockquote cite::before,
body.tmb-modern .tmb-article-content .wp-block-quote cite::before { content: "— "; }

/* "Large" style variant — bigger, center-aligned, full-bleed feel */
body.tmb-modern .tmb-article-content .wp-block-quote.is-style-large,
body.tmb-modern .tmb-article-content .wp-block-pullquote.is-style-large {
  padding: 48px 32px 32px !important;
  margin: 2.5em 0 !important;
  font-size: 26px;
  text-align: center;
}
body.tmb-modern .tmb-article-content .wp-block-quote.is-style-large::before,
body.tmb-modern .tmb-article-content .wp-block-pullquote.is-style-large::before {
  left: 50%;
  transform: translateX(-50%);
  top: -4px;
  font-size: 110px;
}
body.tmb-modern .tmb-article-content .wp-block-quote.is-style-plain {
  padding: 0 !important;
  font-size: 20px;
}
body.tmb-modern .tmb-article-content .wp-block-quote.is-style-plain::before { display: none; }

/* Pullquote with border-top/border-bottom (Gutenberg default pullquote style) */
body.tmb-modern .tmb-article-content .wp-block-pullquote:not(.is-style-large) {
  padding: 32px 24px !important;
  border-top: 2px solid var(--tmb-border) !important;
  border-bottom: 2px solid var(--tmb-border) !important;
  text-align: center;
  border-left: none !important;
}
body.tmb-modern .tmb-article-content .wp-block-pullquote:not(.is-style-large)::before {
  left: 50%;
  transform: translateX(-50%);
  top: 4px;
  font-size: 64px;
}

/* Inline <q> quotes */
body.tmb-modern .tmb-article-content q {
  font-style: italic;
  color: var(--tmb-text);
  quotes: "\201C" "\201D" "\2018" "\2019";
}
body.tmb-modern .tmb-article-content q::before { content: open-quote; color: var(--tmb-accent); font-weight: 700; }
body.tmb-modern .tmb-article-content q::after  { content: close-quote; color: var(--tmb-accent); font-weight: 700; }

@media (max-width: 640px) {
  body.tmb-modern .tmb-article-content blockquote,
  body.tmb-modern .tmb-article-content .wp-block-quote,
  body.tmb-modern .tmb-article-content .wp-block-pullquote {
    padding-left: 40px !important;
    font-size: 19px;
  }
  body.tmb-modern .tmb-article-content blockquote::before,
  body.tmb-modern .tmb-article-content .wp-block-quote::before,
  body.tmb-modern .tmb-article-content .wp-block-pullquote::before {
    font-size: 66px;
    top: -14px;
  }
  body.tmb-modern .tmb-article-content .wp-block-quote.is-style-large,
  body.tmb-modern .tmb-article-content .wp-block-pullquote.is-style-large {
    padding: 36px 20px 24px !important;
    font-size: 20px;
  }
  body.tmb-modern .tmb-article-content .wp-block-quote.is-style-large::before,
  body.tmb-modern .tmb-article-content .wp-block-pullquote.is-style-large::before {
    font-size: 80px;
  }
}

/* Animated link underline in article body */
body.tmb-modern .tmb-article-content a,
body.tmb-modern .tmb-comment-content a {
  color: var(--tmb-accent) !important;
  text-decoration: none !important;
  background-image: linear-gradient(var(--tmb-accent), var(--tmb-accent));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 220ms cubic-bezier(0.4, 0, 0.2, 1),
              color var(--tmb-transition);
}
body.tmb-modern .tmb-article-content a:hover,
body.tmb-modern .tmb-comment-content a:hover {
  background-size: 100% 3px;
  color: var(--tmb-accent-hover) !important;
}

/* Numbered Editor's Picks — subtle oversized accent number */
.tmb-grid-3 { counter-reset: tmb-pick; }
.tmb-grid-3 > .tmb-card {
  counter-increment: tmb-pick;
  position: relative;
}
.tmb-grid-3 > .tmb-card .tmb-card-body { position: relative; }
.tmb-grid-3 > .tmb-card .tmb-card-body::after {
  content: counter(tmb-pick, decimal-leading-zero);
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--tmb-font-sans);
  font-size: 34px;
  font-weight: 900;
  color: var(--tmb-accent);
  opacity: 0.16;
  line-height: 1;
  letter-spacing: -0.03em;
  pointer-events: none;
  user-select: none;
}

/* Page fade-in — kills flash of unstyled content feeling */
body.tmb-modern {
  animation: tmb-page-in 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes tmb-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.tmb-modern { animation: none; }
}

/* Image fade-in — only on card thumbs (single-post hero is the LCP and
   stays sharp; transform-scale on a large LCP image was perceived as blur). */
body.tmb-modern .tmb-card-thumb img {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.tmb-modern .tmb-card-thumb img.is-loaded,
body.tmb-modern .tmb-card-thumb img[data-loaded="1"] {
  opacity: 1;
}
body.tmb-modern .tmb-article-thumb img {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body.tmb-modern .tmb-card-thumb img { opacity: 1; transition: none; }
}

/* Premium focus ring — brand-colored, offset, rounded */
body.tmb-modern a:focus-visible,
body.tmb-modern button:focus-visible,
body.tmb-modern input:focus-visible,
body.tmb-modern textarea:focus-visible,
body.tmb-modern select:focus-visible {
  outline: 2px solid var(--tmb-accent) !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

/* ------- Breadcrumbs ------- */
.tmb-breadcrumbs {
  max-width: var(--tmb-max-w);
  margin: 0 auto;
  padding: 20px 24px 0;
}
.tmb-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--tmb-text-faint);
}
.tmb-breadcrumbs li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.tmb-breadcrumbs li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--tmb-text-faint);
  opacity: 0.6;
}
.tmb-breadcrumbs a {
  color: var(--tmb-text-muted) !important;
  text-decoration: none !important;
  transition: color var(--tmb-transition);
}
.tmb-breadcrumbs a:hover { color: var(--tmb-accent) !important; }
.tmb-breadcrumbs [aria-current="page"] {
  color: var(--tmb-text);
  font-weight: 500;
  max-width: 38ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .tmb-breadcrumbs { padding: 14px 16px 0; }
  .tmb-breadcrumbs ol { font-size: 12px; gap: 6px; }
  .tmb-breadcrumbs li + li::before { margin-right: 6px; }
  .tmb-breadcrumbs [aria-current="page"] { max-width: 18ch; }
}

/* Updated date accent (published + updated shown together) */
.tmb-article-updated { color: var(--tmb-text-faint); }
.tmb-article-updated time { color: var(--tmb-text); font-weight: 500; margin-left: 3px; }

/* ------- Page hero (archives, search) ------- */
.tmb-page-hero {
  text-align: center;
  padding: 64px 24px 24px;
  max-width: 780px;
  margin: 0 auto;
}
.tmb-page-hero .tmb-eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--tmb-accent);
  margin-bottom: 14px;
}
.tmb-page-hero h1 {
  font-family: var(--tmb-font-sans);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--tmb-text);
}
.tmb-page-hero p {
  color: var(--tmb-text-muted);
  font-size: 18px;
  margin: 0;
  line-height: 1.5;
}

/* ------- Homepage intro + topics ------- */
.tmb-intro {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 24px;
  text-align: center;
}
.tmb-intro-text {
  font-family: var(--tmb-font-sans);
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--tmb-text);
  margin: 0;
}

.tmb-topics {
  border-top: 1px solid var(--tmb-border);
  border-bottom: 1px solid var(--tmb-border);
  background: var(--tmb-surface);
  margin-top: 24px;
}
.tmb-topics-inner {
  max-width: var(--tmb-max-w);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tmb-topics-inner::-webkit-scrollbar { display: none; }
.tmb-topic {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tmb-text-muted) !important;
  transition: background var(--tmb-transition), color var(--tmb-transition);
  white-space: nowrap;
}
.tmb-topic:hover { background: var(--tmb-surface-2); color: var(--tmb-text) !important; }
.tmb-topic.is-active {
  background: var(--tmb-text);
  color: var(--tmb-bg) !important;
}

/* ------- Section heading (Latest posts / Page N) ------- */
.tmb-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 48px 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--tmb-border);
}
.tmb-section-head h2 {
  font-family: var(--tmb-font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tmb-text);
  margin: 0;
}
.tmb-section-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--tmb-text-muted);
  white-space: nowrap;
}
.tmb-section-link:hover { color: var(--tmb-accent); }

/* Grid when used for just the featured card */
.tmb-featured-only { padding: 32px 0 0; }

/* ------- Category hub ------- */
.tmb-hub-count {
  display: inline-block;
  padding: 4px 12px;
  margin-top: 16px;
  background: var(--tmb-surface-2);
  border-radius: 999px;
  font-size: 13px;
  color: var(--tmb-text-muted);
  font-weight: 500;
}

.tmb-hub-subcats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 48px;
}
.tmb-hub-subcat {
  padding: 22px;
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none !important;
  color: var(--tmb-text) !important;
  transition: border-color var(--tmb-transition),
              transform var(--tmb-transition),
              box-shadow var(--tmb-transition);
}
.tmb-hub-subcat:hover {
  border-color: var(--tmb-accent);
  transform: translateY(-2px);
  box-shadow: var(--tmb-shadow);
  color: var(--tmb-text) !important;
}
.tmb-hub-subcat-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tmb-text);
}
.tmb-hub-subcat-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tmb-text-muted);
}
.tmb-hub-subcat-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tmb-accent);
  margin-top: auto;
}

.tmb-hub-siblings {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--tmb-border);
}
.tmb-hub-siblings h2 {
  font-family: var(--tmb-font-sans);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--tmb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tmb-hub-siblings-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tmb-hub-sibling {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--tmb-border);
  border-radius: 999px;
  color: var(--tmb-text) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: border-color var(--tmb-transition),
              background var(--tmb-transition),
              color var(--tmb-transition);
}
.tmb-hub-sibling:hover {
  border-color: var(--tmb-accent);
  background: var(--tmb-accent-soft);
  color: var(--tmb-accent) !important;
}
.tmb-hub-sibling-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--tmb-surface-2);
  color: var(--tmb-text-faint);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.tmb-hub-sibling:hover .tmb-hub-sibling-count {
  background: var(--tmb-accent);
  color: var(--tmb-accent-contrast);
}

@media (max-width: 640px) {
  .tmb-hub-subcats { grid-template-columns: 1fr; gap: 10px; }
  .tmb-hub-subcat { padding: 18px; }
  .tmb-hub-siblings { margin-top: 40px; padding-top: 28px; }
}

/* ------- Card grid ------- */
.tmb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
  padding: 24px 0;
}
.tmb-card {
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--tmb-transition), box-shadow var(--tmb-transition), border-color var(--tmb-transition);
}
.tmb-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--tmb-shadow-lg);
  border-color: var(--tmb-border-strong);
}
.tmb-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tmb-surface-2);
}
.tmb-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tmb-card:hover .tmb-card-thumb img { transform: scale(1.04); }
.tmb-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.tmb-card-cat {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--tmb-accent);
}
.tmb-card-cat a { color: inherit; }
.tmb-card-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}
.tmb-card-title a { color: var(--tmb-text); }
.tmb-card-title a:hover { color: var(--tmb-accent); }
.tmb-card-excerpt {
  font-size: 15px;
  color: var(--tmb-text-muted);
  line-height: 1.6;
  margin: 0;
  /* Truncate to 3 lines so every card has consistent height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tmb-card-title {
  /* Also clamp long titles to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Featured card has more room — allow 3 lines of title */
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-title {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.tmb-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--tmb-text-faint);
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--tmb-border);
}
.tmb-card-meta a { color: inherit; }
.tmb-card-meta a:hover { color: var(--tmb-text); }
.tmb-card-meta .dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.5; }
.tmb-card-views { font-variant-numeric: tabular-nums; color: var(--tmb-text-muted); }
.tmb-card-views::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  vertical-align: -1px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Featured card — cinematic hero with image overlay + gradient */
.tmb-grid.has-featured > .tmb-card:first-child {
  grid-column: 1 / -1;
  display: block;
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border: none;
  border-radius: var(--tmb-radius-lg);
}
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-thumb {
  position: absolute;
  inset: 0;
  flex: none;
  aspect-ratio: auto;
  background: var(--tmb-surface-2);
  margin: 0;
}
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tmb-grid.has-featured > .tmb-card:first-child:hover .tmb-card-thumb img {
  transform: scale(1.03);
}
/* Dark gradient overlay — title legibility */
.tmb-grid.has-featured > .tmb-card:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.35) 60%,
    rgba(0, 0, 0, 0.85) 100%
  );
}
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 44px 48px 40px;
  flex: none;
  background: transparent !important;
  border: none;
  gap: 12px;
  max-width: 780px;
}
/* Featured pill — white for contrast on dark overlay */
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-body::before {
  content: "Featured";
  position: static;
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: #fff;
  color: #0a0a0a;
  font-family: var(--tmb-font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-cat a { color: #fff !important; opacity: 0.9; }
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-title { font-size: 38px; line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-title a,
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-title { color: #fff !important; }
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-excerpt { color: rgba(255, 255, 255, 0.82); font-size: 17px; max-width: 640px; }
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-meta {
  color: rgba(255, 255, 255, 0.7);
  border-top-color: rgba(255, 255, 255, 0.22);
}
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-meta a { color: rgba(255, 255, 255, 0.82); }
.tmb-grid.has-featured > .tmb-card:first-child .tmb-card-meta a:hover { color: #fff; }
.tmb-grid.has-featured > .tmb-card:first-child:hover {
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18);
}

/* Small screens: shorter cinematic ratio, tighter text */
@media (max-width: 820px) {
  .tmb-grid.has-featured > .tmb-card:first-child { aspect-ratio: 4 / 5; }
  .tmb-grid.has-featured > .tmb-card:first-child .tmb-card-body { padding: 24px; max-width: 100%; }
  .tmb-grid.has-featured > .tmb-card:first-child .tmb-card-title { font-size: 26px; }
  .tmb-grid.has-featured > .tmb-card:first-child .tmb-card-excerpt { font-size: 15px; }
}
@media (max-width: 480px) {
  .tmb-grid.has-featured > .tmb-card:first-child { aspect-ratio: 3 / 4; }
  .tmb-grid.has-featured > .tmb-card:first-child .tmb-card-title { font-size: 22px; }
  .tmb-grid.has-featured > .tmb-card:first-child .tmb-card-excerpt { display: none; }
}

/* ------- Pagination ------- */
.tmb-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 48px 0 24px;
}
.tmb-pagination .page-numbers {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius-sm);
  color: var(--tmb-text-muted);
  font-weight: 500;
  font-size: 14px;
  transition: all var(--tmb-transition);
}
.tmb-pagination .page-numbers:hover { border-color: var(--tmb-accent); color: var(--tmb-accent); }
.tmb-pagination .page-numbers.current {
  background: var(--tmb-accent);
  color: var(--tmb-accent-contrast);
  border-color: var(--tmb-accent);
}
.tmb-pagination .page-numbers.dots { border: none; background: transparent; }

/* ------- Single article ------- */
.tmb-article-hero {
  text-align: center;
  max-width: var(--tmb-read-w);
  margin: 0 auto;
  padding: 56px 24px 32px;
}
.tmb-article-cat {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--tmb-accent);
  margin-bottom: 18px;
}
.tmb-article-cat a { color: inherit; }
.tmb-article-title {
  font-family: var(--tmb-font-sans);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--tmb-text);
}
.tmb-article-subtitle {
  font-size: 20px;
  color: var(--tmb-text-muted);
  line-height: 1.5;
  margin: 0 auto 28px;
  max-width: 640px;
  font-weight: 400;
}
.tmb-article-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  color: var(--tmb-text-faint);
  padding: 14px 0;
  border-top: 1px solid var(--tmb-border);
  border-bottom: 1px solid var(--tmb-border);
}
.tmb-article-meta-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tmb-text);
}
.tmb-article-meta-author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.tmb-article-meta-author strong { font-weight: 600; }
.tmb-article-meta .dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.5; }

.tmb-article-thumb {
  max-width: 1040px;
  margin: 0 auto 40px;
  padding: 0 24px;
}
.tmb-article-thumb img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--tmb-radius-lg);
}

/* Reading layout with optional share rail + TOC */
.tmb-read {
  max-width: var(--tmb-max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 32px;
  position: relative;
}
@media (min-width: 1100px) {
  .tmb-read {
    grid-template-columns: 64px minmax(0, var(--tmb-read-w)) 1fr;
    justify-content: center;
  }
}
@media (min-width: 1280px) {
  .tmb-read {
    grid-template-columns: 64px minmax(0, var(--tmb-read-w)) 260px;
  }
}

.tmb-article {
  grid-column: 1 / -1;
  max-width: var(--tmb-read-w);
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 1100px) {
  .tmb-article { grid-column: 2; margin: 0; }
}
.tmb-article-content {
  font-family: var(--tmb-font-sans) !important;
  font-size: 18px;
  line-height: 1.7;
  color: var(--tmb-text) !important;
  letter-spacing: -0.003em;
}

/* Kill any inherited dim/opacity from pasted-content classes (Chakra, AI
   generators etc.). Force all in-article text to the theme color at full
   opacity regardless of class soup on the element. */
body.tmb-modern .tmb-article-content,
body.tmb-modern .tmb-article-content p,
body.tmb-modern .tmb-article-content li,
body.tmb-modern .tmb-article-content span,
body.tmb-modern .tmb-article-content div,
body.tmb-modern .tmb-article-content td,
body.tmb-modern .tmb-article-content th {
  color: var(--tmb-text) !important;
  opacity: 1 !important;
  background: transparent !important;
}
body.tmb-modern .tmb-article-content strong,
body.tmb-modern .tmb-article-content b { color: var(--tmb-text) !important; font-weight: 700 !important; }
body.tmb-modern .tmb-article-content h1,
body.tmb-modern .tmb-article-content h2,
body.tmb-modern .tmb-article-content h3,
body.tmb-modern .tmb-article-content h4,
body.tmb-modern .tmb-article-content h5,
body.tmb-modern .tmb-article-content h6 {
  color: var(--tmb-text) !important;
  opacity: 1 !important;
}
body.tmb-modern .tmb-article-content a { color: var(--tmb-accent) !important; }
/* ---- Article spacing system — consistent vertical rhythm ---- */

/* Reset any inherited margin-top; we set it per-element explicitly */
.tmb-article-content > * { margin-top: 0; margin-bottom: 0; }
.tmb-article-content > *:first-child { margin-top: 0 !important; }

/* Paragraphs */
.tmb-article-content p { margin: 0 0 1.25em; }

/* Headings — roomy above, tight below so the text that follows reads as "part of" the heading */
.tmb-article-content h2 {
  font-family: var(--tmb-font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 2em 0 0.6em;
  line-height: 1.25;
  color: var(--tmb-text);
}
.tmb-article-content h3 {
  font-family: var(--tmb-font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 1.75em 0 0.5em;
  line-height: 1.3;
  color: var(--tmb-text);
}
.tmb-article-content h4 {
  font-family: var(--tmb-font-sans);
  font-size: 18px;
  font-weight: 700;
  margin: 1.5em 0 0.4em;
  line-height: 1.35;
  color: var(--tmb-text);
}
.tmb-article-content h5 {
  font-family: var(--tmb-font-sans);
  font-size: 16px;
  font-weight: 700;
  margin: 1.4em 0 0.4em;
  line-height: 1.4;
  color: var(--tmb-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Headings directly after headings — tighter (avoid double stacking gap) */
.tmb-article-content h2 + h3,
.tmb-article-content h3 + h4,
.tmb-article-content h4 + h5 { margin-top: 0.8em; }

/* Headings after figures get a touch more breathing room */
.tmb-article-content figure + h2,
.tmb-article-content figure + h3,
.tmb-article-content img + h2,
.tmb-article-content img + h3 { margin-top: 2.25em; }
.tmb-article-content a {
  color: var(--tmb-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tmb-article-content a:hover { text-decoration-thickness: 2px; }
.tmb-article-content strong { color: var(--tmb-text); font-weight: 700; }
.tmb-article-content em { font-style: italic; }
/* (Legacy blockquote rule removed — premium pull-quote above at ~L1003 handles it) */
/* ---- Lists — consistent with paragraph rhythm ---- */
.tmb-article-content ul,
.tmb-article-content ol {
  margin: 0 0 1.25em;
  padding-left: 1.6em;
}
.tmb-article-content li {
  margin: 0.5em 0;
  padding-left: 0.2em;
}
.tmb-article-content li::marker { color: var(--tmb-accent); }
.tmb-article-content li > p { margin: 0 0 0.5em; }
.tmb-article-content li > p:last-child { margin-bottom: 0; }
/* Nested lists: tighter margins so nesting reads as a child group */
.tmb-article-content li > ul,
.tmb-article-content li > ol {
  margin: 0.5em 0 0.25em;
  padding-left: 1.4em;
}
.tmb-article-content li > ul > li,
.tmb-article-content li > ol > li { margin: 0.3em 0; }

/* Definition lists */
.tmb-article-content dl { margin: 0 0 1.25em; }
.tmb-article-content dt { font-weight: 700; margin-top: 0.75em; }
.tmb-article-content dt:first-child { margin-top: 0; }
.tmb-article-content dd { margin: 0.25em 0 0.75em 1.5em; color: var(--tmb-text-muted); }
.tmb-article-content img,
.tmb-article-content figure {
  border-radius: var(--tmb-radius);
  margin: 2em 0;
}
.tmb-article-content figure img { border-radius: var(--tmb-radius); }
.tmb-article-content figcaption {
  font-family: var(--tmb-font-sans);
  font-size: 14px;
  color: var(--tmb-text-faint);
  text-align: center;
  margin-top: 10px;
}
.tmb-article-content code {
  font-family: var(--tmb-font-mono);
  font-size: 0.88em;
  background: var(--tmb-code-bg);
  padding: 2px 6px;
  border-radius: 4px;
}
.tmb-article-content pre {
  background: var(--tmb-code-bg);
  padding: 20px 24px;
  border-radius: var(--tmb-radius);
  overflow-x: auto;
  font-family: var(--tmb-font-mono);
  font-size: 15px;
  line-height: 1.6;
  margin: 2em 0;
}
.tmb-article-content pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}
.tmb-article-content hr {
  border: none;
  border-top: 1px solid var(--tmb-border);
  margin: 3em 0;
}
.tmb-article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-family: var(--tmb-font-sans);
  font-size: 15px;
}
.tmb-article-content table th,
.tmb-article-content table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--tmb-border);
  text-align: left;
}
.tmb-article-content table th {
  font-weight: 700;
  background: var(--tmb-surface-2);
}

/* ------- Author hero (author.php) ------- */
.tmb-author-hero {
  text-align: center;
  padding: 56px 24px 24px;
  max-width: 720px;
  margin: 0 auto;
}
.tmb-author-hero-avatar {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: block;
  border: 3px solid var(--tmb-surface);
  box-shadow: var(--tmb-shadow);
}
.tmb-author-hero .tmb-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tmb-accent);
  margin-bottom: 10px;
}
.tmb-author-hero h1 {
  font-family: var(--tmb-font-sans);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--tmb-text);
  margin: 0 0 14px;
  line-height: 1.15;
}
.tmb-author-hero-bio {
  color: var(--tmb-text-muted);
  font-size: 17px;
  line-height: 1.55;
  margin: 0 auto 18px;
  max-width: 580px;
}
.tmb-author-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
  color: var(--tmb-text-faint);
}
.tmb-author-hero-meta a { color: var(--tmb-accent); font-weight: 500; }
.tmb-author-hero-meta .dot {
  width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.5;
}
@media (max-width: 640px) {
  .tmb-author-hero { padding: 32px 16px 16px; }
  .tmb-author-hero-avatar { width: 80px !important; height: 80px !important; }
  .tmb-author-hero-bio { font-size: 16px; }
}

/* ------- Mobile sticky share bar (≤1099px only) ------- */
.tmb-share-mobile {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 88;
  padding: 8px;
  gap: 4px;
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15),
              0 2px 6px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
}
body.options_dark_skin .tmb-share-mobile {
  background: rgba(20, 20, 24, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
              0 2px 6px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1099px) {
  body.single .tmb-share-mobile { display: inline-flex; align-items: center; }
}
.tmb-share-mobile-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--tmb-text-muted) !important;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  transition: color var(--tmb-transition), background var(--tmb-transition), transform 120ms ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tmb-share-mobile-btn:hover,
.tmb-share-mobile-btn:active {
  background: var(--tmb-accent-soft);
  color: var(--tmb-accent) !important;
}
.tmb-share-mobile-btn:active { transform: scale(0.92); }
.tmb-share-mobile-btn svg { width: 18px; height: 18px; pointer-events: none; }

/* Hide FAB Telegram + go-top on single posts ≤1099px so they don't collide with share bar */
@media (max-width: 1099px) {
  body.single .tmb-tg-fab { bottom: 72px; }
  body.single #go-top { bottom: 128px !important; }
}

/* ------- Share rail ------- */
.tmb-share-rail {
  grid-column: 1 / -1;
  order: 3;
  margin: 24px 0 0;
}
.tmb-share-rail-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius);
}
.tmb-share-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--tmb-text-muted);
  margin-right: 4px;
}
.tmb-share-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tmb-surface-2);
  color: var(--tmb-text-muted) !important;
  border: none;
  cursor: pointer;
  transition: background var(--tmb-transition), color var(--tmb-transition), transform var(--tmb-transition);
  position: relative;
}
.tmb-share-btn:hover {
  background: var(--tmb-accent);
  color: var(--tmb-accent-contrast) !important;
  transform: translateY(-1px);
}
.tmb-share-btn svg { width: 16px; height: 16px; }

@media (min-width: 1100px) {
  .tmb-share-rail {
    order: initial;
    grid-column: 1;
    margin: 0;
    position: sticky;
    top: 96px;
    align-self: start;
  }
  .tmb-share-rail-inner {
    flex-direction: column;
    padding: 12px;
    gap: 6px;
    background: transparent;
    border: none;
  }
  .tmb-share-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 0 8px;
  }
}

/* ------- Table of contents ------- */
.tmb-toc {
  grid-column: 1 / -1;
  order: 2;
  margin-bottom: 24px;
}
.tmb-toc-inner {
  padding: 20px 22px;
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius);
}
.tmb-toc-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--tmb-text-muted);
  margin-bottom: 12px;
}
.tmb-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tmb-toc-list li { list-style: none; margin: 0; }
.tmb-toc-list a {
  display: block;
  padding: 6px 10px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tmb-text-muted);
  border-radius: 0 var(--tmb-radius-sm) var(--tmb-radius-sm) 0;
  transition: background var(--tmb-transition), color var(--tmb-transition), border-color var(--tmb-transition);
}
.tmb-toc-list a:hover { color: var(--tmb-text); background: var(--tmb-surface-2); }
.tmb-toc-list a.is-active {
  color: var(--tmb-accent);
  border-left-color: var(--tmb-accent);
  background: var(--tmb-accent-soft);
}
/* Read sections — muted + filled dot before the label */
.tmb-toc-list a.is-read {
  color: var(--tmb-text-faint);
  opacity: 0.85;
}
.tmb-toc-list a.is-read::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--tmb-accent);
  vertical-align: middle;
  transform: translateY(-1px);
}
.tmb-toc-list a.is-active::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  border: 2px solid var(--tmb-accent);
  background: transparent;
  vertical-align: middle;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px var(--tmb-accent-soft);
}
.tmb-toc-list .tmb-toc-h3 a { padding-left: 24px; font-size: 13px; }

/* Filled progress rail on desktop — runs down the left border of the TOC */
@media (min-width: 1280px) {
  .tmb-toc { --tmb-toc-progress: 0%; }
  .tmb-toc .tmb-toc-inner {
    position: relative;
    overflow: visible;
  }
  .tmb-toc .tmb-toc-inner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(
      to bottom,
      var(--tmb-accent) 0,
      var(--tmb-accent) var(--tmb-toc-progress, 0%),
      transparent var(--tmb-toc-progress, 0%)
    );
    transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
}

/* =====================================================================
 * TOC — sticky sidebar at ≥1280px, collapsed mobile fallback below.
 * ===================================================================== */

/* Mobile / tablet: hide the sidebar variant entirely; show <details>. */
.tmb-toc.tmb-toc-rail { display: none; }

.tmb-toc-mobile {
  margin: 0 auto 24px;
  padding: 0;
  background: var(--tmb-surface, #131316);
  border: 1px solid var(--tmb-border, rgba(255,255,255,0.08));
  border-radius: var(--tmb-radius-lg, 14px);
  overflow: hidden;
}
.tmb-toc-mobile > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.tmb-toc-mobile > summary::-webkit-details-marker { display: none; }
.tmb-toc-mobile > summary::after {
  content: "▾";
  display: inline-block;
  font-size: 14px;
  opacity: 0.6;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tmb-toc-mobile[open] > summary::after { transform: rotate(180deg); }
.tmb-toc-mobile > summary .tmb-toc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--tmb-text-soft, var(--tmb-text));
  opacity: 0.85;
}
.tmb-toc-mobile > .tmb-toc-list {
  list-style: none;
  margin: 0;
  padding: 4px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tmb-toc-mobile .tmb-toc-list a {
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 8px;
  display: block;
  text-decoration: none;
  color: var(--tmb-text-soft, var(--tmb-text));
}
.tmb-toc-mobile .tmb-toc-list a.is-active {
  background: var(--tmb-accent-soft, rgba(var(--tmb-accent-rgb), 0.14));
  color: var(--tmb-accent);
  font-weight: 600;
}
.tmb-toc-mobile .tmb-toc-list .tmb-toc-h3 a { padding-left: 26px; font-size: 13px; }

/* ≥1280px: show sticky sidebar TOC, hide the mobile <details>. */
@media (min-width: 1280px) {
  .tmb-toc-mobile { display: none !important; }
  .tmb-toc.tmb-toc-rail {
    display: block;
    grid-column: 3;
    margin: 8px 0 0 32px;
    padding-right: 12px;
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tmb-border) transparent;
  }
  .tmb-toc.tmb-toc-rail::-webkit-scrollbar { width: 6px; }
  .tmb-toc.tmb-toc-rail::-webkit-scrollbar-thumb { background: var(--tmb-border); border-radius: 3px; }
  .tmb-toc.tmb-toc-rail .tmb-toc-inner {
    position: relative;
    padding: 6px 0 6px 22px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--tmb-border);
    border-radius: 0;
  }
  .tmb-toc.tmb-toc-rail .tmb-toc-inner::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -1px;
    width: 2px;
    background: linear-gradient(
      to bottom,
      var(--tmb-accent) 0,
      var(--tmb-accent) var(--tmb-toc-progress, 0%),
      transparent var(--tmb-toc-progress, 0%)
    );
    transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  .tmb-toc.tmb-toc-rail .tmb-toc-label {
    display: block;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    opacity: 0.75;
  }
  .tmb-toc.tmb-toc-rail .tmb-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .tmb-toc.tmb-toc-rail .tmb-toc-list a {
    display: block;
    padding: 8px 12px;
    font-size: 13.5px;
    line-height: 1.45;
    border-radius: 8px;
    text-decoration: none;
    color: var(--tmb-text-soft, var(--tmb-text));
    transition: background 200ms, color 200ms;
  }
  .tmb-toc.tmb-toc-rail .tmb-toc-list a:hover {
    background: var(--tmb-surface-2);
    color: var(--tmb-text);
  }
  .tmb-toc.tmb-toc-rail .tmb-toc-list a.is-active {
    background: var(--tmb-accent-soft, rgba(var(--tmb-accent-rgb), 0.14));
    color: var(--tmb-accent);
    font-weight: 600;
  }
  .tmb-toc.tmb-toc-rail .tmb-toc-list .tmb-toc-h3 a { padding-left: 28px; font-size: 12.5px; }
}

@media (min-width: 1440px) {
  .tmb-toc.tmb-toc-rail { margin-left: 48px; }
  .tmb-toc.tmb-toc-rail .tmb-toc-inner { padding-left: 26px; }
  .tmb-toc.tmb-toc-rail .tmb-toc-list a { padding: 9px 14px; font-size: 14px; }
}

/* ------- Tags ------- */
.tmb-article-tags {
  max-width: var(--tmb-read-w);
  margin: 40px auto 0;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tmb-article-tags .tmb-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--tmb-text-muted);
  margin-right: 4px;
}
.tmb-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--tmb-surface-2);
  color: var(--tmb-text-muted) !important;
  border-radius: 999px;
  transition: background var(--tmb-transition), color var(--tmb-transition);
}
.tmb-tag:hover {
  background: var(--tmb-accent);
  color: var(--tmb-accent-contrast) !important;
}

/* ------- Author box ------- */
.tmb-author-box {
  max-width: var(--tmb-read-w);
  margin: 48px auto;
  padding: 28px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius);
}
.tmb-author-box img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tmb-author-box-body { flex: 1; min-width: 0; }
.tmb-author-box-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--tmb-text-faint);
  margin-bottom: 4px;
}
.tmb-author-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--tmb-text);
}
.tmb-author-box p {
  color: var(--tmb-text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ------- Related posts ------- */
.tmb-related {
  background: linear-gradient(180deg, transparent, var(--tmb-surface) 40%);
  padding: 64px 0 24px;
  margin-top: 48px;
}
.tmb-related-inner {
  max-width: var(--tmb-max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------- 3-col grid for picks / related ------- */
.tmb-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .tmb-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tmb-grid-3 { grid-template-columns: 1fr; } }

/* Section hint (sits right of section head title) */
.tmb-section-hint {
  font-size: 13px;
  color: var(--tmb-text-faint);
  white-space: nowrap;
}

/* ------- Post navigation ------- */
.tmb-post-nav {
  max-width: var(--tmb-read-w);
  margin: 48px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tmb-post-nav a {
  display: block;
  padding: 20px;
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius);
  transition: border-color var(--tmb-transition), transform var(--tmb-transition);
  color: var(--tmb-text);
}
.tmb-post-nav a:hover { border-color: var(--tmb-accent); transform: translateY(-2px); color: var(--tmb-text); }
.tmb-post-nav .tmb-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--tmb-text-faint);
  margin-bottom: 6px;
  display: block;
}
.tmb-post-nav .tmb-next { text-align: right; }
@media (max-width: 640px) {
  .tmb-post-nav { grid-template-columns: 1fr; }
  .tmb-post-nav .tmb-next { text-align: left; }
}

/* ------- Comments ------- */
.tmb-comments {
  max-width: var(--tmb-read-w);
  margin: 48px auto;
  padding: 0 24px;
}
.tmb-comments .comments-title,
.tmb-comments h2:first-child,
.tmb-comments h3:first-child {
  font-family: var(--tmb-font-sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tmb-text);
  margin: 0 0 24px;
}
.tmb-comments ol.commentlist,
.tmb-comments ul.commentlist,
.tmb-comments .comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tmb-comments .comment,
.tmb-comments li.comment {
  padding: 20px 0;
  border-bottom: 1px solid var(--tmb-border);
  list-style: none;
}
.tmb-comments input[type="text"],
.tmb-comments input[type="email"],
.tmb-comments input[type="url"],
.tmb-comments textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius-sm);
  color: var(--tmb-text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color var(--tmb-transition), box-shadow var(--tmb-transition);
}
.tmb-comments input[type="text"]:focus,
.tmb-comments input[type="email"]:focus,
.tmb-comments input[type="url"]:focus,
.tmb-comments textarea:focus {
  border-color: var(--tmb-accent);
  box-shadow: 0 0 0 3px var(--tmb-accent-soft);
}
.tmb-comments .submit,
.tmb-comments button[type="submit"],
.tmb-comments input[type="submit"] {
  background: var(--tmb-accent);
  color: var(--tmb-accent-contrast);
  padding: 12px 28px;
  border: none;
  border-radius: var(--tmb-radius-sm);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tmb-transition);
}
.tmb-comments .submit:hover,
.tmb-comments button[type="submit"]:hover,
.tmb-comments input[type="submit"]:hover { background: var(--tmb-accent-hover); }

/* Structured comment list */
.tmb-comments-title {
  font-family: var(--tmb-font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tmb-text);
  margin: 0 0 24px;
}
.tmb-commentlist { list-style: none; padding: 0; margin: 0; }
.tmb-commentlist > li.tmb-comment { list-style: none; }
.tmb-commentlist .children {
  list-style: none;
  padding-left: 28px;
  margin: 16px 0 0;
  border-left: 2px solid var(--tmb-border);
}
.tmb-comment-body {
  padding: 18px 0;
  border-bottom: 1px solid var(--tmb-border);
}
.tmb-comment:last-child > .tmb-comment-body { border-bottom: none; }
.tmb-comment-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
.tmb-comment-head img.avatar {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: block;
  flex-shrink: 0;
}
.tmb-comment-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tmb-comment-author {
  font-size: 15px;
  font-weight: 600;
  color: var(--tmb-text);
}
.tmb-comment-author a { color: inherit; }
.tmb-comment-date {
  font-size: 13px;
  color: var(--tmb-text-faint);
}
.tmb-comment-awaiting {
  font-size: 13px;
  color: var(--tmb-text-muted);
  font-style: italic;
  margin: 0 0 10px;
}
.tmb-comment-content {
  font-family: var(--tmb-font-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tmb-text);
}
.tmb-comment-content p { margin: 0 0 0.8em; }
.tmb-comment-content p:last-child { margin-bottom: 0; }
.tmb-comment-actions {
  margin-top: 10px;
  display: flex;
  gap: 16px;
  font-size: 13px;
}
.tmb-comment-actions a {
  color: var(--tmb-text-muted);
  font-weight: 500;
}
.tmb-comment-actions a:hover { color: var(--tmb-accent); }

.tmb-comments-closed {
  color: var(--tmb-text-muted);
  font-size: 15px;
  margin: 24px 0;
  padding: 14px 18px;
  background: var(--tmb-surface-2);
  border-radius: var(--tmb-radius-sm);
}

/* Reply form — card wraps the whole #respond (title + form) */
body.tmb-modern #respond,
body.tmb-modern .comment-respond {
  margin: 32px 0 0 !important;
  padding: 32px !important;
  background: var(--tmb-surface) !important;
  border: 1px solid var(--tmb-border) !important;
  border-radius: var(--tmb-radius) !important;
}
body.tmb-modern .comment-form,
body.tmb-modern .tmb-comment-form {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Reply title — force over parent Wesper's h3 rules */
body.tmb-modern #respond #reply-title,
body.tmb-modern .comment-respond .comment-reply-title,
body.tmb-modern .tmb-comments .comment-reply-title,
body.tmb-modern .tmb-comments h3#reply-title {
  font-family: var(--tmb-font-sans) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  color: var(--tmb-text) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  border: none !important;
}
body.tmb-modern #reply-title small { font-size: 13px; font-weight: 400; margin-left: 8px; }
body.tmb-modern #reply-title small a { color: var(--tmb-accent); }

/* "Logged in as…" notice */
body.tmb-modern .logged-in-as {
  font-size: 14px;
  color: var(--tmb-text-muted);
  margin: 0 0 18px !important;
}
body.tmb-modern .logged-in-as a { color: var(--tmb-accent); }

/* Required-fields notice */
body.tmb-modern .comment-notes,
body.tmb-modern .comment-form .comment-notes {
  font-size: 13px;
  color: var(--tmb-text-faint);
  margin: 0 0 16px !important;
}

.comment-form p { margin: 0 0 16px !important; }
.comment-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tmb-text-muted);
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0;
}
.comment-form textarea {
  min-height: 120px;
  resize: vertical;
}
.comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 !important;
}
.comment-form .comment-form-cookies-consent input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--tmb-accent);
}
.comment-form .comment-form-cookies-consent label {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  color: var(--tmb-text-muted);
  line-height: 1.4;
}
.comment-form .form-submit { margin: 20px 0 0 !important; }
body.tmb-modern .comment-form .form-submit .submit,
body.tmb-modern .comment-form input[type="submit"] {
  font-family: var(--tmb-font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  background: var(--tmb-accent) !important;
  color: var(--tmb-accent-contrast) !important;
  border: none !important;
  border-radius: var(--tmb-radius-sm) !important;
  cursor: pointer;
  transition: background var(--tmb-transition), transform var(--tmb-transition);
}
body.tmb-modern .comment-form .form-submit .submit:hover,
body.tmb-modern .comment-form input[type="submit"]:hover {
  background: var(--tmb-accent-hover) !important;
  transform: translateY(-1px);
}

/* Mobile: tighten comment-respond card and make submit full-width */
@media (max-width: 640px) {
  body.tmb-modern #respond,
  body.tmb-modern .comment-respond {
    margin: 24px 0 0 !important;
    padding: 20px !important;
    border-radius: var(--tmb-radius) !important;
  }
  body.tmb-modern #respond #reply-title,
  body.tmb-modern .comment-respond .comment-reply-title {
    font-size: 18px !important;
    margin-bottom: 14px !important;
  }
  body.tmb-modern #reply-title small { display: block; margin: 4px 0 0; }
  body.tmb-modern .logged-in-as,
  body.tmb-modern .comment-notes { font-size: 13px; margin-bottom: 14px !important; }
  body.tmb-modern .comment-form textarea { min-height: 100px; font-size: 16px; }
  body.tmb-modern .comment-form input[type="text"],
  body.tmb-modern .comment-form input[type="email"],
  body.tmb-modern .comment-form input[type="url"] { font-size: 16px; padding: 12px 14px; }
  body.tmb-modern .comment-form .form-submit { margin: 16px 0 0 !important; }
  body.tmb-modern .comment-form .form-submit .submit,
  body.tmb-modern .comment-form input[type="submit"] {
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 13px !important;
  }
  body.tmb-modern .comment-form .comment-form-cookies-consent {
    margin: 12px 0 !important;
  }
  body.tmb-modern .comment-form .comment-form-cookies-consent label { font-size: 13px; }
  body.tmb-modern .tmb-comments { padding: 0 16px !important; margin: 32px auto !important; }
  body.tmb-modern .tmb-comments-title { font-size: 20px !important; margin-bottom: 16px !important; }
}

@media (max-width: 420px) {
  body.tmb-modern #respond,
  body.tmb-modern .comment-respond {
    padding: 16px !important;
  }
  body.tmb-modern .tmb-comments { padding: 0 14px !important; }
}

/* ------- Sidebar layout ------- */
.tmb-has-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  max-width: var(--tmb-max-w);
  margin: 0 auto;
  padding: 48px 24px;
  align-items: start;
}
@media (max-width: 960px) {
  .tmb-has-sidebar { grid-template-columns: 1fr; }
}
.tmb-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 960px) {
  .tmb-sidebar { position: static; }
}
.tmb-widget {
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius);
  padding: 24px;
}
.tmb-widget .widget-title,
.tmb-widget h2,
.tmb-widget h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tmb-text-muted);
  margin: 0 0 16px;
}
.tmb-widget ul { list-style: none; padding: 0; margin: 0; }
.tmb-widget li {
  padding: 10px 0;
  border-bottom: 1px solid var(--tmb-border);
}
.tmb-widget li:last-child { border-bottom: none; }
.tmb-widget a { color: var(--tmb-text); font-weight: 500; font-size: 15px; }
.tmb-widget a:hover { color: var(--tmb-accent); }

/* ------- Page (static) + Single Post -------
   GeneratePress parent forces .site-content .content-area { width: 70% }
   for the sidebar layout — even when no widgets are in the sidebar slot.
   Pages need full viewport (single-column content). Posts need it too so
   the .tmb-read grid (share-rail | 720px prose | 240px TOC) can expand
   to its designed 1088px instead of being shoehorned into 70% of viewport.
   The generate_sidebar_layout filter alone isn't enough because the
   parent's 70% rule isn't scoped to .right-sidebar / .both-sidebars. */
body.tmb-modern.page .site-content .content-area,
body.tmb-modern.page.no-sidebar .site-content .content-area,
body.tmb-modern.page .content-area,
body.tmb-modern.single .site-content .content-area,
body.tmb-modern.single.no-sidebar .site-content .content-area,
body.tmb-modern.single .content-area {
  width: 100% !important;
  float: none !important;
  max-width: 100% !important;
}
body.tmb-modern.page .site-content,
body.tmb-modern.page .inside-article,
body.tmb-modern.single .site-content,
body.tmb-modern.single .inside-article {
  display: block !important;
  width: 100%;
}

.tmb-page {
  max-width: var(--tmb-max-w);     /* match site header chrome width (1200px) so
                                      static pages don't look isolated against the
                                      rest of the site. Prose inside is capped per
                                      element for readability (see paragraph rule
                                      below) without constraining the container. */
  margin: 0 auto;
  padding: 56px 24px;
}
/* Cap inline prose at a readable measure inside the wide page container.
   Headings, blockquotes, lists all flow at full container width; only
   paragraph runs get the 75ch readability cap. */
body.tmb-modern.page .tmb-article-content > p,
body.tmb-modern.page .tmb-article-content > ul,
body.tmb-modern.page .tmb-article-content > ol {
  max-width: 75ch;
}
/* Collapse the 3-column .tmb-read grid on static pages — pages don't have a
   share rail or right-rail TOC, so the empty 64px + 240px rails make the
   centered prose feel thin. Restore a simple single-column flow that fills
   the full .tmb-page width. */
body.tmb-modern.page .tmb-read {
  display: block;
  max-width: none;
  padding: 0;
  column-gap: 0;
}
body.tmb-modern.page .tmb-article {
  max-width: 100%;
  margin: 0;
}
.tmb-page h1 {
  font-family: var(--tmb-font-sans);
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 28px;
  color: var(--tmb-text);
}
.tmb-page .tmb-article-thumb {
  padding: 0;
  margin: 0 0 32px;
}

/* ------- 404 / notice ------- */
.tmb-notice {
  text-align: center;
  padding: 96px 24px;
  max-width: 640px;
  margin: 0 auto;
}
.tmb-notice .tmb-404 {
  font-size: clamp(88px, 14vw, 140px);
  font-weight: 900;
  letter-spacing: -0.06em;
  margin: 0 0 8px;
  color: var(--tmb-accent);
  line-height: 1;
  font-family: var(--tmb-font-sans);
}
.tmb-notice h1,
.tmb-notice h2 {
  font-family: var(--tmb-font-sans);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--tmb-text);
}
.tmb-notice p {
  color: var(--tmb-text-muted);
  font-size: 17px;
  margin: 0 0 32px;
  line-height: 1.6;
}

/* ------- Button ------- */
.tmb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--tmb-accent);
  color: var(--tmb-accent-contrast) !important;
  border-radius: var(--tmb-radius-sm);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tmb-transition), transform var(--tmb-transition);
}
.tmb-btn:hover {
  background: var(--tmb-accent-hover);
  color: var(--tmb-accent-contrast) !important;
  transform: translateY(-1px);
}
.tmb-btn-ghost {
  background: transparent;
  color: var(--tmb-text) !important;
  border: 1px solid var(--tmb-border);
}
.tmb-btn-ghost:hover {
  background: var(--tmb-surface-2);
  color: var(--tmb-text) !important;
  border-color: var(--tmb-border-strong);
}

/* ------- Footer ------- */
.tmb-footer {
  background: var(--tmb-surface);
  border-top: 1px solid var(--tmb-border);
  padding: 64px 24px 28px;
  margin-top: 80px;
  /* Layout guards — prevents parent theme floats/grids from sucking the
     footer up next to earlier content (comments section). */
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  float: none !important;
  position: static !important;
  grid-column: 1 / -1 !important;
}
body.tmb-modern .tmb-main {
  display: block !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
}
body.tmb-modern .tmb-comments,
body.tmb-modern .tmb-related,
body.tmb-modern .tmb-author-box,
body.tmb-modern .tmb-article-tags,
body.tmb-modern .tmb-post-nav {
  clear: both !important;
  float: none !important;
}
.tmb-footer-inner {
  max-width: var(--tmb-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 64px;
}
@media (max-width: 820px) {
  .tmb-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .tmb-footer-brand { grid-column: 1 / -1; }
}
.tmb-footer-brand { max-width: 380px; }
.tmb-footer-brand .tmb-logo { font-size: 22px; }
.tmb-footer-brand p {
  color: var(--tmb-text-muted);
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
}
.tmb-footer h4 {
  font-family: var(--tmb-font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tmb-text-muted);
  margin: 0 0 18px;
}
.tmb-footer ul { list-style: none; padding: 0; margin: 0; }
.tmb-footer li { margin: 10px 0; }
.tmb-footer li a { color: var(--tmb-text-muted); font-size: 15px; }
.tmb-footer li a:hover { color: var(--tmb-text); }
.tmb-footer-newsletter p {
  color: var(--tmb-text-muted);
  font-size: 14px;
  margin: 0 0 12px;
  line-height: 1.5;
}
.tmb-footer-newsletter form { display: flex; gap: 8px; flex-wrap: wrap; }
.tmb-footer-newsletter input[type="email"] {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  background: var(--tmb-bg);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius-sm);
  color: var(--tmb-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color var(--tmb-transition), box-shadow var(--tmb-transition);
}
.tmb-footer-newsletter input[type="email"]:focus {
  border-color: var(--tmb-accent);
  box-shadow: 0 0 0 3px var(--tmb-accent-soft);
}
.tmb-footer-newsletter button {
  padding: 10px 18px;
  background: var(--tmb-accent);
  color: var(--tmb-accent-contrast);
  border: none;
  border-radius: var(--tmb-radius-sm);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tmb-transition);
}
.tmb-footer-newsletter button:hover { background: var(--tmb-accent-hover); }

.tmb-footer-bottom {
  max-width: var(--tmb-max-w);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--tmb-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--tmb-text-faint);
  font-size: 14px;
  flex-wrap: wrap;
}
.tmb-footer-social { display: flex; gap: 8px; }
.tmb-footer-social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tmb-border);
  border-radius: 50%;
  color: var(--tmb-text-muted);
  transition: background var(--tmb-transition), color var(--tmb-transition), border-color var(--tmb-transition);
}
.tmb-footer-social a:hover {
  background: var(--tmb-accent);
  color: var(--tmb-accent-contrast);
  border-color: var(--tmb-accent);
}
.tmb-footer-social svg { width: 16px; height: 16px; }

/* ------- Floating Telegram CTA ------- */
.tmb-tg-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 14px;
  background: linear-gradient(135deg, #229ED9 0%, #2AABEE 100%);
  color: #fff !important;
  border-radius: 999px;
  font-family: var(--tmb-font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(34, 158, 217, 0.35),
              0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
              background 180ms ease;
  animation: tmb-tg-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.tmb-tg-fab:hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(34, 158, 217, 0.45),
              0 4px 10px rgba(0, 0, 0, 0.12);
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  animation-play-state: paused;
}
.tmb-tg-fab:active { transform: translateY(0); }
.tmb-tg-fab-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.tmb-tg-fab-text { white-space: nowrap; }

@keyframes tmb-tg-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(34, 158, 217, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(34, 158, 217, 0.45); }
  50%      { box-shadow: 0 8px 20px rgba(34, 158, 217, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 14px rgba(34, 158, 217, 0); }
}

/* Collapse to icon-only on small screens to avoid crowding content */
@media (max-width: 640px) {
  .tmb-tg-fab {
    right: 16px;
    bottom: 16px;
    padding: 12px;
    gap: 0;
  }
  .tmb-tg-fab-text { display: none; }
  .tmb-tg-fab-icon { width: 24px; height: 24px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .tmb-tg-fab { animation: none; }
}

/* Stack above go-top button when both are visible */
body.tmb-modern #go-top { bottom: 88px !important; right: 24px !important; z-index: 89 !important; }
@media (max-width: 640px) {
  body.tmb-modern #go-top { bottom: 76px !important; right: 16px !important; }
}

/* ------- Go-top button (inherited from parent) ------- */
body.tmb-modern #go-top {
  background: var(--tmb-accent) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: var(--tmb-shadow) !important;
}
body.tmb-modern #go-top a { color: #fff !important; }

/* ------- Responsive tweaks ------- */
@media (max-width: 640px) {
  body.tmb-modern { font-size: 16px; }
  .tmb-container { padding: 32px 16px; }
  .tmb-header-inner { padding: 12px 16px; gap: 12px; }
  .tmb-grid { gap: 20px; grid-template-columns: 1fr; padding: 16px 0; }
  .tmb-article-hero { padding: 32px 16px 24px; }
  .tmb-article { padding: 0 16px; }
  .tmb-article-thumb { padding: 0 16px; }
  .tmb-article-content { font-size: 17px; }
  .tmb-article-content h2 { font-size: 24px; }
  .tmb-article-content h3 { font-size: 20px; }
  .tmb-author-box { padding: 22px; gap: 16px; }
  .tmb-page-hero { padding: 40px 16px 16px; }
  .tmb-footer { padding: 48px 16px 24px; }
  .tmb-footer-inner { gap: 28px; }
  .tmb-footer-bottom { flex-direction: column; text-align: center; margin-top: 32px; }
}

/* ================================================================
   Responsive polish — media fluidity, small screens, touch, motion
   ================================================================ */

/* Prevent accidental horizontal scroll at the root. Applied to html AND body
   because mobile Safari scrolls on html, not body. `clip` doesn't establish
   a scroll container so position: sticky still works. Falls back to `hidden`
   for browsers older than ~Q2 2022. */
html { overflow-x: clip; max-width: 100%; }
body.tmb-modern { overflow-x: clip; max-width: 100%; width: 100%; }
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
  body.tmb-modern { overflow-x: hidden; }
}

/* Kill overflow from long words and fixed-width media inside post bodies.
   WP often injects <img width="1000"> — without this, mobile browsers auto-
   scale the whole page to fit. */
body.tmb-modern .tmb-article-content,
body.tmb-modern .tmb-article-content > * {
  max-width: 100% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
body.tmb-modern .tmb-article-content img,
body.tmb-modern .tmb-article-content video,
body.tmb-modern .tmb-article-content iframe,
body.tmb-modern .tmb-article-content embed,
body.tmb-modern .tmb-article-content object,
body.tmb-modern .tmb-article-content svg,
body.tmb-modern .tmb-article-content canvas {
  max-width: 100% !important;
  height: auto;
}
body.tmb-modern .tmb-article-content pre { max-width: 100%; }

/* Grid + flex items must be allowed to shrink below their content's
   intrinsic width — otherwise a long word or wide image blows the column. */
body.tmb-modern .tmb-card,
body.tmb-modern .tmb-card-body,
body.tmb-modern .tmb-card-title,
body.tmb-modern .tmb-article,
body.tmb-modern .tmb-nav,
body.tmb-modern .tmb-grid > * { min-width: 0; }

/* Cards must be able to shrink in a grid without overflowing */
.tmb-card, .tmb-card-body, .tmb-card-title, .tmb-card-excerpt { min-width: 0; }
.tmb-card-title, .tmb-card-excerpt, .tmb-article-title, .tmb-page-hero h1 {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.tmb-article-title, .tmb-page-hero h1 { hyphens: auto; }

/* Make article-content media fluid */
body.tmb-modern .tmb-article-content iframe,
body.tmb-modern .tmb-article-content video,
body.tmb-modern .tmb-article-content embed,
body.tmb-modern .tmb-article-content object {
  max-width: 100%;
  display: block;
  margin: 2em auto;
  border-radius: var(--tmb-radius);
}
body.tmb-modern .tmb-article-content iframe { aspect-ratio: 16 / 9; height: auto; width: 100%; }

/* Responsive tables — horizontal scroll wrapper on narrow */
body.tmb-modern .tmb-article-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) {
  body.tmb-modern .tmb-article-content table { display: table; }
}

/* Hero image ratio safety on mobile */
@media (max-width: 640px) {
  .tmb-article-thumb img { max-height: 340px; border-radius: var(--tmb-radius); }
}

/* Tablet zone — 821-1099px: compact header + tighter padding */
@media (min-width: 821px) and (max-width: 1099px) {
  .tmb-header-inner { padding: 14px 20px; gap: 16px; }
  .tmb-nav a { padding: 8px 10px; font-size: 14px; }
  .tmb-container { padding: 40px 20px; }
  .tmb-grid { gap: 24px; }
}

/* Section head stacks on narrow */
@media (max-width: 480px) {
  .tmb-section-head { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 12px; margin-top: 36px; }
  .tmb-section-head h2 { font-size: 20px; }
  .tmb-intro-text { font-size: 20px; line-height: 1.35; }
}

/* Topics strip tighter on mobile */
@media (max-width: 640px) {
  .tmb-topic { font-size: 13px; padding: 7px 13px; }
  .tmb-topics-inner { padding: 10px 16px; gap: 4px; }
}

/* Small phones — ≤420px */
@media (max-width: 420px) {
  body.tmb-modern { font-size: 15px; }
  .tmb-container { padding: 24px 14px; }
  .tmb-intro { padding: 36px 14px 12px; }
  .tmb-topics-inner { padding: 10px 14px; }
  .tmb-header-inner { padding: 10px 14px; gap: 8px; min-height: 56px; }
  .tmb-logo-wordmark { font-size: 19px; }
  .tmb-icon-btn { width: 38px; height: 38px; }
  .tmb-header-actions { gap: 2px; }
  .tmb-card-body { padding: 20px; }
  .tmb-card-title { font-size: 18px; }
  .tmb-card-excerpt { font-size: 14px; }
  .tmb-article-hero { padding: 24px 14px 18px; }
  .tmb-article-thumb { padding: 0 14px; }
  .tmb-article { padding: 0 14px; }
  .tmb-article-title { font-size: 26px; letter-spacing: -0.025em; }
  .tmb-article-subtitle { font-size: 17px; }
  .tmb-article-meta { font-size: 13px; gap: 10px; padding: 12px 0; }
  .tmb-article-meta-author img { width: 28px; height: 28px; }
  .tmb-article-content { font-size: 16px; line-height: 1.7; }
  .tmb-article-content h2 { font-size: 22px; }
  .tmb-article-content h3 { font-size: 18px; }
  .tmb-article-content blockquote { padding: 4px 16px; font-size: 17px; }
  .tmb-article-content pre { padding: 14px 16px; font-size: 14px; }
  .tmb-article-tags,
  .tmb-post-nav,
  .tmb-comments,
  .tmb-related-inner { padding-left: 14px; padding-right: 14px; }
  .tmb-footer { padding: 40px 14px 20px; }
  .tmb-footer-inner { gap: 24px; grid-template-columns: 1fr; }
  .tmb-footer-brand, .tmb-footer-newsletter { grid-column: auto; }
  .tmb-author-box { padding: 20px; gap: 14px; flex-direction: row; }
  .tmb-author-box img { width: 48px; height: 48px; }
  .tmb-notice { padding: 56px 14px; }
  .tmb-share-rail-inner { gap: 6px; padding: 12px 14px; }
  .tmb-share-btn { width: 36px; height: 36px; }
  .tmb-toc-inner { padding: 16px; }
  .tmb-comments .comment-form { padding: 20px; }
  .tmb-commentlist .children { padding-left: 14px; }
  .tmb-search-bar { padding: 14px; }
  .tmb-search-bar form { flex-wrap: wrap; }
  .tmb-search-bar input[type="search"] { min-width: 0; flex: 1 1 100%; }
  .tmb-search-bar button[type="submit"] { flex: 1 1 100%; }
}

/* Extra-small phones (≤360px) — iPhone SE 1st gen, etc. */
@media (max-width: 360px) {
  .tmb-header-inner { gap: 4px; }
  .tmb-logo-wordmark { font-size: 17px; letter-spacing: -0.04em; }
  .tmb-icon-btn { width: 36px; height: 36px; }
  .tmb-icon-btn svg { width: 18px; height: 18px; }
  .tmb-article-title { font-size: 23px; }
  .tmb-card-title { font-size: 17px; }
  .tmb-section-head h2 { font-size: 18px; }
}

/* Landscape short phones — keep mobile menu usable */
@media (max-width: 900px) and (max-height: 600px) {
  .tmb-nav { padding-top: 72px; padding-bottom: 20px; }
  .tmb-nav a { padding: 12px 8px; font-size: 16px; }
  .tmb-header-inner { min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
}

/* Touch devices: guarantee 44x44 hit targets */
@media (pointer: coarse) {
  .tmb-icon-btn, .tmb-share-btn, .tmb-menu-toggle, .tmb-search-toggle { min-width: 44px; min-height: 44px; }
  .tmb-pagination .page-numbers { min-height: 44px; min-width: 44px; }
  .tmb-nav a { min-height: 44px; display: flex; align-items: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.tmb-modern *,
  body.tmb-modern *::before,
  body.tmb-modern *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tmb-card:hover { transform: none; }
  .tmb-card:hover .tmb-card-thumb img { transform: none; }
  .tmb-logo-wordmark:hover { transform: none; }
}

/* iOS safe areas (notch) */
@supports (padding: env(safe-area-inset-top)) {
  .tmb-header-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .tmb-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  @media (max-width: 900px) {
    .tmb-nav {
      padding-left: max(24px, env(safe-area-inset-left));
      padding-right: max(24px, env(safe-area-inset-right));
      padding-bottom: max(40px, env(safe-area-inset-bottom));
    }
  }
}

/* Card hover disabled on touch — avoids stuck hover state */
@media (hover: none) {
  .tmb-card:hover { transform: none; box-shadow: none; border-color: var(--tmb-border); }
  .tmb-card:hover .tmb-card-thumb img { transform: none; }
}

/* =====================================================================
 * ENTRY META — GeneratePress's footer meta (category + prev/next nav).
 * Default GP markup is bare; this styles it as a clean card row that
 * stacks on mobile and goes to a 2-column grid on desktop.
 * Targets:
 *   .entry-meta (wrapper)
 *   .cat-links / .tags-links / .byline (category + tag pills)
 *   .post-navigation .nav-links (prev/next grid)
 *   .nav-previous / .nav-next (link cards)
 * ===================================================================== */
body.tmb-modern .entry-meta {
  max-width: var(--tmb-read-w, 760px);
  margin: 32px auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: var(--tmb-font-sans);
}

/* Category / tag pill row */
body.tmb-modern .entry-meta .cat-links,
body.tmb-modern .entry-meta .tags-links,
body.tmb-modern .entry-meta .byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tmb-text-soft, var(--tmb-text));
  letter-spacing: 0.2px;
}
/* GP-Premium already renders a folder icon — don't double up */
body.tmb-modern .entry-meta .cat-links::before { content: none; }
body.tmb-modern .entry-meta .cat-links > svg:not(:first-child),
body.tmb-modern .entry-meta .cat-links .dashicons + .dashicons { display: none; }
body.tmb-modern .entry-meta a {
  color: var(--tmb-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--tmb-transition), color var(--tmb-transition);
}
body.tmb-modern .entry-meta a:hover {
  border-color: currentColor;
}

/* Post navigation: prev / next link cards — premium redesign */
body.tmb-modern .post-navigation,
body.tmb-modern .nav-below {
  max-width: var(--tmb-read-w, 760px);
  margin: 40px auto 0;
  padding: 0 24px;
  font-family: var(--tmb-font-sans);
}
body.tmb-modern .post-navigation .nav-links,
body.tmb-modern .nav-below .nav-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  body.tmb-modern .post-navigation .nav-links,
  body.tmb-modern .nav-below .nav-links {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

body.tmb-modern .nav-previous,
body.tmb-modern .nav-next {
  position: relative;
  background: var(--tmb-surface, #131316);
  border: 1px solid var(--tmb-border, rgba(255,255,255,0.08));
  border-radius: var(--tmb-radius-lg, 14px);
  overflow: hidden;
  transition: border-color 220ms cubic-bezier(0.4,0,0.2,1),
              transform 220ms cubic-bezier(0.4,0,0.2,1),
              background 220ms;
}
body.tmb-modern .nav-previous::before,
body.tmb-modern .nav-next::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  background: var(--tmb-accent);
  opacity: 0;
  transition: opacity 220ms;
}
body.tmb-modern .nav-previous::before { left: 0; }
body.tmb-modern .nav-next::before     { right: 0; }
body.tmb-modern .nav-previous:hover,
body.tmb-modern .nav-next:hover {
  border-color: rgba(var(--tmb-accent-rgb), 0.35);
  transform: translateY(-2px);
  background: var(--tmb-surface-2, #1c1c20);
}
body.tmb-modern .nav-previous:hover::before,
body.tmb-modern .nav-next:hover::before { opacity: 1; }

body.tmb-modern .nav-previous a,
body.tmb-modern .nav-next a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
  color: var(--tmb-text) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  background: transparent !important;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
}
body.tmb-modern .nav-previous a { align-items: flex-start; text-align: left; }
body.tmb-modern .nav-next a     { align-items: flex-end;   text-align: right; }

/* Hide GP / GP-Premium default chevron + label markup that sneaks in via
   spans, icons, or images. We render our own eyebrow + title via ::before. */
body.tmb-modern .post-navigation a > span:not(.tmb-keep),
body.tmb-modern .post-navigation a > i,
body.tmb-modern .post-navigation a > svg,
body.tmb-modern .post-navigation a > img,
body.tmb-modern .post-navigation .meta-nav,
body.tmb-modern .post-navigation .nav-subtitle,
body.tmb-modern .post-navigation .post-navigation__icon,
body.tmb-modern .post-navigation .post-navigation-sub,
body.tmb-modern .post-navigation .nav-icon,
body.tmb-modern .post-navigation .nav-image,
body.tmb-modern .post-navigation .prev,
body.tmb-modern .post-navigation .next,
body.tmb-modern .post-navigation .dashicons,
body.tmb-modern .post-navigation a > .gp-icon,
body.tmb-modern .post-navigation a:empty,
body.tmb-modern .post-navigation > nav:empty { display: none !important; }

/* Hide any empty leaf inside post-navigation (no children, no text). */
body.tmb-modern .post-navigation a *:empty:not(img):not(input):not(br) { display: none !important; }

/* If the whole nav-previous or nav-next ends up with no link inside, hide
   the wrapper too — prevents an empty bordered card. */
body.tmb-modern .nav-previous:not(:has(a)),
body.tmb-modern .nav-next:not(:has(a)) { display: none !important; }

/* Eyebrow always sits above the title. Order:-1 forces it first
   regardless of which pseudo-element it is. */
body.tmb-modern .nav-previous a::before,
body.tmb-modern .nav-next a::before {
  order: -1;
  display: block;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--tmb-accent);
  margin: 0;
}
body.tmb-modern .nav-previous a::before { content: "← Previous"; }
body.tmb-modern .nav-next     a::before { content: "Next →"; }
/* Kill any inherited ::after content that could overlap the title */
body.tmb-modern .nav-previous a::after,
body.tmb-modern .nav-next     a::after { content: none !important; }

/* Mobile tightening */
@media (max-width: 600px) {
  body.tmb-modern .entry-meta { margin-top: 24px; padding: 0 18px; gap: 14px; font-size: 12.5px; }
  body.tmb-modern .post-navigation,
  body.tmb-modern .nav-below { margin-top: 28px; padding: 0 18px; }
  body.tmb-modern .nav-previous a,
  body.tmb-modern .nav-next a {
    padding: 16px 18px;
    font-size: 14.5px;
    line-height: 1.35;
    word-break: break-word;
  }
  body.tmb-modern .nav-previous a::before,
  body.tmb-modern .nav-next a::after { font-size: 10px; letter-spacing: 1.4px; }
}

/* =====================================================================
 * ENTRY META (GP footer post-meta + post navigation) — mobile responsive.
 * ===================================================================== */
body.tmb-modern .entry-meta {
  max-width: var(--tmb-read-w, 760px);
  margin: 32px auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--tmb-font-sans);
}
body.tmb-modern .entry-meta .cat-links,
body.tmb-modern .entry-meta .tags-links,
body.tmb-modern .entry-meta .byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--tmb-text-soft, var(--tmb-text));
}
body.tmb-modern .entry-meta a {
  color: var(--tmb-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--tmb-transition);
}
body.tmb-modern .entry-meta a:hover { border-color: currentColor; }

body.tmb-modern .post-navigation,
body.tmb-modern .nav-below {
  max-width: var(--tmb-read-w, 760px);
  margin: 32px auto 0;
  padding: 0 24px;
  font-family: var(--tmb-font-sans);
}
body.tmb-modern .post-navigation .nav-links,
body.tmb-modern .nav-below .nav-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  body.tmb-modern .post-navigation .nav-links,
  body.tmb-modern .nav-below .nav-links {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
body.tmb-modern .nav-previous,
body.tmb-modern .nav-next {
  background: var(--tmb-surface, #131316);
  border: 1px solid var(--tmb-border, rgba(255,255,255,0.08));
  border-radius: var(--tmb-radius-lg, 14px);
  transition: border-color var(--tmb-transition), transform var(--tmb-transition);
}
body.tmb-modern .nav-previous:hover,
body.tmb-modern .nav-next:hover { border-color: var(--tmb-accent); transform: translateY(-2px); }
body.tmb-modern .nav-previous a,
body.tmb-modern .nav-next a {
  padding: 14px 18px;
  color: var(--tmb-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  border-bottom: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.tmb-modern .nav-next a { text-align: right; }

@media (max-width: 600px) {
  body.tmb-modern .entry-meta { margin-top: 24px; padding: 0 18px; gap: 10px; font-size: 12.5px; }
  body.tmb-modern .post-navigation,
  body.tmb-modern .nav-below { margin-top: 24px; padding: 0 18px; }
  body.tmb-modern .nav-previous a,
  body.tmb-modern .nav-next a {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    word-break: break-word;
  }
}

/* =====================================================================
 * SHIPPED FEATURES (1–15) — premium UX polish.
 * ===================================================================== */

/* #1 Read percentage in share rail (sticky-rail variant only). */
.tmb-share-progress {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--tmb-text-soft, var(--tmb-text)); opacity: 0.7;
  padding: 6px 0;
}
.tmb-share-progress-pct { font-variant-numeric: tabular-nums; }
@media (max-width: 1099px) { .tmb-share-progress { display: none; } }

/* #3 Sticky next-post slide-in card — bottom-LEFT on desktop so it never
   collides with the bottom-right FAB stack (Telegram FAB + back-to-top).
   On mobile the rule below switches to full-width with right/left both set. */
.tmb-next-post {
  position: fixed;
  left: 20px; right: auto; bottom: 24px;
  z-index: 95;
  width: min(360px, calc(100vw - 40px));
  background: var(--tmb-surface, #131316);
  border: 1px solid var(--tmb-border, rgba(255,255,255,0.08));
  border-radius: var(--tmb-radius-lg, 14px);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.55);
  transform: translateY(120%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms;
  overflow: hidden;
}
.tmb-next-post.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.tmb-next-post-close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 26px !important; height: 26px !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important;
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: background 180ms;
  -webkit-appearance: none; appearance: none;
  text-shadow: none; box-shadow: none;
}
.tmb-next-post-close::before { content: "×"; display: block; transform: translateY(-1px); }
.tmb-next-post-close:hover,
.tmb-next-post-close:focus { background: rgba(0, 0, 0, 0.7) !important; outline: none; }
.tmb-next-post-link {
  display: flex; gap: 14px; padding: 14px;
  text-decoration: none; color: var(--tmb-text);
}
.tmb-next-post-thumb {
  flex: 0 0 84px; height: 84px; border-radius: 10px;
  background: var(--tmb-surface-2) center/cover no-repeat;
}
.tmb-next-post-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tmb-next-post-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  color: var(--tmb-accent); text-transform: uppercase;
}
.tmb-next-post-title {
  font-size: 14px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tmb-next-post-cta {
  margin-top: 4px; font-size: 12px; font-weight: 600;
  color: var(--tmb-text-soft, var(--tmb-text)); opacity: 0.75;
}
@media (max-width: 600px) {
  .tmb-next-post { right: 12px; left: 12px; bottom: 76px; width: auto; }
}

/* #4 Skeleton screens for archive cards (active until image loads). */
.tmb-card .tmb-card-thumb { position: relative; background: var(--tmb-surface-2, #1c1c20); }
.tmb-card .tmb-card-thumb img { transition: opacity 300ms ease; }
.tmb-card .tmb-card-thumb img:not(.is-loaded) { opacity: 0; }
.tmb-card .tmb-card-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.07) 50%,
    rgba(255,255,255,0.04) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: tmb-skel 1.4s ease-in-out infinite;
  opacity: 1;
  transition: opacity 240ms;
  pointer-events: none;
}
.tmb-card .tmb-card-thumb:has(img.is-loaded)::after { opacity: 0; }
@keyframes tmb-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tmb-card .tmb-card-thumb::after { animation: none; } }

/* #5 Inline jargon tooltips. */
abbr.tmb-glossary {
  text-decoration: none;
  border-bottom: 1px dashed var(--tmb-accent);
  cursor: help;
  position: relative;
}
abbr.tmb-glossary:hover,
abbr.tmb-glossary:focus { color: var(--tmb-accent); outline: none; }
abbr.tmb-glossary::after {
  content: attr(title);
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(6px);
  background: var(--tmb-surface, #131316);
  color: var(--tmb-text);
  border: 1px solid var(--tmb-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
  white-space: normal; width: max-content; max-width: 260px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 180ms, transform 220ms cubic-bezier(0.4,0,0.2,1);
  z-index: 10;
}
abbr.tmb-glossary:hover::after,
abbr.tmb-glossary:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* #6 Code copy buttons. */
.tmb-article-content pre { position: relative; }
.tmb-code-copy {
  position: absolute; top: 8px; right: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.06);
  color: var(--tmb-text);
  border: 1px solid var(--tmb-border);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms, background 180ms;
}
.tmb-article-content pre:hover .tmb-code-copy,
.tmb-code-copy:focus { opacity: 1; }
.tmb-code-copy:hover { background: rgba(255,255,255,0.12); }
.tmb-code-copy.is-copied { background: var(--tmb-accent); color: #fff; border-color: var(--tmb-accent); opacity: 1; }
@media (hover: none) { .tmb-code-copy { opacity: 1; } }

/* #7 Print mode — strip chrome, optimize for paper. */
@media print {
  .tmb-header, .tmb-footer, .tmb-share-rail, .tmb-share-mobile,
  .tmb-tg-fab, .tmb-back-to-top, .tmb-next-post, .tmb-toc, .tmb-toc-mobile,
  .tmb-related, .tmb-author-box, .tmb-article-tags,
  .tmb-breadcrumbs, .tmb-reading-bar, .tmb-ad,
  #wpadminbar { display: none !important; }
  body, .tmb-article-content {
    background: #fff !important; color: #000 !important;
    font-size: 12pt !important; line-height: 1.55 !important;
  }
  .tmb-article-thumb { max-height: 260px; }
  a { color: #000 !important; text-decoration: underline !important; }
  .tmb-article-content a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}
body.tmb-print { /* state class flipped before print() so :hover etc. settle */ }

/* #8 Save button states. */
.tmb-save-btn.is-saved svg { fill: currentColor; color: var(--tmb-accent); }
.tmb-save-btn.is-saved {
  background: var(--tmb-accent-soft, rgba(var(--tmb-accent-rgb), 0.14));
  color: var(--tmb-accent);
}

/* #9 Hero image gradient overlay (legibility for any titles overlaid). */
.tmb-article-thumb-overlay { position: relative; }
.tmb-article-thumb-overlay::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 50%, transparent 100%);
  border-radius: 0 0 var(--tmb-radius-lg, 14px) var(--tmb-radius-lg, 14px);
  pointer-events: none;
}
body:not(.options_dark_skin) .tmb-article-thumb-overlay::after {
  background: linear-gradient(to top, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.10) 55%, transparent 100%);
}

/* #10 Branded 404 hero. */
.tmb-404-hero {
  max-width: 720px;
  margin: 56px auto 40px;
  padding: 0 24px;
  text-align: center;
}
.tmb-404-art { width: 100%; max-width: 480px; height: auto; }
.tmb-404-title { font-size: 32px; font-weight: 900; letter-spacing: -1px; margin: 8px 0 12px; }
.tmb-404-sub   { font-size: 16px; color: var(--tmb-text-soft, var(--tmb-text)); opacity: 0.85; margin-bottom: 24px; }
.tmb-404-actions {
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  max-width: 440px; margin: 0 auto;
}
.tmb-404-actions .tmb-searchform { width: 100%; }
@media (min-width: 600px) {
  .tmb-404-title { font-size: 40px; }
}

/* #12 Per-category color tokens (subtle accent shift). */
body.tmb-cat-carding   { --tmb-accent: #6366f1; --tmb-accent-soft: rgba(99,102,241,0.14); --tmb-accent-rgb: 99,102,241; }
body.tmb-cat-dumps     { --tmb-accent: #ef4444; --tmb-accent-soft: rgba(239,68,68,0.14); }
body.tmb-cat-skimmers  { --tmb-accent: #f59e0b; --tmb-accent-soft: rgba(245,158,11,0.14); }
body.tmb-cat-cvv-shops { --tmb-accent: #10b981; --tmb-accent-soft: rgba(16,185,129,0.14); }
body.tmb-cat-non-vbv-bin,
body.tmb-cat-paypal-logs { --tmb-accent: #06b6d4; --tmb-accent-soft: rgba(6,182,212,0.14); }
body.tmb-cat-linkable-cards { --tmb-accent: #8b5cf6; --tmb-accent-soft: rgba(139,92,246,0.14); }

/* #13 Author follow button. */
.tmb-author-follow { margin-top: 18px; display: flex; justify-content: center; }
.tmb-btn-follow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--tmb-accent);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  transition: transform 180ms, background 180ms;
}
.tmb-btn-follow:hover { background: var(--tmb-accent-hover, #4338ca); transform: translateY(-1px); }

/* =====================================================================
 * SPACING NORMALIZATION PASS — final overrides for padding/margin rhythm
 * across desktop + mobile. Keep this block last so it wins the cascade.
 * Tokens used:
 *   --tmb-pad-x  — horizontal page padding (16px mobile, 24px tablet+)
 *   --tmb-pad-y  — between-section vertical rhythm (32 → 56px)
 *   --tmb-read-w — content reading column max-width (760px)
 * ===================================================================== */
:root {
  --tmb-pad-x: 16px;
  --tmb-pad-y: 32px;
  --tmb-section-gap: 40px;
  --tmb-read-w: 760px;
}
@media (min-width: 600px)  { :root { --tmb-pad-x: 22px; --tmb-pad-y: 44px; --tmb-section-gap: 56px; } }
@media (min-width: 1100px) { :root { --tmb-pad-x: 28px; --tmb-pad-y: 56px; --tmb-section-gap: 72px; } }

/* Overflow guard so nothing creates horizontal scroll on mobile. */
html, body { overflow-x: hidden; }
body.tmb-modern * { min-width: 0; }
body.tmb-modern img,
body.tmb-modern iframe,
body.tmb-modern video,
body.tmb-modern table { max-width: 100%; }

/* ----- Header chrome — tighter on mobile, breathable on desktop ----- */
body.tmb-modern .tmb-header-inner {
  padding-left:  var(--tmb-pad-x);
  padding-right: var(--tmb-pad-x);
}
@media (max-width: 600px) {
  body.tmb-modern .tmb-header-inner { padding-top: 10px; padding-bottom: 10px; }
}

/* ----- Article hero — proportional spacing ----- */
body.tmb-modern .tmb-article-hero {
  max-width: var(--tmb-read-w);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 32px) var(--tmb-pad-x) clamp(16px, 3vw, 24px);
}
body.tmb-modern .tmb-article-cat       { margin-bottom: 12px; }
body.tmb-modern .tmb-article-title     { margin: 0 0 10px; }
body.tmb-modern .tmb-article-subtitle  { margin: 0 0 18px; }
body.tmb-modern .tmb-article-meta      { margin: 0; row-gap: 8px; }
@media (max-width: 600px) {
  body.tmb-modern .tmb-article-hero { padding-top: 16px; padding-bottom: 12px; }
  body.tmb-modern .tmb-article-cat  { font-size: 10.5px; letter-spacing: 1.4px; margin-bottom: 8px; }
  body.tmb-modern .tmb-article-title {
    font-size: clamp(20px, 5.6vw, 26px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 8px !important;
    word-wrap: break-word; overflow-wrap: anywhere;
  }
  body.tmb-modern .tmb-article-subtitle { font-size: 14.5px; line-height: 1.45; margin: 0 0 12px; }
  body.tmb-modern .tmb-article-meta { font-size: 12px; gap: 6px 10px; padding: 8px 0 0; row-gap: 6px; }
  body.tmb-modern .tmb-article-meta-author img { width: 24px; height: 24px; }
}
@media (max-width: 420px) {
  body.tmb-modern .tmb-article-title { font-size: 21px !important; }
}
@media (max-width: 360px) {
  body.tmb-modern .tmb-article-title { font-size: 19px !important; }
}

/* ----- Featured image — match read column gutter on mobile ----- */
body.tmb-modern .tmb-article-thumb {
  margin: 0 auto clamp(20px, 4vw, 32px);
  padding: 0 var(--tmb-pad-x);
}
body.tmb-modern .tmb-article-thumb img {
  border-radius: clamp(8px, 1.5vw, var(--tmb-radius-lg, 14px));
}
@media (max-width: 600px) {
  body.tmb-modern .tmb-article-thumb img { max-height: 320px; }
}

/* ----- Read column padding (.tmb-read grid) ----- */
body.tmb-modern .tmb-read {
  padding-left:  var(--tmb-pad-x);
  padding-right: var(--tmb-pad-x);
  column-gap: clamp(20px, 3vw, 32px);
}

/* ----- Article content rhythm ----- */
body.tmb-modern .tmb-article-content > * + * { margin-top: clamp(14px, 2vw, 20px); }
body.tmb-modern .tmb-article-content h2 { margin-top: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
body.tmb-modern .tmb-article-content h3 { margin-top: clamp(22px, 3vw, 30px); margin-bottom: 10px; }
body.tmb-modern .tmb-article-content ul,
body.tmb-modern .tmb-article-content ol { padding-left: 22px; }
body.tmb-modern .tmb-article-content li + li { margin-top: 6px; }
body.tmb-modern .tmb-article-content blockquote {
  margin: clamp(20px, 3vw, 28px) 0;
  padding: 16px 20px;
}
body.tmb-modern .tmb-article-content figure { margin: clamp(20px, 3vw, 28px) 0; }
@media (max-width: 600px) {
  body.tmb-modern .tmb-article-content { font-size: 16.5px; line-height: 1.65; }
  body.tmb-modern .tmb-article-content h2 { font-size: 22px; }
  body.tmb-modern .tmb-article-content h3 { font-size: 18px; }
}

/* ----- Tags / author / related — consistent rhythm via --tmb-section-gap ----- */
body.tmb-modern .tmb-article-tags,
body.tmb-modern .tmb-author-box,
body.tmb-modern .tmb-related,
body.tmb-modern .post-navigation,
body.tmb-modern .nav-below,
body.tmb-modern .entry-meta {
  max-width: var(--tmb-read-w);
  margin-left: auto;
  margin-right: auto;
  padding-left:  var(--tmb-pad-x);
  padding-right: var(--tmb-pad-x);
  margin-top: var(--tmb-section-gap);
}

/* Author box internals */
body.tmb-modern .tmb-author-box {
  display: flex; gap: clamp(14px, 2vw, 20px);
  align-items: flex-start;
  padding-top: clamp(20px, 3vw, 26px);
  padding-bottom: clamp(20px, 3vw, 26px);
  background: var(--tmb-surface, #131316);
  border: 1px solid var(--tmb-border, rgba(255,255,255,0.08));
  border-radius: var(--tmb-radius-lg, 14px);
  /* fold horizontal padding in once for the card */
  padding-left:  clamp(18px, 3vw, 24px);
  padding-right: clamp(18px, 3vw, 24px);
}
body.tmb-modern .tmb-author-box .tmb-author-avatar { flex: 0 0 auto; border-radius: 50%; }
body.tmb-modern .tmb-author-box .tmb-author-name { margin: 0 0 4px; font-size: 16px; }
body.tmb-modern .tmb-author-box .tmb-author-bio  { margin: 0; font-size: 14px; line-height: 1.55; }

/* Related grid */
body.tmb-modern .tmb-related .tmb-section-head { margin-bottom: clamp(16px, 3vw, 24px); }
body.tmb-modern .tmb-related .tmb-grid { gap: clamp(14px, 2vw, 20px); }
@media (max-width: 600px) {
  body.tmb-modern .tmb-related .tmb-grid.tmb-grid-3 { grid-template-columns: 1fr; }
}

/* ----- Magazine / archive grid sections ----- */
body.tmb-modern .tmb-grid {
  padding-left:  0;
  padding-right: 0;
  gap: clamp(14px, 2vw, 24px);
}
body.tmb-modern .tmb-section-head {
  max-width: var(--tmb-max-w, 1200px);
  margin: clamp(28px, 4vw, 44px) auto clamp(14px, 2vw, 22px);
  padding: 0 var(--tmb-pad-x);
}
body.tmb-modern .tmb-container,
body.tmb-modern main > .tmb-grid,
body.tmb-modern main > .tmb-pagination {
  padding-left:  var(--tmb-pad-x);
  padding-right: var(--tmb-pad-x);
}

/* ----- Hero / page-hero / topics — remove double padding stacks ----- */
body.tmb-modern .tmb-page-hero,
body.tmb-modern .tmb-author-hero,
body.tmb-modern .tmb-intro {
  padding-left:  var(--tmb-pad-x);
  padding-right: var(--tmb-pad-x);
  margin-top: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(24px, 3vw, 36px);
}
body.tmb-modern .tmb-topics {
  padding: 0 var(--tmb-pad-x);
  margin-bottom: clamp(20px, 3vw, 32px);
}
body.tmb-modern .tmb-topics-inner { gap: 8px; flex-wrap: wrap; }

/* ----- Pagination ----- */
body.tmb-modern .tmb-pagination {
  margin: clamp(28px, 4vw, 44px) auto;
  padding: 0 var(--tmb-pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* ----- Breadcrumbs ----- */
body.tmb-modern .tmb-breadcrumbs {
  max-width: var(--tmb-max-w, 1200px);
  margin: 0 auto;
  padding: 14px var(--tmb-pad-x) 0;
  font-size: 13px;
}
@media (max-width: 600px) {
  body.tmb-modern .tmb-breadcrumbs { padding-top: 10px; font-size: 12.5px; }
}

/* ----- Footer ----- */
body.tmb-modern .tmb-footer-inner {
  padding: clamp(32px, 5vw, 56px) var(--tmb-pad-x);
  gap: clamp(24px, 4vw, 40px);
}
body.tmb-modern .tmb-footer-bottom {
  padding: 16px var(--tmb-pad-x);
  flex-wrap: wrap; gap: 12px;
}
@media (max-width: 600px) {
  body.tmb-modern .tmb-footer-inner { grid-template-columns: 1fr; }
  body.tmb-modern .tmb-footer-bottom { font-size: 12.5px; }
}

/* ----- Floating widgets (FAB, back-to-top, mobile share) — keep them
   above the safe-area inset and out of each other's way on mobile ----- */
body.tmb-modern .tmb-tg-fab        { right: clamp(14px, 3vw, 24px); bottom: clamp(80px, 12vw, 108px); }
body.tmb-modern .tmb-back-to-top   { right: clamp(14px, 3vw, 24px); bottom: clamp(20px, 3vw, 32px); }
body.tmb-modern .tmb-share-mobile  { padding: 8px var(--tmb-pad-x); gap: 8px; }
@media (max-width: 600px) {
  body.tmb-modern .tmb-tg-fab .tmb-tg-fab-text { display: none; }
  body.tmb-modern .tmb-tg-fab { width: 52px; height: 52px; padding: 0; justify-content: center; }
  body.tmb-modern .tmb-back-to-top { width: 44px; height: 44px; }
}

/* ----- Sticky next-post: more breathing room from FAB on mobile ----- */
@media (max-width: 600px) {
  body.tmb-modern .tmb-next-post { bottom: 144px; }
}

/* ----- Reset double-padding when card-style elements live inside .tmb-read ----- */
body.tmb-modern .tmb-read .tmb-article-tags,
body.tmb-modern .tmb-read .tmb-author-box,
body.tmb-modern .tmb-read .tmb-related,
body.tmb-modern .tmb-read .tmb-toc-mobile {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* Safety: hide any share button that ends up with no icon (no <svg> child)
   and no visible text. Prevents stray empty circles in the share rail / bar. */
body.tmb-modern .tmb-share-btn:not(:has(svg)):empty,
body.tmb-modern .tmb-share-mobile-btn:not(:has(svg)):empty { display: none !important; }
/* Also drop the legacy progress pill if any cached HTML still emits it. */
body.tmb-modern .tmb-share-progress,
body.tmb-modern .tmb-share-progress-pct { display: none !important; }

/* Remove the prev/next post navigation entirely — GP-Premium's default
   markup wasn't reliably populating titles, and the empty chevron buttons
   added clutter. The "next-post slide-in" card at 85% scroll already
   covers the same UX need. */
body.tmb-modern .post-navigation,
body.tmb-modern .nav-below,
body.tmb-modern .nav-previous,
body.tmb-modern .nav-next { display: none !important; }

/* ======================================================================
   LINK HUB — [tmb_links] / [tmb_link] promo card grid (see inc/shortcodes.php)
   ====================================================================== */
body.tmb-modern .tmb-links {
  --tmb-link-accent: var(--tmb-accent);
  margin: 36px 0;
  padding: 28px;
  background: linear-gradient(180deg, var(--tmb-surface) 0%, var(--tmb-surface-2) 100%);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius-lg);
  box-shadow: var(--tmb-shadow);
}
body.tmb-modern .tmb-links-head { margin: 0 0 20px; text-align: center; }
body.tmb-modern .tmb-links-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tmb-text);
}
body.tmb-modern .tmb-links-subtitle {
  margin: 6px 0 0;
  color: var(--tmb-text-muted);
  font-size: 14px;
  font-weight: 500;
}
body.tmb-modern .tmb-links-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(var(--tmb-cols, 3), minmax(0, 1fr));
}
body.tmb-modern .tmb-links--cols-2 .tmb-links-grid { --tmb-cols: 2; }
body.tmb-modern .tmb-links--cols-3 .tmb-links-grid { --tmb-cols: 3; }
body.tmb-modern .tmb-links--cols-4 .tmb-links-grid { --tmb-cols: 4; }

body.tmb-modern .tmb-link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px 16px;
  background: var(--tmb-surface);
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius);
  color: var(--tmb-text) !important;
  text-decoration: none !important;
  transition: transform var(--tmb-transition),
              border-color var(--tmb-transition),
              box-shadow var(--tmb-transition);
  overflow: hidden;
  min-height: 48px;
}
body.tmb-modern .tmb-link-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--tmb-link-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.tmb-modern .tmb-link-card:hover {
  transform: translateY(-3px);
  border-color: var(--tmb-link-accent);
  box-shadow: var(--tmb-shadow-lg);
}
body.tmb-modern .tmb-link-card:hover::before { transform: scaleX(1); }
body.tmb-modern .tmb-link-card:focus-visible {
  outline: 2px solid var(--tmb-link-accent);
  outline-offset: 2px;
}

body.tmb-modern .tmb-link-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
body.tmb-modern .tmb-link-mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  background: var(--tmb-accent-soft);
  color: var(--tmb-link-accent);
  border-radius: 10px;
  font-weight: 700;
}
body.tmb-modern .tmb-link-mark--img { padding: 6px; background: var(--tmb-surface-2); }
body.tmb-modern .tmb-link-mark--img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
body.tmb-modern .tmb-link-mark--mono { font-size: 18px; letter-spacing: -0.02em; }

body.tmb-modern .tmb-link-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--tmb-link-accent);
  color: var(--tmb-accent-contrast);
  border-radius: 999px;
  white-space: nowrap;
}

body.tmb-modern .tmb-link-card-body {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 46px;
}
body.tmb-modern .tmb-link-title {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--tmb-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.tmb-modern .tmb-link-note {
  font-size: 13px; line-height: 1.45;
  color: var(--tmb-text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.tmb-modern .tmb-link-cta {
  margin-top: auto; padding-top: 6px;
  font-size: 13px; font-weight: 700;
  color: var(--tmb-link-accent);
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  transition: gap var(--tmb-transition);
}
body.tmb-modern .tmb-link-card:hover .tmb-link-cta { gap: 8px; }

/* List variant — single-column, dense */
body.tmb-modern .tmb-links--list .tmb-links-grid { --tmb-cols: 1 !important; }
body.tmb-modern .tmb-links--list .tmb-link-card {
  flex-direction: row; align-items: center; padding: 14px 16px; gap: 14px;
}
body.tmb-modern .tmb-links--list .tmb-link-card-top { flex: 0 0 auto; }
body.tmb-modern .tmb-links--list .tmb-link-card-body { flex: 1; min-width: 0; }
body.tmb-modern .tmb-links--list .tmb-link-cta { padding-top: 0; flex-shrink: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.tmb-modern .tmb-link-card,
  body.tmb-modern .tmb-link-card::before,
  body.tmb-modern .tmb-link-cta { transition: none !important; }
  body.tmb-modern .tmb-link-card:hover { transform: none; }
}

/* Mobile breakpoints */
@media (max-width: 780px) {
  body.tmb-modern .tmb-links-grid { --tmb-cols: 2 !important; }
}
@media (max-width: 600px) {
  body.tmb-modern .tmb-links { padding: 20px 16px; border-radius: var(--tmb-radius); }
  body.tmb-modern .tmb-links-title { font-size: 19px; }
}
@media (max-width: 500px) {
  body.tmb-modern .tmb-links-grid { --tmb-cols: 1 !important; }
  /* List variant on narrow phones: stack so title gets full width */
  body.tmb-modern .tmb-links--list .tmb-link-card {
    flex-wrap: wrap; align-items: flex-start; gap: 10px 12px;
  }
  body.tmb-modern .tmb-links--list .tmb-link-card-top { order: 1; }
  body.tmb-modern .tmb-links--list .tmb-link-card-body {
    order: 2; flex: 1 1 calc(100% - 56px);
  }
  body.tmb-modern .tmb-links--list .tmb-link-cta {
    order: 3; width: 100%; padding-top: 4px;
  }
  body.tmb-modern .tmb-links--list .tmb-link-badge { font-size: 10px; padding: 3px 8px; }
}
@media (max-width: 400px) {
  body.tmb-modern .tmb-link-card { padding: 14px 14px 12px; }
  body.tmb-modern .tmb-link-mark { width: 36px; height: 36px; font-size: 18px; }
  body.tmb-modern .tmb-link-title { font-size: 15px; }
  body.tmb-modern .tmb-link-note { font-size: 12.5px; }
}

/* ======================================================================
   Ad slots — shared responsive container.
   All five positions wrap in <aside class="tmb-ad tmb-ad-{slot}">. No
   visible "Advertisement" eyebrow; the aria-label on the <aside> still
   announces it to assistive tech for disclosure compliance.
   ====================================================================== */
body.tmb-modern .tmb-ad {
  display: block;
  max-width: 100%;
  margin: 28px auto;
  padding: 0;
  text-align: center;
  background: transparent;
  border: 1px solid var(--tmb-border);
  border-radius: var(--tmb-radius);
  overflow: hidden;
  position: relative;
}
body.tmb-modern .tmb-ad > * {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
body.tmb-modern .tmb-ad a { display: inline-block; line-height: 0; }
body.tmb-modern .tmb-ad img,
body.tmb-modern .tmb-ad iframe,
body.tmb-modern .tmb-ad video,
body.tmb-modern .tmb-ad ins {
  max-width: 100% !important;
  height: auto;
  display: block;
  margin: 0 auto;
}
body.tmb-modern .tmb-ad ins { height: auto !important; }

/* Header + footer banners — full theme width (970×90 / 728×90 / 970×250).
   No border / surface so they don't compete with surrounding chrome. */
body.tmb-modern .tmb-ad-header,
body.tmb-modern .tmb-ad-footer {
  max-width: var(--tmb-max-w);
  margin: 20px auto;
  padding-inline: 24px;
  border: none;
  background: transparent;
}
/* Below-hero + before-related — article-reading width (728×90). */
body.tmb-modern .tmb-ad-below_hero,
body.tmb-modern .tmb-ad-before_related {
  max-width: var(--tmb-read-w);
  margin-inline: auto;
  padding-inline: 24px;
  border: none;
  background: transparent;
}

/* In-content ad — sits mid-article, card-style (300×250 / 336×280). */
body.tmb-modern .tmb-ad-in_content {
  max-width: 360px;
  margin: 2em auto;
  background: var(--tmb-surface);
  box-shadow: var(--tmb-shadow-sm);
}

/* Mobile padding tweaks */
@media (max-width: 640px) {
  body.tmb-modern .tmb-ad { margin: 20px auto; }
  body.tmb-modern .tmb-ad-header,
  body.tmb-modern .tmb-ad-footer,
  body.tmb-modern .tmb-ad-below_hero,
  body.tmb-modern .tmb-ad-before_related { padding-inline: 16px; }
}