/* ==========================================================================
   Publication Red - techistbd.com
   --------------------------------------------------------------------------
   Palette and type derived from measured values, not invented:
     ground + ink        Smashing Magazine, Overreacted, Prothom Alo, bdnews24
     accent #C22E22      a half-step deeper than Smashing's #D33A2C
     Noto Sans + Noto Sans Bengali, one superfamily so both scripts share
     metrics and x-height.
   Every text/ground pair below clears WCAG AA (4.5:1). Ratios in comments.

   FALLBACK (Option C, Deep Blue): swap four values in each block.
     light  --tp-ink #0A0A23  --tp-ink-soft #3B3B4F
            --tp-accent #002EAD  --tp-accent-ink #001F75
     dark   --tp-accent #8FB0FF  --tp-accent-ink #B3C9FF
   ========================================================================== */

:root {
  --tp-bg: #FFFFFF;
  --tp-surface: #F7F6F4;
  --tp-sunken: #EFEDE9;
  --tp-ink: #232323;          /* 15.7:1 on bg */
  --tp-ink-soft: #55524E;     /*  7.8:1 */
  --tp-ink-faint: #6E6963;    /*  5.4:1 */
  --tp-line: #E6E3DE;
  --tp-line-strong: #CFCAC2;
  --tp-accent: #C22E22;       /*  5.7:1 on bg, white on it 5.7:1 */
  --tp-accent-ink: #9E2419;   /*  7.7:1  hover/darker step */
  --tp-accent-wash: #FBF0EE;
  --tp-code-bg: #F7F5F2;
  --tp-ok: #2F6B3F;
  --tp-warn: #8A5A00;
  --tp-stop: #A3231C;
  --tp-shadow: 0 1px 2px rgba(35,35,35,.05), 0 10px 24px -14px rgba(194,46,34,.22);

  --tp-syn-key: #A0342A;      /* 6.4:1 on code bg */
  --tp-syn-str: #2F6B3F;      /* 5.9:1 */
  --tp-syn-num: #96591A;      /* 5.2:1 */
  --tp-syn-com: #6F6A63;      /* 4.9:1 */

  /* Three families, down from five. Noto Sans carries headings and body in
     both scripts; JetBrains Mono is kept for code only. */
  --tp-font-display: "Noto Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --tp-font-body: "Noto Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --tp-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tp-font-bn-heading: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  --tp-font-bn-body: "Noto Sans Bengali", "Hind Siliguri", sans-serif;

  --tp-radius-sm: 3px;
  --tp-radius-md: 6px;
  --tp-radius-pill: 999px;

  --tp-measure: 68ch;
  --tp-ease: cubic-bezier(.2,.7,.3,1);
}

html[data-theme="dark"] {
  --tp-bg: #17161A;
  --tp-surface: #201E22;
  --tp-sunken: #282529;
  --tp-ink: #EDEAE6;          /* 15.0:1 on bg */
  --tp-ink-soft: #A9A39B;     /*  7.2:1 */
  --tp-ink-faint: #918B82;    /*  5.3:1 */
  --tp-line: #2E2B30;
  --tp-line-strong: #423E44;
  --tp-accent: #F0776A;       /*  6.5:1 on bg */
  --tp-accent-ink: #F59A90;   /*  8.5:1 */
  --tp-accent-wash: #2A1D1B;
  --tp-code-bg: #1C1A1E;
  --tp-ok: #7FBF95;
  --tp-warn: #D9A45E;
  --tp-stop: #F0897C;
  --tp-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.8);

  --tp-syn-key: #F0897C;      /* 7.1:1 on code bg */
  --tp-syn-str: #7FBF95;      /* 8.1:1 */
  --tp-syn-num: #D9A45E;      /* 7.8:1 */
  --tp-syn-com: #928C83;      /* 5.2:1 */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  background: var(--tp-bg);
  color: var(--tp-ink);
  font-family: var(--tp-font-body);
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.content-bg,
body.content-style-unboxed .site,
.site-container,
#wrapper {
  background: var(--tp-bg);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-title,
.site-title {
  font-family: var(--tp-font-display) !important;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--tp-ink);
  text-wrap: balance;
}

