/* Blog post: full-bleed image hero, dark reading column. Tokens match blog-archive.css. */
.tnzs {
  --s-bg: #f4f5fa; --s-ink: #121527; --s-muted: #5b6078; --s-line: rgba(18, 21, 39, .12);
  --s-blue: #2f45d6; --s-red: #cb2026; --s-navy: #10142a; --s-g: clamp(16px, 4vw, 56px);
  background: var(--s-bg); color: var(--s-ink); font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
main.site-main.tnzs { max-width: none; width: 100%; margin: 0; padding: 0; }
.container:has(> .row > .col > .tnzs) { max-width: none; width: 100%; padding: 0; }
.row:has(> .col > .tnzs) { margin: 0; }
.col:has(> .tnzs) { padding: 0; }
body:has(.tnzs) #page-content { background: #10142a; }
.tnzs a { color: inherit; }

.tnzs-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 100; }
.tnzs-progress span { display: block; height: 100%; background: linear-gradient(90deg, #cb2026, #566eb1); transform: scaleX(0); transform-origin: 0 50%; }

/* hero (shared) */
.tnzs-hero { background: var(--s-navy); color: #fff; padding: clamp(130px, 15vw, 190px) var(--s-g) 0; }
.tnzs-hero-text { max-width: 1100px; margin: 0 auto; }
.tnzs-crumbs { display: flex; gap: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #ff5a5f; margin-bottom: 20px; }
.tnzs-crumbs a { color: #ff5a5f; text-decoration: none; }
.tnzs .tnzs-title { margin: 0 0 24px; color: #fff; font: 300 clamp(36px, 5.4vw, 76px)/1.04 Outfit, Roboto, sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.tnzs-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; color: #a3a8c3; font-size: 14px; }
.tnzs-meta span + span::before { content: "•"; margin-right: 24px; opacity: .5; }

/* body layout (shared) */
.tnzs-layout { max-width: 1100px; margin: 0 auto; padding: 140px var(--s-g) 64px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; }
.tnzs-rail { position: sticky; top: 120px; align-self: start; display: grid; gap: 32px; }
.tnzs-label { margin: 0 0 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--s-red); font-weight: 600; }
.tnzs-share { display: grid; gap: 8px; justify-items: start; }
.tnzs-share a, .tnzs-copy { font: 14px Roboto, sans-serif; color: var(--s-muted); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.tnzs-share a:hover, .tnzs-copy:hover { color: var(--s-blue); }
.tnzs-body { max-width: 720px; font-size: 18px; line-height: 1.75; color: #2a2e45; }
.tnzs-body > :first-child { margin-top: 0; }
.tnzs-body p { margin: 0 0 1.25em; }
.tnzs .tnzs-body h2 { margin: 2em 0 .6em; color: var(--s-ink); font: 400 clamp(26px, 2.6vw, 34px)/1.2 Outfit, Roboto, sans-serif; scroll-margin-top: 110px; }
.tnzs-body h2 strong { font-weight: inherit; }
.tnzs-body ul, .tnzs-body ol { margin: 0 0 1.4em; padding-left: 1.2em; }
.tnzs-body li { margin-bottom: .6em; }
.tnzs-body li::marker { color: var(--s-red); }
.tnzs-body a { color: var(--s-blue); text-decoration: underline; text-underline-offset: 3px; }
.tnzs-body > p:first-of-type { font-size: 21px; color: var(--s-ink); }

/* CTA + related (shared) */
.tnzs-cta { margin: 0 var(--s-g); padding: clamp(48px, 7vw, 88px) var(--s-g); border-radius: 28px; text-align: center;
  background: radial-gradient(100% 140% at 100% 0, #566eb1 0, transparent 55%), radial-gradient(80% 120% at 0 100%, rgba(203, 32, 38, .7) 0, transparent 55%), #10142a; color: #fff; }
.tnzs-cta .tnzs-label { color: #ff8a8d; }
.tnzs .tnzs-cta h2 { margin: 0 0 28px; color: #fff; font: 300 clamp(30px, 4vw, 54px)/1.1 Outfit, Roboto, sans-serif; }
.tnzs .tnzs-btn { display: inline-block; padding: 16px 30px; border-radius: 999px; background: #cb2026; color: #fff; text-decoration: none; font-weight: 600; }
.tnzs .tnzs-btn:hover { background: #fff; color: #10142a; }
.tnzs-related { max-width: 1200px; margin: 0 auto; padding: 88px var(--s-g) 110px; }
.tnzs .tnzs-related-title { margin: 0 0 32px; color: var(--s-ink); font: 300 clamp(28px, 3vw, 40px)/1.1 Outfit, Roboto, sans-serif; }
.tnzs-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.tnzs-rcard { display: grid; gap: 10px; text-decoration: none; }
.tnzs-rcard-img { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #dde1ee; }
.tnzs-rcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tnzs-rcard:hover img { transform: scale(1.05); }
.tnzs-rcard-date { font-size: 13px; color: var(--s-muted); }
.tnzs-rcard-title { font: 400 20px/1.25 Outfit, Roboto, sans-serif; color: var(--s-ink); }

/* C — full-bleed image hero, dark reading mode */
.tnzs--c { --s-bg: #10142a; --s-ink: #f3f4fa; --s-muted: #a3a8c3; --s-line: rgba(255, 255, 255, .14); --s-blue: #8ea2ff; }
.tnzs--c .tnzs-hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; padding-bottom: 72px; overflow: hidden; }
.tnzs-hero-bg { position: absolute; inset: 0; }
.tnzs-hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.tnzs-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 20, 42, .45) 0, rgba(16, 20, 42, .35) 35%, rgba(16, 20, 42, .85) 70%, #10142a 100%); }
.tnzs--c .tnzs-hero-text { position: relative; width: 100%; }
.tnzs--c .tnzs-layout { padding-top: 56px; }
.tnzs--c .tnzs-body { color: #c9cde0; }
.tnzs--c .tnzs-body > p:first-of-type { color: #fff; }
.tnzs--c .tnzs-cta { background: radial-gradient(100% 140% at 100% 0, #566eb1 0, transparent 55%), radial-gradient(80% 120% at 0 100%, rgba(203, 32, 38, .7) 0, transparent 55%), #1a2042; }

@media (max-width: 900px) {
  .tnzs-layout { grid-template-columns: 1fr; gap: 32px; }
  .tnzs-rail { position: static; order: 2; }
  .tnzs-related-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tnzs * { transition: none !important; } }
@media (max-width: 600px) { .tnzs-meta span + span::before { display: none; } .tnzs-meta { gap: 6px 16px; } }
/* White logo on the dark post pages (same treatment as .theme-dark). */
body.single-post .site-title svg * { fill: #fff; stroke: #fff; }
/* Labels on the dark post background: brand red is 3.3:1 on navy, so use the lighter red (WCAG AA). */
.tnzs--c .tnzs-label { color: #ff6b70; }