/* ===== Taisalia article design (all posts) — v2 magazine ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

.single-post {
  --tp-purple: #6A2C91; --tp-deep: #2A1140; --tp-bright: #C084FC;
  --tp-tint: #F7F3FA; --tp-ink: #1F1728; --tp-muted: #5C5466; --tp-line: #E5DCEE;
}

/* 1. Reading progress bar */
.single-post::before {
  content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 100000;
  background: linear-gradient(90deg, #C084FC, #6A2C91);
  transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .single-post::before { animation: tsGrow linear both; animation-timeline: scroll(root); }
}
@keyframes tsGrow { to { transform: scaleX(1); } }

/* 2. Title band (plain posts without a photo) */
.single-post .hero-section {
  background: linear-gradient(120deg, #2A1140 0%, #4A1F6B 60%, #6A2C91 100%) !important;
  padding: 80px 24px 96px !important; margin-bottom: 0 !important;
}
.single-post .hero-section .entry-header { max-width: 860px; margin: 0 auto; text-align: left; }
.single-post .hero-section .page-title {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(2rem, 4.4vw, 3.2rem) !important;
  font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.02em;
  color: #ffffff !important; margin: 0 0 20px !important; text-wrap: balance;
}
.single-post .hero-section .entry-meta,
.single-post .hero-section .entry-meta a,
.single-post .hero-section .entry-meta span,
.single-post .hero-section .entry-meta time {
  font-family: 'Inter', sans-serif !important; color: rgba(255,255,255,0.9) !important;
  font-size: 0.85rem !important; letter-spacing: 0.02em; text-transform: none;
}
.single-post .hero-section .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.single-post .hero-section .entry-meta li::after { display: none !important; }
.single-post .hero-section .entry-meta .meta-author span { font-weight: 600; }
.single-post .hero-section .entry-meta .meta-categories { order: -1; width: 100%; margin-bottom: 4px; }
.single-post .hero-section .entry-meta .meta-categories a {
  display: inline-block; background: rgba(192,132,252,0.3); border: 1px solid rgba(255,255,255,0.35);
  color: #ffffff !important; padding: 5px 12px; border-radius: 20px; text-decoration: none !important;
  font-size: 0.72rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 600;
}
.single-post .hero-section .ct-media-container-static img,
.single-post .hero-section .avatar { border: 2px solid rgba(255,255,255,0.6); border-radius: 50%; }
.single-post .hero-section .page-description { display: none !important; }

/* Photo behind the title (Type 2): taller band, photo darkens towards the title */
.single-post .hero-section[data-type="type-2"] { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; }
.single-post .hero-section[data-type="type-2"] figure::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(42,17,64,0.45) 0%, rgba(42,17,64,0.80) 50%, rgba(42,17,64,0.95) 100%);
}
.single-post .hero-section[data-type="type-2"] .entry-header { position: relative; z-index: 2; width: 100%; }

/* Reading column */
.single-post .site-main, .single-post main#main { background: #ffffff !important; }
.single-post article.post > .entry-content {
  max-width: 760px; margin: 0 auto !important; padding: 56px 24px 40px !important;
  font-family: 'Inter', sans-serif; font-size: 1.1rem; line-height: 1.85; color: #2B2433;
  counter-reset: tsSec;
}
.single-post .entry-content p { margin: 0 0 1.4em !important; }

/* 4. Opening paragraph with a drop cap */
.single-post .entry-content p.ts-lead {
  font-size: 1.3rem; line-height: 1.7; color: var(--tp-deep); font-weight: 500;
  padding-bottom: 1.2em; border-bottom: 1px solid var(--tp-line); margin-bottom: 1.6em !important;
}
.single-post .entry-content p.ts-lead::first-letter {
  float: left; font-size: 4.4rem; line-height: 0.85; font-weight: 800; color: var(--tp-purple); margin: 6px 12px 0 0;
}
.single-post .entry-content p.ts-caption { font-size: 0.85rem; color: var(--tp-muted); font-style: italic; margin-top: -0.6em !important; }

/* 5. Headings: numbered sections */
.single-post .entry-content h2, .single-post .entry-content h3, .single-post .entry-content h4 {
  font-family: 'Inter', sans-serif !important; color: var(--tp-ink) !important;
  font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -0.01em;
}
.single-post .entry-content h2 {
  counter-increment: tsSec; font-size: 1.6rem !important; margin: 64px 0 18px !important;
  display: flex; gap: 14px; align-items: baseline;
}
.single-post .entry-content h2::before {
  content: counter(tsSec, decimal-leading-zero); flex: none;
  font-size: 0.9rem; font-weight: 800; color: var(--tp-purple); background: var(--tp-tint);
  border-radius: 8px; padding: 6px 9px; letter-spacing: 0;
}
.single-post .entry-content h3 { font-size: 1.25rem !important; margin: 40px 0 12px !important; }
.single-post .entry-content h4 { font-size: 1.05rem !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tp-purple) !important; }