a { color: var(--tp-accent); text-underline-offset: 2px; }
a:hover { color: var(--tp-accent-ink); }

:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 2px;
  border-radius: var(--tp-radius-sm);
}

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */

#masthead,
#masthead .site-header-row-container-inner,
#main-header {
  background: var(--tp-bg) !important;
  border-bottom: 1px solid var(--tp-line);
}
.site-branding .site-title {
  font-family: var(--tp-font-display) !important;
  color: var(--tp-ink) !important;
  letter-spacing: -0.03em;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a {
  font-family: var(--tp-font-display) !important;
  font-size: 15px;
  font-weight: 500;
  color: var(--tp-ink-soft) !important;
  position: relative;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 2px;
  height: 2px;
  background: var(--tp-accent);
  transition: left .22s var(--tp-ease), right .22s var(--tp-ease);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover::after,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a::after {
  left: calc(1.2em / 2); right: calc(1.2em / 2);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
  color: var(--tp-accent) !important;
}

/* Theme toggle */
.tp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  margin-left: 10px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  color: var(--tp-ink-soft);
  cursor: pointer;
  transition: color .18s var(--tp-ease), border-color .18s var(--tp-ease), transform .18s var(--tp-ease);
}
.tp-theme-toggle:hover {
  color: var(--tp-accent);
  border-color: var(--tp-accent);
}
.tp-theme-toggle:active { transform: scale(.94); }
.tp-theme-toggle svg { width: 17px; height: 17px; display: block; }
.tp-theme-toggle .tp-icon-sun { display: none; }
html[data-theme="dark"] .tp-theme-toggle .tp-icon-sun { display: block; }
html[data-theme="dark"] .tp-theme-toggle .tp-icon-moon { display: none; }

/* --------------------------------------------------------------------------
   Reading progress
   -------------------------------------------------------------------------- */

.tp-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--tp-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 9999;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Reading measure + article typography
   -------------------------------------------------------------------------- */

.entry-content > *,
.tp-article > * { max-width: var(--tp-measure); }
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > .ad-slot,
.entry-content > .wp-block-table,
.entry-content > .wp-block-code,
.entry-content > figure { max-width: none; }

.entry-content h2 { margin-top: 2.2em; margin-bottom: .6em; font-size: 1.55em; }
.entry-content h3 { margin-top: 1.8em; margin-bottom: .5em; font-size: 1.22em; }
.entry-content p  { margin-bottom: 1.4em; }
.entry-content ul, .entry-content ol { margin-bottom: 1.4em; padding-left: 1.4em; }
.entry-content li { margin-bottom: .5em; }
.entry-content img { border-radius: var(--tp-radius-md); }
.entry-content blockquote {
  border: 0;
  border-left: 3px solid var(--tp-accent);
  background: var(--tp-surface);
  margin: 1.8em 0;
  padding: 16px 20px;
  border-radius: 0 var(--tp-radius-md) var(--tp-radius-md) 0;
  font-style: normal;
  color: var(--tp-ink-soft);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wp-block-button__link,
.tp-btn {
  display: inline-block;
  background: var(--tp-accent);
  color: #fff !important;
  border-radius: var(--tp-radius-md);
  font-family: var(--tp-font-display);
  font-weight: 700;
  font-size: .92rem;
  border: none;
  box-shadow: none !important;
  text-decoration: none;
  padding: .72em 1.35em;
  transition: background .18s var(--tp-ease), transform .18s var(--tp-ease), box-shadow .18s var(--tp-ease);
}
.wp-block-button__link:hover,
.tp-btn:hover {
  background: var(--tp-accent-ink);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--tp-shadow) !important;
}
.wp-block-button__link:active,
.tp-btn:active { transform: translateY(0); }
html[data-theme="dark"] .wp-block-button__link,
html[data-theme="dark"] .tp-btn { color: #17131F !important; }
html[data-theme="dark"] .wp-block-button__link:hover,
html[data-theme="dark"] .tp-btn:hover { color: #17131F !important; }

.tp-btn-ghost,
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
  background: transparent !important;
  color: var(--tp-accent) !important;
  border: 1px solid var(--tp-line-strong) !important;
  box-shadow: none !important;
}
.tp-btn-ghost:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--tp-accent-wash) !important;
  color: var(--tp-accent) !important;
  border-color: var(--tp-accent) !important;
}

