/*
Theme Name: TechnoBabu
Theme URI: https://technobabu.com
Author: Anurag Sinha
Author URI: https://technobabu.com/about/
Description: Editorial block theme for TechnoBabu — India's hands-on technology journal. Paper-and-ink Swiss editorial design: Fraunces serif display, Archivo grotesque, a single burnt-saffron accent, hairline rules and print-grade typography.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: technobabu
Tags: blog, news, one-column, custom-colors, custom-menu, editor-style, block-styles, full-site-editing
*/

/* ============================================================
   TechnoBabu Editorial Design System
   Paper · Ink · One accent. Nothing decorative without purpose.
   ============================================================ */

:root {
  --tb-paper: #faf8f4;
  --tb-paper-2: #f3efe7;
  --tb-card: #fffdf9;
  --tb-ink: #181512;
  --tb-ink-soft: #4b453d;
  --tb-muted: #8a8276;
  --tb-rule: #dcd5c9;
  --tb-rule-dark: #181512;
  --tb-accent: #bc3f11;
  --tb-accent-deep: #93300b;
  --tb-accent-wash: #f7e8e0;
  --tb-font-display: "Fraunces", Georgia, serif;
  --tb-font-body: "Archivo", "Segoe UI", sans-serif;
  --tb-font-mono: "JetBrains Mono", Consolas, monospace;
  --tb-ease: cubic-bezier(.25, .8, .25, 1);
  --tb-dur: .22s;
}

html {
  scroll-behavior: smooth;
  /* stop iOS/Android from inflating text after orientation change */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background-color: var(--tb-paper);
  color: var(--tb-ink);
  font-family: var(--tb-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* long URLs / unbroken strings in articles must never force sideways scroll */
.tb-content p, .tb-content li, .tb-content td,
.wp-block-comment-content, .tb-hero-sub, .tb-index-desc {
  overflow-wrap: break-word;
}

/* faint paper grain — barely there */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(24, 21, 18, 0.022) 1px, transparent 1px);
  background-size: 5px 5px;
  pointer-events: none;
}

::selection { background: var(--tb-accent); color: #fff; }

h1, h2, h3, h4,
.wp-block-post-title, .wp-block-query-title, .wp-block-site-title {
  font-family: var(--tb-font-display);
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--tb-ink);
}

a {
  color: var(--tb-ink);
  text-decoration: underline;
  text-decoration-color: var(--tb-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--tb-dur) var(--tb-ease), text-decoration-color var(--tb-dur) var(--tb-ease);
}
a:hover { color: var(--tb-accent); text-decoration-color: var(--tb-accent); }

img { max-width: 100%; height: auto; }

/* labels — small caps grotesque, the system's voice */
.tb-label {
  font-family: var(--tb-font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tb-ink-soft);
}
.tb-label-accent { color: var(--tb-accent); }

/* hairline rules */
.tb-rule { border: none; height: 1px; background: var(--tb-rule); margin: 0; }
.tb-rule-dark { border: none; height: 2px; background: var(--tb-ink); margin: 0; }

/* ============================================================
   Buttons — rectangular, print-like, honest
   ============================================================ */
.wp-block-button__link, .tb-btn {
  font-family: var(--tb-font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  padding: 1em 2.1em;
  display: inline-block;
  cursor: pointer;
  transition: background var(--tb-dur) var(--tb-ease), color var(--tb-dur) var(--tb-ease), border-color var(--tb-dur) var(--tb-ease), transform var(--tb-dur) var(--tb-ease);
}
.tb-btn-primary {
  background: var(--tb-ink);
  color: var(--tb-paper) !important;
  border: 1px solid var(--tb-ink);
}
.tb-btn-primary:hover { background: var(--tb-accent); border-color: var(--tb-accent); color: #fff !important; }
.tb-btn-ghost {
  background: transparent;
  color: var(--tb-ink) !important;
  border: 1px solid var(--tb-ink);
}
.tb-btn-ghost:hover { background: var(--tb-ink); color: var(--tb-paper) !important; }
.tb-btn:active { transform: translateY(1px); }

/* ============================================================
   Masthead
   ============================================================ */
.tb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tb-ink);
}
/* double rule under masthead — classic print */
.tb-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--tb-ink);
  opacity: .35;
}