/* Links, lists, quotes, tables */
.single-post .entry-content a { color: var(--tp-purple) !important; text-decoration: underline; text-decoration-color: var(--tp-bright); text-underline-offset: 3px; }
.single-post .entry-content a:hover { color: var(--tp-deep) !important; }
.single-post .entry-content ul, .single-post .entry-content ol { padding-left: 1.3em; }
.single-post .entry-content li { margin: 6px 0; }
.single-post .entry-content li::marker { color: var(--tp-purple); }
.single-post .entry-content blockquote {
  margin: 32px 0 !important; padding: 22px 28px !important;
  background: var(--tp-tint) !important; border-left: 4px solid var(--tp-purple) !important;
  font-family: 'Inter', sans-serif; font-size: 1.2rem; font-weight: 600; color: var(--tp-deep) !important; font-style: normal;
}
.single-post .entry-content strong, .single-post .entry-content b { color: var(--tp-deep); }
.single-post .entry-content table { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; font-size: 0.95rem; }
.single-post .entry-content td, .single-post .entry-content th { border: 1px solid var(--tp-line); padding: 8px 10px; }

/* 6. Pictures: wider than the text */
.single-post .entry-content img { max-width: 100%; height: auto; border-radius: 8px; }
.single-post .entry-content figure { margin: 32px 0 !important; }
.single-post .entry-content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 8px; }
.single-post .entry-content figure.ts-photo { margin: 48px -80px !important; }
.single-post .entry-content figure.ts-photo img {
  display: block; width: 100%; height: auto; max-height: 600px; object-fit: cover;
  border-radius: 14px; box-shadow: 0 14px 36px rgba(42,17,64,0.16);
}
.single-post .entry-content figure.ts-photo figcaption {
  margin: 12px 80px 0; padding-left: 12px; border-left: 3px solid var(--tp-bright); text-align: left !important;
  font-size: 0.86rem; line-height: 1.5; color: var(--tp-muted); font-style: italic;
}
.single-post .entry-content .ts-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 48px -80px !important; }
.single-post .entry-content .ts-photo-grid figure.ts-photo { margin: 0 !important; }
.single-post .entry-content .ts-photo-grid figure.ts-photo figcaption { margin: 10px 0 0; }
.single-post .entry-content .ts-photo-grid figure.ts-photo img { aspect-ratio: 4 / 3; max-height: none; }
.single-post .entry-content .ts-photo-grid.ts-odd figure.ts-photo:first-child { grid-column: 1 / -1; }
.single-post .entry-content .ts-photo-grid.ts-odd figure.ts-photo:first-child img { aspect-ratio: 16 / 9; }

/* 3. "In brief" card (added per article) */
.single-post .entry-content .ts-brief {
  position: relative; z-index: 3; margin: -100px -20px 48px !important;
  background: #ffffff; border-radius: 16px; box-shadow: 0 18px 50px rgba(42,17,64,0.14);
  padding: 26px 30px; border-top: 4px solid var(--tp-purple);
}
.single-post .entry-content .ts-brief h3 { margin: 0 0 12px !important; font-size: 0.78rem !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-purple) !important; }
.single-post .entry-content .ts-brief ul { margin: 0; padding-left: 1.1em; }
.single-post .entry-content .ts-brief li { line-height: 1.55; font-size: 1rem; }

/* 7. Pull quote (added per article) */
.single-post .entry-content blockquote.ts-pull {
  position: relative; margin: 56px 0 !important; padding: 34px 36px !important;
  background: linear-gradient(135deg, #2A1140, #6A2C91) !important; color: #ffffff !important;
  border: 0 !important; border-radius: 16px; font-size: 1.45rem; line-height: 1.45; font-weight: 700;
}
.single-post .entry-content blockquote.ts-pull::before {
  content: "\201C"; position: absolute; top: -18px; left: 24px; font-size: 6rem; line-height: 1; color: #C084FC; opacity: 0.6;
}
.single-post .entry-content blockquote.ts-pull p { margin: 0 !important; color: #ffffff; }

/* 8. Cards for key points (added per article) */
.single-post .entry-content .ts-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px -60px 40px !important; }
.single-post .entry-content .ts-card {
  background: var(--tp-tint); border: 1px solid var(--tp-line); border-radius: 14px; padding: 22px;
  transition: transform .25s, box-shadow .25s;
}
.single-post .entry-content .ts-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(42,17,64,0.12); }
.single-post .entry-content .ts-card .ts-n {
  width: 36px; height: 36px; border-radius: 50%; background: var(--tp-purple); color: #fff;
  display: grid; place-items: center; font-weight: 800; margin-bottom: 12px; font-size: 1rem;
}
.single-post .entry-content .ts-card h4 { margin: 0 0 8px !important; font-size: 1.02rem !important; text-transform: none; letter-spacing: 0; color: var(--tp-ink) !important; }
.single-post .entry-content .ts-card p { font-size: 0.95rem; line-height: 1.6; margin: 0 !important; color: var(--tp-muted); }