/* --------------------------------------------------------------------------
   Code
   -------------------------------------------------------------------------- */

code, kbd, pre, .wp-block-code { font-family: var(--tp-font-mono); }

.wp-block-code,
pre.wp-block-code {
  position: relative;
  background: var(--tp-code-bg);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  padding: 44px 16px 15px;
  font-size: 14.5px;
  line-height: 1.72;
  overflow-x: auto;
  white-space: pre;
  color: var(--tp-ink);
  tab-size: 2;
}
:where(p, li, td, h1, h2, h3, h4) > code {
  background: var(--tp-code-bg);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-sm);
  padding: 1px 5px;
  font-size: .86em;
  color: var(--tp-accent-ink);
}

.tp-code-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  background: var(--tp-sunken);
  border-bottom: 1px solid var(--tp-line-strong);
  border-radius: var(--tp-radius-md) var(--tp-radius-md) 0 0;
  font-family: var(--tp-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tp-ink-faint);
}
.tp-copy {
  background: transparent;
  border: 1px solid var(--tp-line-strong);
  border-radius: var(--tp-radius-sm);
  color: var(--tp-ink-soft);
  font-family: var(--tp-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  cursor: pointer;
  transition: color .16s var(--tp-ease), border-color .16s var(--tp-ease), background .16s var(--tp-ease);
}
.tp-copy:hover { color: var(--tp-accent); border-color: var(--tp-accent); background: var(--tp-accent-wash); }
.tp-copy[data-copied="1"] { color: var(--tp-ok); border-color: var(--tp-ok); }

/* --------------------------------------------------------------------------
   Tables in post content
   -------------------------------------------------------------------------- */

.entry-content .wp-block-table {
  overflow-x: auto;
  margin-block: 1.8em;
}
.entry-content .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-family: var(--tp-font-display);
  font-size: .93rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  overflow: hidden;
}
.entry-content .wp-block-table th {
  text-align: left;
  font-family: var(--tp-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tp-ink-soft);
  background: var(--tp-surface);
  border: 0;
  border-bottom: 1px solid var(--tp-line);
  padding: 11px 14px;
}
.entry-content .wp-block-table td {
  border: 0;
  border-bottom: 1px solid var(--tp-line);
  padding: 11px 14px;
  vertical-align: top;
  color: var(--tp-ink);
}
.entry-content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.entry-content .wp-block-table td:first-child { font-weight: 600; white-space: nowrap; }
.entry-content .wp-block-table code { font-size: .84em; }

/* --------------------------------------------------------------------------
   Ad slots
   -------------------------------------------------------------------------- */

.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  margin-block: 2.6rem;
  border: 1px dashed var(--tp-line-strong);
  background: var(--tp-accent-wash);
  border-radius: var(--tp-radius-md);
  color: var(--tp-accent);
  font-family: var(--tp-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  contain: layout;
}
.ad-slot p { margin: 0; }
.ad-slot--leaderboard { min-height: 90px; }
@media (max-width: 768px) {
  .ad-slot { min-height: 250px; }
  .ad-slot--leaderboard { min-height: 100px; }
}

/* --------------------------------------------------------------------------
   Bengali
   -------------------------------------------------------------------------- */

/* Leading corrected against real practice: Prothom Alo and bdnews24 run
   Bengali body at 1.30 to 1.43. News optimises for density, so long-form
   sits a little above that. 1.72 is the working figure, not the 1.95 this
   file carried before.

   .is-bengali is added to <body> by the theme when a post title contains
   Bengali, so a whole post styles correctly without per-block classes. */

.lang-bn,
[lang="bn"],
.is-bengali .entry-content {
  font-family: var(--tp-font-bn-body);
  letter-spacing: 0 !important;
  text-transform: none !important;
}

p.lang-bn,
li.lang-bn,
[lang="bn"] p,
.is-bengali .entry-content p,
.is-bengali .entry-content li {
  font-size: 19px;
  line-height: 1.72;
  letter-spacing: 0 !important;
}