.tb-logo-link { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.tb-logo-mark { width: 34px; height: 34px; flex: none; }
.tb-logo-text {
  font-family: var(--tb-font-display);
  font-weight: 640;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--tb-ink);
}
.tb-logo-text em { font-style: italic; color: var(--tb-accent); }

.tb-nav .wp-block-navigation-item__content {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tb-ink-soft);
  text-decoration: none;
  position: relative;
  padding: .35rem 0;
}
.tb-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--tb-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s var(--tb-ease);
}
.tb-nav .wp-block-navigation-item__content:hover { color: var(--tb-ink); }
.tb-nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); transform-origin: left; }
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--tb-paper);
}

/* ============================================================
   Hero — front page broadsheet opening
   ============================================================ */
.tb-hero {
  position: relative;
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.tb-edition-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--tb-rule);
  font-family: var(--tb-font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tb-muted);
}
.tb-edition-line strong { color: var(--tb-accent); font-weight: 600; }

.tb-hero-title {
  font-family: var(--tb-font-display);
  font-size: clamp(2.5rem, 7vw, 5.4rem);
  font-weight: 480;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: clamp(1.8rem, 4vw, 3rem) 0 1.4rem;
  max-width: 17ch;
}
.tb-hero-title .tb-it {
  font-style: italic;
  font-weight: 420;
  color: var(--tb-accent);
}
/* hand-drawn underline stroke that draws itself in */
.tb-hero-title .tb-stroke { position: relative; white-space: nowrap; }
.tb-hero-title .tb-stroke svg {
  position: absolute;
  left: 0; bottom: -0.12em;
  width: 100%; height: .18em;
  overflow: visible;
}
.tb-hero-title .tb-stroke path {
  stroke: var(--tb-accent);
  stroke-width: 7;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: tb-draw 1.1s .7s var(--tb-ease) forwards;
}
@keyframes tb-draw { to { stroke-dashoffset: 0; } }

.tb-hero-sub {
  max-width: 56ch;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.75;
  color: var(--tb-ink-soft);
}
.tb-hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

/* hero fact row — typeset like a print fact box */
.tb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 2px solid var(--tb-ink);
}
.tb-stat {
  padding: 1.1rem 1.2rem 1.1rem 0;
  border-bottom: 1px solid var(--tb-rule);
}
.tb-stat + .tb-stat { border-left: 1px solid var(--tb-rule); padding-left: 1.2rem; }
.tb-stat-num {
  font-family: var(--tb-font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 560;
  color: var(--tb-ink);
  font-variant-numeric: tabular-nums;
}
.tb-stat-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tb-muted);
  margin-top: .3rem;
}

/* ============================================================
   Ticker — newsprint wire strip
   ============================================================ */
.tb-marquee {
  border-top: 1px solid var(--tb-ink);
  border-bottom: 1px solid var(--tb-ink);
  background: var(--tb-ink);
  overflow: hidden;
  padding: .7rem 0;
}
.tb-marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: tb-marquee 36s linear infinite;
}
.tb-marquee:hover .tb-marquee-track { animation-play-state: paused; }
@keyframes tb-marquee { to { transform: translateX(-50%); } }
.tb-marquee-item {
  font-family: var(--tb-font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tb-paper);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.tb-marquee-item::after { content: "/"; color: var(--tb-accent); }

/* ============================================================
   Sections
   ============================================================ */
.tb-section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.tb-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--tb-ink);
  padding-bottom: .9rem;
  margin-bottom: 0;
}
.tb-kicker {
  font-family: var(--tb-font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tb-accent);
}
.tb-section-title {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-weight: 520;
  letter-spacing: -0.02em;
  margin: .6rem 0 0;
}
.tb-section-sub { color: var(--tb-ink-soft); max-width: 58ch; line-height: 1.75; margin-top: .8rem; }

/* ============================================================
   The Index — numbered category ledger
   ============================================================ */