/* References box (added per article) */
.single-post .entry-content .ts-refs { background: var(--tp-tint); border-radius: 14px; padding: 24px 28px; margin: 56px 0 0 !important; font-size: 0.92rem; line-height: 1.6; }
.single-post .entry-content .ts-refs h3 { margin: 0 0 10px !important; font-size: 0.78rem !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-purple) !important; }
.single-post .entry-content .ts-refs ul { margin: 0; }

/* 9. Gentle fade-in while scrolling (modern browsers; off for reduced motion) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .single-post article.post > .entry-content > * { animation: tsRise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
    .single-post article.post > .entry-content > .ts-brief { animation: none; }
  }
}
@keyframes tsRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* 10. Below the article: share, author box, previous/next, back to top */
.single-post .ct-share-box, .single-post .author-box, .single-post .post-navigation, .single-post .ct-related-posts { font-family: 'Inter', sans-serif; }
.single-post .author-box {
  max-width: 760px; margin-left: auto !important; margin-right: auto !important;
  border-top: 1px solid var(--tp-line); border-bottom: 1px solid var(--tp-line); border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
.single-post .author-box .author-box-name, .single-post .author-box h5 { color: var(--tp-ink) !important; font-weight: 700 !important; }
.single-post .author-box .ct-media-container img { border-radius: 50%; border: 3px solid var(--tp-bright); }
.single-post .post-navigation { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
.single-post .post-navigation a { color: var(--tp-ink) !important; font-weight: 600; }
.single-post .post-navigation .item-label { color: var(--tp-purple) !important; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; }
.single-post .post-navigation .item-title { line-height: 1.4; }
.ct-back-to-top { background: #6A2C91 !important; color: #ffffff !important; border-radius: 50% !important; box-shadow: 0 8px 22px rgba(42,17,64,0.3); }
.ct-back-to-top svg { fill: #ffffff !important; }

/* Phones and tablets */
@media (max-width: 1000px) {
  .single-post .entry-content figure.ts-photo, .single-post .entry-content .ts-photo-grid, .single-post .entry-content .ts-cards { margin-left: 0 !important; margin-right: 0 !important; }
  .single-post .entry-content figure.ts-photo figcaption { margin-left: 0; margin-right: 0; }
  .single-post .entry-content .ts-brief { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 760px) { .single-post .entry-content .ts-cards { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .single-post .hero-section { padding: 56px 20px 80px !important; }
  .single-post .hero-section[data-type="type-2"] { min-height: 380px; }
  .single-post article.post > .entry-content { padding: 36px 20px 40px !important; font-size: 1.05rem; }
  .single-post .entry-content .ts-photo-grid { gap: 10px; }
  .single-post .entry-content p.ts-lead { font-size: 1.15rem; }
  .single-post .entry-content p.ts-lead::first-letter { font-size: 3.6rem; }
  .single-post .entry-content .ts-brief { margin-top: -70px !important; padding: 22px; }
  .single-post .entry-content blockquote.ts-pull { font-size: 1.2rem; padding: 28px 24px !important; }
  .single-post .entry-content h2 { font-size: 1.35rem !important; }
}

/* Posts that already carry their own Taisalia design (e.g. Stepping Stones) */
.single-post:has(.ts-bespoke-main)::before { display: none; }
.single-post:has(.ts-bespoke-main) .hero-section { display: none !important; }
.single-post article.post > .entry-content:has(.ts-bespoke-main) { max-width: none; padding: 0 !important; font-family: inherit; font-size: inherit; counter-reset: none; }
.single-post .entry-content .ts-bespoke-main h2 { display: block; }
.single-post .entry-content .ts-bespoke-main h2::before { content: none; }
.single-post article.post > .entry-content:has(.ts-bespoke-main) > * { animation: none; }