:root {
  --tt-ai-ink: #161616;
  --tt-ai-text: #2b2b2b;
  --tt-ai-soft-text: #57534f;
  --tt-ai-muted: #706b65;
  --tt-ai-rule: #d8d0c7;
  --tt-ai-rule-soft: #ebe5df;
  --tt-ai-paper: #ffffff;
  --tt-ai-warm-paper: #fbf8f5;
  --tt-ai-blush: #f2e4df;
  --tt-ai-blush-deep: #ead6cf;
  --tt-ai-red: #bd2e22;
  --tt-ai-red-deep: #9f241b;
  --tt-ai-orange: #ff4300;
}

.tt-ai-block,
.tt-ai-timeline,
.tt-ai-context-box,
.tt-ai-faq,
.tt-ai-glossary,
.tt-ai-key-names,
.tt-ai-claim-trail,
.tt-ai-dossier,
.tt-ai-editor-note,
.tt-ai-briefing-card,
.tt-ai-pullquote {
  box-sizing: border-box;
  color: var(--tt-ai-text);
  font-family: inherit;
  margin: clamp(2.6rem, 4.5vw, 4.25rem) 0;
  max-width: 100%;
}

.tt-ai-block *,
.tt-ai-timeline *,
.tt-ai-context-box *,
.tt-ai-faq *,
.tt-ai-glossary *,
.tt-ai-key-names *,
.tt-ai-claim-trail *,
.tt-ai-dossier *,
.tt-ai-editor-note *,
.tt-ai-briefing-card *,
.tt-ai-pullquote * {
  box-sizing: border-box;
}

.tt-ai-block h2,
.tt-ai-timeline h2,
.tt-ai-faq h2,
.tt-ai-glossary h2,
.tt-ai-key-names h2,
.tt-ai-claim-trail h2,
.tt-ai-dossier h2,
.tt-ai-briefing-card h2 {
  color: var(--tt-ai-ink);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin: 0 0 clamp(1.55rem, 3vw, 2.25rem);
  text-wrap: balance;
}

.tt-ai-block h3,
.tt-ai-timeline h3,
.tt-ai-faq h3,
.tt-ai-glossary h3,
.tt-ai-key-names h3,
.tt-ai-claim-trail h3,
.tt-ai-dossier h3,
.tt-ai-briefing-card h3 {
  color: var(--tt-ai-ink);
  font-size: clamp(1.18rem, 2vw, 1.58rem);
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.16;
  margin: 0 0 0.65rem;
  text-wrap: balance;
}

.tt-ai-block p,
.tt-ai-timeline p,
.tt-ai-context-box p,
.tt-ai-faq p,
.tt-ai-glossary p,
.tt-ai-key-names p,
.tt-ai-claim-trail p,
.tt-ai-dossier p,
.tt-ai-editor-note p,
.tt-ai-briefing-card p,
.tt-ai-pullquote p {
  color: var(--tt-ai-text);
  font-size: clamp(1.05rem, 1.6vw, 1.26rem);
  font-weight: 400;
  line-height: 1.78;
  margin: 0 0 1rem;
}

.tt-ai-eyebrow,
.tt-ai-date,
.tt-ai-kicker {
  color: var(--tt-ai-red);
  display: block;
  font-size: clamp(0.78rem, 1.1vw, 0.96rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1.2;
  margin: 0 0 0.72rem;
  text-transform: uppercase;
}

/* Premium editorial timeline */
.tt-ai-timeline {
  background: transparent;
  border: 0;
  padding: 0;
}

.tt-ai-timeline-list {
  border-left: 4px solid var(--tt-ai-rule);
  display: grid;
  gap: clamp(2.05rem, 3.8vw, 3.35rem);
  padding-left: clamp(1.45rem, 3vw, 2.55rem);
}

.tt-ai-timeline-item {
  padding: 0;
  position: relative;
}

.tt-ai-timeline-item::before {
  background: var(--tt-ai-paper);
  border: 3px solid var(--tt-ai-red);
  border-radius: 999px;
  box-shadow: 0 0 0 5px var(--tt-ai-paper);
  content: '';
  height: 13px;
  left: calc((clamp(1.45rem, 3vw, 2.55rem) * -1) - 8.5px);
  position: absolute;
  top: 0.32rem;
  width: 13px;
}

.tt-ai-timeline-item p:last-child,
.tt-ai-faq-item p:last-child,
.tt-ai-context-box p:last-child,
.tt-ai-why-matters p:last-child,
.tt-ai-editor-note p:last-child,
.tt-ai-pill-card p:last-child {
  margin-bottom: 0;
}

/* Newspaper explainer / context box */
.tt-ai-context-box,
.tt-ai-why-matters,
.tt-ai-editor-note {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0)) 0 0 / 100% 100%,
    var(--tt-ai-blush);
  border: 0;
  border-top: 6px solid var(--tt-ai-red);
  color: #3a241f;
  padding: clamp(1.45rem, 3.2vw, 2.45rem) clamp(1.55rem, 4vw, 3rem);
}