.tb-index { border-bottom: 1px solid var(--tb-rule); }
.tb-index-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.5rem 0.4rem;
  border-top: 1px solid var(--tb-rule);
  text-decoration: none;
  position: relative;
  transition: padding-left .28s var(--tb-ease), background .28s var(--tb-ease);
}
.tb-index-row:hover { background: var(--tb-card); padding-left: 1.1rem; }
.tb-index-num {
  font-family: var(--tb-font-mono);
  font-size: .8rem;
  color: var(--tb-muted);
  transition: color var(--tb-dur);
}
.tb-index-row:hover .tb-index-num { color: var(--tb-accent); }
.tb-index-name {
  font-family: var(--tb-font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  font-weight: 540;
  letter-spacing: -0.015em;
  color: var(--tb-ink);
  transition: font-style 0s;
}
.tb-index-row:hover .tb-index-name { font-style: italic; color: var(--tb-accent); }
.tb-index-desc {
  grid-column: 2;
  font-size: .92rem;
  color: var(--tb-ink-soft);
  line-height: 1.6;
  max-width: 62ch;
  margin-top: .2rem;
}
.tb-index-count {
  font-family: var(--tb-font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--tb-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.tb-index-arrow {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--tb-font-body);
  color: var(--tb-ink);
  transition: transform .28s var(--tb-ease), color var(--tb-dur);
}
.tb-index-row:hover .tb-index-arrow { transform: translateX(6px); color: var(--tb-accent); }

@media (max-width: 600px) {
  .tb-index-row { grid-template-columns: 2.4rem 1fr auto; gap: .8rem; }
}

/* ============================================================
   Post cards — editorial card grid (query loop)
   ============================================================ */
.tb-post-grid .wp-block-post-template { gap: 0 !important; }
.tb-post-grid .wp-block-post {
  background: transparent;
  border-top: 1px solid var(--tb-rule);
  padding: 1.6rem 1.4rem 1.8rem 0;
  position: relative;
  transition: background .25s var(--tb-ease);
}
.tb-post-grid .wp-block-post:hover { background: var(--tb-card); }
/* accent tick that grows on hover */
.tb-post-grid .wp-block-post::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 2px;
  background: var(--tb-accent);
  transition: width .35s var(--tb-ease);
}
.tb-post-grid .wp-block-post:hover::before { width: 3.5rem; }

.tb-post-grid .wp-block-post-terms { margin-bottom: .7rem; }
.tb-post-grid .wp-block-post-terms a {
  font-family: var(--tb-font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tb-accent);
  text-decoration: none;
}
.tb-post-grid .wp-block-post-title {
  font-size: 1.22rem;
  font-weight: 540;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 .55rem;
}
.tb-post-grid .wp-block-post-title a { color: var(--tb-ink); text-decoration: none; }
.tb-post-grid .wp-block-post-title a:hover { color: var(--tb-accent); font-style: italic; }
.tb-post-grid .wp-block-post-excerpt { font-size: .93rem; color: var(--tb-ink-soft); line-height: 1.65; }
.tb-post-grid .wp-block-post-excerpt__more-link { display: none; }
.tb-post-grid .wp-block-post-date {
  font-family: var(--tb-font-mono);
  font-size: .72rem;
  color: var(--tb-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wp-block-query-pagination { margin-top: 2.5rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers {
  font-family: var(--tb-font-mono);
  font-size: .82rem;
  color: var(--tb-ink);
  border: 1px solid var(--tb-rule);
  padding: .45rem .85rem;
  text-decoration: none;
  transition: all var(--tb-dur) var(--tb-ease);
}
.wp-block-query-pagination a:hover { border-color: var(--tb-ink); background: var(--tb-ink); color: var(--tb-paper); }
.wp-block-query-pagination .current { background: var(--tb-accent); color: #fff; border-color: var(--tb-accent); }

/* ============================================================
   Field notes — numbered footnote panel
   ============================================================ */
.tb-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 2px solid var(--tb-ink);
  counter-reset: tbwhy;
}
.tb-why-item {
  counter-increment: tbwhy;
  padding: 1.7rem 1.6rem 1.9rem 0;
  border-bottom: 1px solid var(--tb-rule);
  position: relative;
}
.tb-why-item + .tb-why-item { border-left: 1px solid var(--tb-rule); padding-left: 1.6rem; }
@media (max-width: 781px) {
  .tb-why-item + .tb-why-item { border-left: none; padding-left: 0; }
}
.tb-why-item::before {
  content: counter(tbwhy, decimal-leading-zero);
  font-family: var(--tb-font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--tb-accent);
  display: block;
  margin-bottom: .9rem;
}
.tb-why-item h3 {
  font-size: 1.12rem;
  font-weight: 560;
  margin: 0 0 .5rem;
}
.tb-why-item p { font-size: .92rem; color: var(--tb-ink-soft); line-height: 1.68; margin: 0; }

/* ============================================================
   Pull-quote CTA band
   ============================================================ */
.tb-cta-band {
  border-top: 2px solid var(--tb-ink);
  border-bottom: 2px solid var(--tb-ink);
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  text-align: center;
  position: relative;
  background: var(--tb-card);
}
.tb-cta-band .tb-section-title {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  font-weight: 480;
  max-width: 22ch;
  margin: .8rem auto .6rem;
}
.tb-cta-band .tb-section-title em { font-style: italic; color: var(--tb-accent); }
.tb-cta-band .tb-section-sub { margin: 0 auto 2.2rem; }
/* constrain + pad the full-bleed band's content (matches wideSize) */
.tb-cta-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: clamp(1.1rem, 4vw, 2rem);
  padding-right: clamp(1.1rem, 4vw, 2rem);
}

/* ============================================================
   Single article — the reading experience
   ============================================================ */
.tb-article-header { padding: clamp(3rem, 6vw, 5rem) 0 1.8rem; }
.tb-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  font-family: var(--tb-font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tb-muted);
  border-top: 2px solid var(--tb-ink);
  padding-top: 1rem;
}
.tb-article-meta .wp-block-post-terms a {
  color: var(--tb-accent);
  text-decoration: none;
  font-weight: 500;
}

.tb-content {
  font-size: 1.09rem;
  line-height: 1.85;
  color: var(--tb-ink);
}
.tb-content > * { margin-block-start: 1.5em; }

/* drop cap on the opening paragraph */
.single .tb-content > .wp-block-post-content > p:first-of-type::first-letter,
.single .tb-content > p:first-of-type::first-letter {
  font-family: var(--tb-font-display);
  font-weight: 560;
  font-size: 3.4em;
  line-height: .82;
  float: left;
  padding: .07em .12em 0 0;
  color: var(--tb-accent);
}

.tb-content h2 {
  font-size: clamp(1.45rem, 2.8vw, 1.85rem);
  font-weight: 540;
  margin-block-start: 2.3em;
  padding-top: 1.2em;
  border-top: 1px solid var(--tb-rule);
}
.tb-content h3 { font-size: 1.2rem; font-weight: 580; margin-block-start: 1.9em; }
.tb-content a { color: var(--tb-ink); text-decoration-color: var(--tb-accent); text-decoration-thickness: 1.5px; }
.tb-content a:hover { color: var(--tb-accent); }
.tb-content ul, .tb-content ol { padding-left: 1.4em; }
.tb-content li { margin-block: .5em; }
.tb-content li::marker { color: var(--tb-accent); font-weight: 600; }

.tb-content blockquote, .wp-block-quote {
  border-left: 3px solid var(--tb-accent);
  background: var(--tb-accent-wash);
  padding: 1.2rem 1.5rem;
  font-style: normal;
  color: var(--tb-ink);
}
.wp-block-quote p { margin: 0; }

.wp-block-code, .tb-content pre {
  background: var(--tb-ink) !important;
  border: none;
  border-radius: 0;
  border-left: 3px solid var(--tb-accent);
  padding: 1.25rem 1.4rem !important;
  font-family: var(--tb-font-mono);
  font-size: .87rem;
  line-height: 1.7;
  color: #efe9df;
  overflow-x: auto;
}
.tb-content code { font-family: var(--tb-font-mono); font-size: .9em; }
.tb-content p code, .tb-content li code {
  background: var(--tb-paper-2);
  border: 1px solid var(--tb-rule);
  padding: .08em .4em;
  color: var(--tb-accent-deep);
}

/* wide comparison tables scroll inside their figure instead of
   stretching the page on phones */
.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: .95rem;
  background: var(--tb-card);
}
@media (max-width: 600px) {
  .wp-block-table table { min-width: 560px; }
}
.wp-block-table th {
  background: var(--tb-ink);
  color: var(--tb-paper);
  font-family: var(--tb-font-body);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: .8rem 1rem;
  border: 1px solid var(--tb-ink);
}
.wp-block-table td { padding: .8rem 1rem; border: 1px solid var(--tb-rule); color: var(--tb-ink); }
.wp-block-table tbody tr:nth-child(even) td { background: var(--tb-paper-2); }

.wp-block-separator {
  border: none;
  height: 1px;
  background: var(--tb-rule);
  opacity: 1;
}

/* Author box — byline card */
.tb-author-box {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  border-top: 2px solid var(--tb-ink);
  border-bottom: 1px solid var(--tb-rule);
  padding: 1.6rem 0;
  margin-top: 3rem;
  background: transparent;
}
.tb-author-box .wp-block-avatar img { border-radius: 0; filter: grayscale(1) contrast(1.05); }

/* Post navigation */
.tb-post-nav { margin-top: 2.2rem; gap: 1px; }
.tb-post-nav a {
  display: block;
  border: 1px solid var(--tb-rule);
  padding: 1rem 1.2rem;
  color: var(--tb-ink);
  text-decoration: none;
  font-size: .92rem;
  transition: all var(--tb-dur) var(--tb-ease);
}
.tb-post-nav a:hover { border-color: var(--tb-ink); background: var(--tb-ink); color: var(--tb-paper); }

/* ============================================================
   Comments — correspondence section
   ============================================================ */
.wp-block-comments { margin-top: 3.5rem; }
.wp-block-comments-title, .comments-title {
  font-size: 1.45rem;
  font-weight: 540;
  padding-top: 1.2rem;
  border-top: 2px solid var(--tb-ink);
}
.wp-block-comment-template { list-style: none; padding: 0; }
.wp-block-comment-template > li {
  border-bottom: 1px solid var(--tb-rule);
  padding: 1.5rem .2rem;
  margin: 0;
  transition: background .25s;
}
.wp-block-comment-template > li:hover { background: var(--tb-card); }
.wp-block-comment-template > li li {
  border-left: 2px solid var(--tb-accent);
  border-bottom: none;
  margin-top: 1.2rem;
  padding: .8rem 0 0 1.2rem;
  list-style: none;
}
.wp-block-avatar img { border-radius: 0; filter: grayscale(1); }
.wp-block-comment-author-name { font-weight: 700; color: var(--tb-ink); font-size: .98rem; }
.wp-block-comment-author-name a { color: var(--tb-ink); text-decoration: none; }
.wp-block-comment-date {
  font-family: var(--tb-font-mono);
  font-size: .72rem;
  color: var(--tb-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.wp-block-comment-content { font-size: .97rem; line-height: 1.7; color: var(--tb-ink-soft); }
.wp-block-comment-reply-link a, .wp-block-comment-edit-link a {
  font-family: var(--tb-font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tb-accent);
  text-decoration: none;
}

.comment-form { margin-top: 1.6rem; }
.comment-form label {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tb-ink-soft);
  margin-bottom: .45rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.wp-block-search__input {
  width: 100%;
  background: var(--tb-card);
  border: 1px solid var(--tb-rule);
  border-radius: 0;
  color: var(--tb-ink);
  font-family: var(--tb-font-body);
  /* 16px minimum — anything smaller makes iOS Safari zoom into the field */
  font-size: 1rem;
  padding: .85rem 1rem;
  transition: border-color var(--tb-dur), box-shadow var(--tb-dur);
}
.comment-form input:focus, .comment-form textarea:focus, .wp-block-search__input:focus {
  outline: none;
  border-color: var(--tb-ink);
  box-shadow: 3px 3px 0 var(--tb-accent);
}
.comment-form .form-submit .submit {
  background: var(--tb-ink);
  color: var(--tb-paper);
  border: 1px solid var(--tb-ink);
  border-radius: 0;
  font-family: var(--tb-font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1em 2.2em;
  cursor: pointer;
  transition: background var(--tb-dur), border-color var(--tb-dur);
}
.comment-form .form-submit .submit:hover { background: var(--tb-accent); border-color: var(--tb-accent); }
.comment-reply-title { font-size: 1.25rem; font-weight: 540; }
.comment-notes, .logged-in-as { font-size: .85rem; color: var(--tb-muted); }

/* ============================================================
   Search, archive, 404
   ============================================================ */
.wp-block-search__button {
  background: var(--tb-ink);
  color: var(--tb-paper);
  border: 1px solid var(--tb-ink);
  border-radius: 0;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8rem;
  cursor: pointer;
  transition: background var(--tb-dur);
}
.wp-block-search__button:hover { background: var(--tb-accent); border-color: var(--tb-accent); }
.tb-archive-header { padding: clamp(3rem, 6vw, 4.5rem) 0 1rem; }
.tb-404-code {
  font-family: var(--tb-font-display);
  font-size: clamp(6rem, 20vw, 13rem);
  font-weight: 480;
  font-style: italic;
  line-height: 1;
  color: var(--tb-accent);
}

/* ============================================================
   Footer — colophon
   ============================================================ */
.tb-footer {
  border-top: 2px solid var(--tb-ink);
  background: var(--tb-paper-2);
  margin-top: 4rem;
  position: relative;
}
.tb-footer::before {
  content: "";
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 1px;
  background: var(--tb-ink);
  opacity: .4;
}
.tb-footer-head {
  font-family: var(--tb-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tb-ink);
  margin-bottom: 1rem;
}
.tb-footer a { color: var(--tb-ink-soft); font-size: .92rem; text-decoration: none; }
.tb-footer a:hover { color: var(--tb-accent); text-decoration: underline; text-decoration-color: var(--tb-accent); }
/* "Cookie settings" — a real <button> (it opens the consent CMP) styled as a footer link */
.tb-cookie-settings {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--tb-ink-soft);
  font-size: .92rem;
  text-align: left;
}
.tb-cookie-settings:hover { color: var(--tb-accent); text-decoration: underline; text-decoration-color: var(--tb-accent); }
.tb-footer-tagline { color: var(--tb-ink-soft); font-size: .94rem; line-height: 1.7; }
.tb-footer-bottom {
  border-top: 1px solid var(--tb-rule);
  font-family: var(--tb-font-mono);
  font-size: .72rem;
  color: var(--tb-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================================================
   Motion system — restrained, purposeful
   ============================================================ */
.tb-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--tb-ease), transform .6s var(--tb-ease); }
.tb-reveal.is-in { opacity: 1; transform: none; }
/* Fail-safe: only hide reveals when JS is actually active (html.tb-js set by an
   inline head script). Without JS, or before it runs, content stays visible —
   so a script failure can never blank the page. */
html:not(.tb-js) .tb-reveal { opacity: 1 !important; transform: none !important; }
.tb-reveal-d1 { transition-delay: .06s; }
.tb-reveal-d2 { transition-delay: .12s; }
.tb-reveal-d3 { transition-delay: .18s; }
.tb-reveal-d4 { transition-delay: .24s; }
.tb-reveal-d5 { transition-delay: .3s; }
.tb-reveal-d6 { transition-delay: .36s; }

@keyframes tb-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.tb-hero .tb-edition-line { animation: tb-rise .7s var(--tb-ease) both; }
.tb-hero .tb-hero-title { animation: tb-rise .7s .1s var(--tb-ease) both; }
.tb-hero .tb-hero-sub { animation: tb-rise .7s .2s var(--tb-ease) both; }
.tb-hero .tb-hero-cta { animation: tb-rise .7s .3s var(--tb-ease) both; }
.tb-hero .tb-stats { animation: tb-rise .7s .42s var(--tb-ease) both; }

/* reading progress — thin ink line */
#tb-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--tb-accent);
  z-index: 90;
}

/* back to top */
#tb-top {
  position: fixed;
  right: 1.4rem; bottom: 1.4rem;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--tb-paper);
  border: 1px solid var(--tb-ink);
  color: var(--tb-ink);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all .3s var(--tb-ease);
  z-index: 80;
}
#tb-top.is-show { opacity: 1; pointer-events: auto; transform: none; }
#tb-top:hover { background: var(--tb-ink); color: var(--tb-paper); }