h1.lang-bn, h2.lang-bn, h3.lang-bn, h4.lang-bn,
[lang="bn"] h1, [lang="bn"] h2, [lang="bn"] h3,
.is-bengali .entry-title,
.is-bengali .entry-content h2,
.is-bengali .entry-content h3 {
  font-family: var(--tp-font-bn-heading) !important;
  line-height: 1.42;
  letter-spacing: 0 !important;
}

/* Latin runs inline constantly in Bengali technical writing (Docker, n8n,
   VRAM). Keep code and inline literals in the Latin faces. */
.is-bengali .entry-content code,
.is-bengali .entry-content pre,
.is-bengali .tp-code-bar {
  font-family: var(--tp-font-mono) !important;
  letter-spacing: normal !important;
}
/* Bengali needs more size than Latin at the same optical weight, so the
   contents list and meta rows get a bump rather than inheriting Latin sizes. */
.is-bengali .tp-toc a {
  font-family: var(--tp-font-bn-body);
  font-size: 1.02rem;
  line-height: 1.55;
  letter-spacing: 0 !important;
}
.is-bengali .tp-toc > summary {
  font-family: var(--tp-font-bn-heading);
  font-size: 1.02rem;
}
.is-bengali .tp-toc li { margin-bottom: 10px; }
.is-bengali .tp-author-bio,
.is-bengali .entry-content blockquote p {
  font-family: var(--tp-font-bn-body);
  line-height: 1.72;
}

/* --------------------------------------------------------------------------
   Homepage hero
   -------------------------------------------------------------------------- */

.page-id-60 .entry-hero { display: none; }
.page-id-60 .entry-content-wrap { padding: 0 !important; }
.page-id-60 .entry.single-entry { box-shadow: none !important; }

/* Kadence hardcodes a light grey on the page-title band, which survives into
   dark mode as white bars either side of the container. Use the tokens. */
.entry-hero-container-inner,
.entry-hero .entry-hero-container-inner,
.entry-hero-layout-standard .entry-hero-container-inner {
  background: var(--tp-surface) !important;
}
.entry-hero .entry-title,
.entry-hero .kadence-breadcrumbs,
.entry-hero .kadence-breadcrumbs a {
  color: var(--tp-ink) !important;
}
.entry-hero.page-hero-section .entry-header {
  min-height: 0 !important;
  padding: 36px 0;
}
.entry-hero .entry-title { font-size: clamp(1.6rem, 3vw, 2.1rem) !important; }

/* Plain ground. Every reference site measured for this restyle (Smashing,
   CSS-Tricks, Overreacted, freeCodeCamp, Ghost, Stripe, Prothom Alo,
   bdnews24) uses a flat white or near-white hero. No tint, no gradient. */
.site-hero {
  padding: 74px 0 66px;
  background: var(--tp-bg);
  border-bottom: 1px solid var(--tp-line);
  max-width: none !important;
}
.site-hero .site-hero-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}
.hero-eyebrow {
  font-family: var(--tp-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tp-accent) !important;
  margin: 0 0 16px !important;
  max-width: none !important;
}
.hero-title {
  font-size: clamp(2.3rem, 5.6vw, 3.7rem) !important;
  line-height: 1.04 !important;
  margin: 0 0 20px !important;
  max-width: 16ch;
}
.hero-standfirst {
  font-family: var(--tp-font-body) !important;
  font-size: 1.16rem !important;
  color: var(--tp-ink-soft) !important;
  max-width: 54ch !important;
  margin: 0 0 28px !important;
}
.site-hero .wp-block-buttons { margin: 0; }

@media (max-width: 640px) {
  .site-hero { padding: 48px 0 44px; }
  .hero-title { max-width: none; }
}

/* --------------------------------------------------------------------------
   Homepage sections
   -------------------------------------------------------------------------- */