.tt-ai-context-box h2,
.tt-ai-why-matters h2,
.tt-ai-editor-note h2,
.tt-ai-editor-note h3,
.tt-ai-context-box .tt-ai-eyebrow,
.tt-ai-why-matters .tt-ai-eyebrow {
  color: var(--tt-ai-red);
  font-size: clamp(0.82rem, 1.1vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.24em;
  line-height: 1.25;
  margin: 0 0 0.85rem;
  text-transform: uppercase;
}

.tt-ai-context-box p,
.tt-ai-why-matters p,
.tt-ai-editor-note p,
.tt-ai-editor-note li {
  color: #402722;
}

/* FAQ / People also ask */
.tt-ai-faq {
  background: var(--tt-ai-paper);
  border: 1px solid var(--tt-ai-rule);
  box-shadow: none;
}

.tt-ai-faq > h2 {
  padding: clamp(1.35rem, 2.4vw, 2rem) clamp(1.3rem, 3vw, 2.2rem) 0;
}

.tt-ai-faq-list {
  border-top: 1px solid var(--tt-ai-rule);
}

.tt-ai-faq-item {
  background: #fff;
  border-bottom: 1px solid var(--tt-ai-rule);
  padding: clamp(1.35rem, 3vw, 2.15rem) clamp(1.3rem, 3vw, 2.2rem);
}

.tt-ai-faq-item:nth-child(even) {
  background: #fffdfb;
}

.tt-ai-faq-item:last-child {
  border-bottom: 0;
}

.tt-ai-faq-item h3,
.tt-ai-faq-item summary {
  color: var(--tt-ai-ink);
  cursor: default;
  font-size: clamp(1.15rem, 1.9vw, 1.48rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.22;
  list-style: none;
  margin: 0 0 0.8rem;
}

.tt-ai-faq-item summary::-webkit-details-marker {
  display: none;
}

/* Glossary, key names and dossier cards */
.tt-ai-glossary,
.tt-ai-key-names,
.tt-ai-claim-trail,
.tt-ai-dossier,
.tt-ai-briefing-card {
  background: var(--tt-ai-warm-paper);
  border: 1px solid var(--tt-ai-rule);
  border-left: 6px solid var(--tt-ai-orange);
  border-radius: 0;
  padding: clamp(1.4rem, 3vw, 2.35rem);
}

.tt-ai-glossary dl,
.tt-ai-key-names dl {
  display: grid;
  gap: 1.05rem 1.5rem;
  margin: 0;
}

.tt-ai-glossary dt,
.tt-ai-key-names dt {
  color: var(--tt-ai-ink);
  font-size: clamp(1.05rem, 1.35vw, 1.18rem);
  font-weight: 900;
  line-height: 1.35;
  margin: 0;
}

.tt-ai-glossary dd,
.tt-ai-key-names dd {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  color: var(--tt-ai-soft-text);
  line-height: 1.68;
  margin: 0;
  padding-bottom: 1.05rem;
}

.tt-ai-glossary dd:last-child,
.tt-ai-key-names dd:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.tt-ai-pill-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tt-ai-pill-card {
  background: #fff;
  border: 1px solid var(--tt-ai-rule-soft);
  border-top: 4px solid var(--tt-ai-red);
  padding: 1.1rem 1.15rem;
}

.tt-ai-pill-card h3 {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
}

/* Pull quote */
.tt-ai-pullquote {
  border: 0;
  color: var(--tt-ai-ink);
  margin: clamp(2.4rem, 4.5vw, 4rem) 0;
  padding: clamp(1.2rem, 2.6vw, 1.8rem) clamp(1.15rem, 3vw, 2rem);
  position: relative;
}

.tt-ai-pullquote::before,
.tt-ai-pullquote::after {
  background: var(--tt-ai-red);
  content: '';
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  width: clamp(4rem, 11vw, 8rem);
}

.tt-ai-pullquote::before { top: 0; }
.tt-ai-pullquote::after { bottom: 0; }

.tt-ai-pullquote p {
  color: var(--tt-ai-ink);
  font-size: clamp(1.55rem, 3vw, 2.65rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.32;
  margin: 0;
}

.tt-ai-claim-trail ul,
.tt-ai-dossier ul,
.tt-ai-editor-note ul,
.tt-ai-briefing-card ul {
  margin: 0;
  padding-left: 1.25rem;
}

.tt-ai-claim-trail li,
.tt-ai-dossier li,
.tt-ai-editor-note li,
.tt-ai-briefing-card li {
  border-bottom: 1px solid rgba(0,0,0,0.07);
  line-height: 1.68;
  margin: 0;
  padding: 0.78rem 0;
}

.tt-ai-claim-trail li:first-child,
.tt-ai-dossier li:first-child,
.tt-ai-editor-note li:first-child,
.tt-ai-briefing-card li:first-child {
  padding-top: 0;
}

.tt-ai-claim-trail li:last-child,
.tt-ai-dossier li:last-child,
.tt-ai-editor-note li:last-child,
.tt-ai-briefing-card li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.tt-ai-scope-label {
  background: var(--tt-ai-ink);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  padding: 0.42rem 0.78rem;
  text-transform: uppercase;
}

/* Urdu and RTL support */
[dir="rtl"] .tt-ai-timeline-list,
.tt-ai-block[dir="rtl"] .tt-ai-timeline-list,
.rtl .tt-ai-timeline-list {
  border-left: 0;
  border-right: 4px solid var(--tt-ai-rule);
  padding-left: 0;
  padding-right: clamp(1.45rem, 3vw, 2.55rem);
}

[dir="rtl"] .tt-ai-timeline-item::before,
.tt-ai-block[dir="rtl"] .tt-ai-timeline-item::before,
.rtl .tt-ai-timeline-item::before {
  left: auto;
  right: calc((clamp(1.45rem, 3vw, 2.55rem) * -1) - 8.5px);
}

[dir="rtl"] .tt-ai-glossary,
[dir="rtl"] .tt-ai-key-names,
[dir="rtl"] .tt-ai-claim-trail,
[dir="rtl"] .tt-ai-dossier,
[dir="rtl"] .tt-ai-briefing-card,
.rtl .tt-ai-glossary,
.rtl .tt-ai-key-names,
.rtl .tt-ai-claim-trail,
.rtl .tt-ai-dossier,
.rtl .tt-ai-briefing-card {
  border-left-width: 1px;
  border-right: 6px solid var(--tt-ai-orange);
}

@media (min-width: 760px) {
  .tt-ai-glossary dl,
  .tt-ai-key-names dl {
    grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .tt-ai-block,
  .tt-ai-timeline,
  .tt-ai-context-box,
  .tt-ai-faq,
  .tt-ai-glossary,
  .tt-ai-key-names,
  .tt-ai-claim-trail,
  .tt-ai-dossier,
  .tt-ai-editor-note,
  .tt-ai-briefing-card,
  .tt-ai-pullquote {
    margin: 2.25rem 0;
  }
  .tt-ai-timeline-list {
    border-left-width: 3px;
    padding-left: 1.15rem;
  }
  .tt-ai-timeline-item::before {
    height: 11px;
    left: -1.48rem;
    width: 11px;
  }
  .tt-ai-context-box,
  .tt-ai-why-matters,
  .tt-ai-editor-note,
  .tt-ai-faq-item,
  .tt-ai-glossary,
  .tt-ai-key-names,
  .tt-ai-claim-trail,
  .tt-ai-dossier,
  .tt-ai-briefing-card {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}