/* ============================================================
   Accessibility & motion safety
   ============================================================ */
:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 3px; }
.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--tb-ink);
  color: var(--tb-paper);
  padding: .7rem 1.2rem;
  z-index: 200;
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .tb-reveal { opacity: 1; transform: none; }
  .tb-hero-title .tb-stroke path { stroke-dashoffset: 0; animation: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 781px) {
  .tb-hero-cta { flex-direction: column; align-items: stretch; }
  .tb-hero-cta .tb-btn { text-align: center; }
  /* single-column card grid: reclaim the desktop-only right padding */
  .tb-post-grid .wp-block-post { padding-right: 0; }
  .tb-why-item { padding-right: 0; }
  /* roomier tap targets for the reading flow on touch screens */
  .tb-post-nav a { padding: 1.1rem 1rem; }
}

@media (max-width: 380px) {
  /* very narrow phones: keep the giant display sizes inside the viewport */
  .tb-hero-title { font-size: 2.15rem; }
  .tb-404-code { font-size: 5rem; }
}

/* ============================================================
   Cross-device optimization layer (phone · tablet · desktop)
   Added to harden responsiveness, touch usability and CLS.
   ============================================================ */

/* In-page anchor links must clear the sticky masthead on every screen. */
html { scroll-padding-top: 76px; }