.content-section {
  max-width: 1000px !important;
  margin: 0 auto;
  padding: 58px 24px;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--tp-line);
  padding-bottom: 12px;
  margin-bottom: 28px;
  max-width: none !important;
}
.section-head h2 { margin: 0 !important; font-size: 1.35rem !important; }
.section-head a {
  font-family: var(--tp-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.section-head a:hover { text-decoration: underline; }

/* Post meta */
.post-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tp-font-mono);
  font-size: 11px;
  color: var(--tp-ink-faint);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.post-meta-row .wp-block-post-terms,
.post-meta-row .wp-block-post-date { margin: 0; }
.post-meta-row .wp-block-post-terms a {
  font-family: var(--tp-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-accent);
  text-decoration: none;
}
.post-meta-row .wp-block-post-terms a:hover { text-decoration: underline; }
.post-meta-row .wp-block-post-date { color: var(--tp-ink-faint); }

/* Featured post */
.featured-post-query .wp-block-post {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 30px;
  align-items: center;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  padding: 22px;
  background: var(--tp-surface);
  transition: border-color .22s var(--tp-ease), transform .22s var(--tp-ease), box-shadow .22s var(--tp-ease);
}
.featured-post-query .wp-block-post:hover {
  border-color: var(--tp-accent);
  transform: translateY(-2px);
  box-shadow: var(--tp-shadow);
}
.featured-post-query .wp-block-post-featured-image {
  overflow: hidden;
  border-radius: var(--tp-radius-sm);
}
.featured-post-query .wp-block-post-featured-image img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: var(--tp-sunken);
  transition: transform .4s var(--tp-ease);
}
.featured-post-query .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.featured-post-query .wp-block-post-title {
  font-size: 1.75rem !important;
  margin: 6px 0 10px !important;
  line-height: 1.12 !important;
}
.featured-post-query .wp-block-post-title a { color: var(--tp-ink); text-decoration: none; transition: color .18s var(--tp-ease); }
.featured-post-query .wp-block-post:hover .wp-block-post-title a { color: var(--tp-accent); }
.featured-post-query .wp-block-post-excerpt { color: var(--tp-ink-soft); font-size: 1rem; line-height: 1.6; }
.featured-post-query .wp-block-post-excerpt__more-link { display: none; }

/* Post grid */
.post-grid-query ul.wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
  margin: 0; padding: 0;
}
.post-grid-query .wp-block-post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  padding: 16px;
  background: var(--tp-surface);
  transition: border-color .22s var(--tp-ease), transform .22s var(--tp-ease), box-shadow .22s var(--tp-ease);
}
.post-grid-query .wp-block-post:hover {
  border-color: var(--tp-accent);
  transform: translateY(-2px);
  box-shadow: var(--tp-shadow);
}
.post-grid-query .wp-block-post-featured-image {
  overflow: hidden;
  border-radius: var(--tp-radius-sm);
  margin-bottom: 14px;
}
.post-grid-query .wp-block-post-featured-image img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: var(--tp-sunken);
  transition: transform .4s var(--tp-ease);
}
.post-grid-query .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.post-grid-query .wp-block-post-title {
  font-size: 1.04rem !important;
  margin: 0 !important;
  line-height: 1.24 !important;
}
.post-grid-query .wp-block-post-title a { color: var(--tp-ink); text-decoration: none; transition: color .18s var(--tp-ease); }
.post-grid-query .wp-block-post:hover .wp-block-post-title a { color: var(--tp-accent); }

@media (max-width: 900px) {
  .post-grid-query ul.wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .featured-post-query .wp-block-post { grid-template-columns: 1fr; }
  .featured-post-query .wp-block-post-title { font-size: 1.4rem !important; }
  .post-grid-query ul.wp-block-post-template { grid-template-columns: 1fr; }
}