/* Flex/grid children default to min-width:auto, which is the #1 cause of
   mystery horizontal overflow. Force them to be allowed to shrink. */
.tb-article-meta,
.wp-block-columns,
.wp-block-column,
.tb-footer-bottom > .wp-block-group { min-width: 0; }

/* Media never forces sideways scroll and reserves its box to avoid layout
   shift (CLS) while images decode — good for Core Web Vitals on mobile. */
.tb-content img,
.wp-block-image img,
.wp-block-post-featured-image img { max-width: 100%; height: auto; }
.wp-block-post-featured-image img { aspect-ratio: 1200 / 520; object-fit: cover; width: 100%; }

/* Post hero image — embedded at the top of each article's content as a
   wp:html block. Constrained to the text column (not full-bleed) and centered
   so it never looks oversized on desktop/tablet. */
figure.tb-hero {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 2.2rem;
  padding: 0 clamp(1.1rem, 4vw, 2rem);
}
figure.tb-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(24, 21, 18, 0.1);
  background: var(--tb-paper-2);
  aspect-ratio: 1200 / 520;
  object-fit: cover;
}
@media (max-width: 600px) {
  figure.tb-hero { margin-bottom: 1.6rem; }
  figure.tb-hero img { border-radius: 0; }
}

/* Long technical tokens (file paths, flags) in inline code can't overflow. */
.tb-content p code, .tb-content li code { overflow-wrap: anywhere; word-break: break-word; }

/* Comfortable, Google-recommended 44px touch targets on touch devices only,
   so desktop mouse spacing is left untouched. */
@media (pointer: coarse) {
  .tb-nav .wp-block-navigation-item__content { padding-block: .6rem; }
  .tb-footer li { margin-bottom: .85rem; }
  .tb-footer a, .tb-cookie-settings { display: inline-block; padding-block: .3rem; }
  .tb-post-nav a { padding: 1.15rem 1.1rem; }
  .wp-block-query-pagination a,
  .wp-block-query-pagination .page-numbers { padding: .65rem 1rem; }
}

/* Tablet: a touch smaller body measure reads better in the mid-range. */
@media (min-width: 601px) and (max-width: 1024px) {
  .tb-content { font-size: 1.06rem; }
}

/* Large desktop / 4K: nudge reading size up; the 1140px measure already
   keeps line length sane, so text never sprawls. */
@media (min-width: 1600px) {
  body { font-size: 1.09rem; }
  .tb-content { font-size: 1.13rem; }
}

/* Landscape phones with little vertical room: shrink the sticky header pad. */
@media (max-height: 460px) and (orientation: landscape) {
  .tb-header .alignwide { padding-top: .5rem; padding-bottom: .5rem; }
}