/* Topic cards */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: none !important;
}
.topic-card {
  display: block;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  padding: 18px;
  text-decoration: none;
  background: var(--tp-surface);
  transition: border-color .22s var(--tp-ease), transform .22s var(--tp-ease), box-shadow .22s var(--tp-ease);
}
.topic-card:hover {
  border-color: var(--tp-accent);
  transform: translateY(-2px);
  box-shadow: var(--tp-shadow);
}
.topic-card .tc-name {
  display: block;
  font-family: var(--tp-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--tp-ink);
  margin-bottom: 5px;
}
.topic-card:hover .tc-name { color: var(--tp-accent); }
.topic-card .tc-desc {
  display: block;
  font-size: .88rem;
  color: var(--tp-ink-soft);
  line-height: 1.5;
}
.topic-card .tc-count {
  display: block;
  margin-top: 10px;
  font-family: var(--tp-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-ink-faint);
}
@media (max-width: 900px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .topic-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Single post
   -------------------------------------------------------------------------- */

/* The generated covers carry the post title inside the image, so rendering one
   as a page banner repeats the title and pushes the article ~530px down. The
   cover's job is the card grid and the Open Graph preview, not this page.
   Kadence's "behind" thumbnail position also applies a negative bottom margin
   to overlay the title, which collides with our unbacked header. */
.single-post .post-thumbnail,
.single-post .article-post-thumbnail,
.single-post .post-top-featured {
  display: none !important;
}

/* With the banner gone, give the header its own breathing room. */
.single-post .entry-header.post-title {
  padding-top: 8px;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Card thumbnails must not crop the covers
   --------------------------------------------------------------------------
   The generated covers are 1200x630 (1.906:1) with the title set inside them.
   Kadence's archive forces 3:2 and object-fit: cover, which crops the sides
   and slices the first character off every title. Every thumbnail container
   therefore uses the cover's own ratio, so nothing is ever cropped. */

.loop-entry .post-thumbnail,
.loop-entry .post-thumbnail-inner,
.entry .post-thumbnail[class*="kadence-thumbnail-ratio"] {
  aspect-ratio: 1200 / 630 !important;
  padding-bottom: 0 !important;
  height: auto !important;
}
.loop-entry .post-thumbnail img {
  aspect-ratio: 1200 / 630 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: var(--tp-sunken);
}

.tp-post-header { margin-bottom: 26px; }
.tp-post-header .tp-kicker {
  font-family: var(--tp-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tp-accent);
  text-decoration: none;
}
.tp-post-meta {
  font-family: var(--tp-font-mono);
  font-size: 11.5px;
  color: var(--tp-ink-faint);
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Table of contents */
.tp-toc {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  background: var(--tp-surface);
  padding: 16px 18px;
  margin: 0 0 30px;
  max-width: var(--tp-measure);
}
.tp-toc > summary {
  font-family: var(--tp-font-display);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  color: var(--tp-ink);
  list-style: none;
}
.tp-toc > summary::-webkit-details-marker { display: none; }
.tp-toc > summary::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-right: 9px;
  border-left: 5px solid var(--tp-accent);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .2s var(--tp-ease);
  vertical-align: middle;
}
.tp-toc[open] > summary::before { transform: rotate(90deg); }
.tp-toc ol { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: toc; }
.tp-toc li { counter-increment: toc; margin: 0 0 7px; }
.tp-toc li.lvl-3 { padding-left: 18px; }
.tp-toc a {
  font-family: var(--tp-font-display);
  font-size: .9rem;
  color: var(--tp-ink-soft);
  text-decoration: none;
  transition: color .16s var(--tp-ease);
}
.tp-toc a:hover, .tp-toc a.is-active { color: var(--tp-accent); }

/* Author box */
.tp-author {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  background: var(--tp-surface);
  padding: 20px;
  margin: 40px 0 0;
  max-width: var(--tp-measure);
}
.tp-author-avatar {
  width: 58px; height: 58px;
  border-radius: var(--tp-radius-pill);
  background: var(--tp-accent-wash);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--tp-font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--tp-accent);
  overflow: hidden;
}
.tp-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tp-author-name {
  font-family: var(--tp-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 5px;
}
.tp-author-bio {
  margin: 0 0 10px;
  font-size: .95rem;
  color: var(--tp-ink-soft);
  line-height: 1.6;
}
.tp-author-links { display: flex; flex-wrap: wrap; gap: 14px; }
.tp-author-links a {
  font-family: var(--tp-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.tp-author-links a:hover { text-decoration: underline; }

/* Related posts */
.tp-related { margin: 44px 0 0; max-width: none; }
.tp-related h2 {
  font-size: 1.2rem !important;
  border-bottom: 1px solid var(--tp-line);
  padding-bottom: 11px;
  margin: 0 0 20px !important;
}
.tp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tp-related-card {
  display: block;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  overflow: hidden;
  text-decoration: none;
  background: var(--tp-surface);
  transition: border-color .22s var(--tp-ease), transform .22s var(--tp-ease), box-shadow .22s var(--tp-ease);
}
.tp-related-card:hover {
  border-color: var(--tp-accent);
  transform: translateY(-2px);
  box-shadow: var(--tp-shadow);
}
.tp-related-thumb { overflow: hidden; background: var(--tp-sunken); }
.tp-related-thumb img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1200 / 630; object-fit: cover;
  transition: transform .4s var(--tp-ease);
}
.tp-related-card:hover .tp-related-thumb img { transform: scale(1.03); }
.tp-related-body { padding: 13px 15px 16px; }
.tp-related-cat {
  font-family: var(--tp-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-accent);
  display: block;
  margin-bottom: 6px;
}
.tp-related-title {
  font-family: var(--tp-font-display);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.26;
  color: var(--tp-ink);
  margin: 0;
}
.tp-related-card:hover .tp-related-title { color: var(--tp-accent); }
@media (max-width: 900px) { .tp-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tp-related-grid { grid-template-columns: 1fr; } }

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

.tp-footer {
  border-top: 1px solid var(--tp-line);
  background: var(--tp-surface);
  padding: 48px 24px 36px;
  margin-top: 64px;
}
.tp-footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 36px;
}
.tp-footer h3 {
  font-family: var(--tp-font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tp-ink-faint);
  margin: 0 0 14px !important;
  letter-spacing: .12em !important;
}
.tp-footer-brand strong {
  font-family: var(--tp-font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  display: block;
  margin-bottom: 8px;
  color: var(--tp-ink);
}
.tp-footer-brand p {
  margin: 0;
  font-size: .95rem;
  color: var(--tp-ink-soft);
  line-height: 1.6;
  max-width: 38ch;
}
.tp-footer ul { list-style: none; margin: 0; padding: 0; }
.tp-footer li { margin-bottom: 9px; }
.tp-footer li a {
  font-family: var(--tp-font-display);
  font-size: .93rem;
  color: var(--tp-ink-soft);
  text-decoration: none;
  transition: color .16s var(--tp-ease);
}
.tp-footer li a:hover { color: var(--tp-accent); }
.tp-footer-ext::after {
  content: "\2197";
  display: inline-block;
  margin-left: 4px;
  font-size: .85em;
  opacity: .6;
}
.tp-footer-bottom {
  max-width: 1000px;
  margin: 34px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--tp-line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--tp-font-mono);
  font-size: 11px;
  color: var(--tp-ink-faint);
}
.tp-footer-bottom a { color: var(--tp-ink-faint); text-decoration: none; }
.tp-footer-bottom a:hover { color: var(--tp-accent); }
@media (max-width: 760px) {
  .tp-footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* Kadence's own footer is replaced by ours */
.site-footer .site-bottom-footer-wrap { display: none; }

/* --------------------------------------------------------------------------
   Archive / blog listing
   -------------------------------------------------------------------------- */

.loop-entry .entry-title { font-size: 1.3rem !important; }
.loop-entry .entry-title a { color: var(--tp-ink); text-decoration: none; }
.loop-entry:hover .entry-title a { color: var(--tp-accent); }
.loop-entry.entry {
  border: 1px solid var(--tp-line) !important;
  border-radius: var(--tp-radius-md);
  box-shadow: none !important;
  background: var(--tp-surface);
  transition: border-color .22s var(--tp-ease), transform .22s var(--tp-ease), box-shadow .22s var(--tp-ease);
}
.loop-entry.entry:hover {
  border-color: var(--tp-accent) !important;
  transform: translateY(-2px);
  box-shadow: var(--tp-shadow) !important;
}
.entry.single-entry { box-shadow: none !important; background: transparent; }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .tp-progress { display: none; }
  .featured-post-query .wp-block-post:hover,
  .post-grid-query .wp-block-post:hover,
  .topic-card:hover,
  .tp-related-card:hover,
  .loop-entry.entry:hover { transform: none; }
}