/* Personalitopia Performance: combined stylesheet. Sources are listed inline. */

/* personalitopia-theme-blocks <- /wp-content/themes/twentytwentyfour-child/assets/css/theme-blocks.css */
/**
 * Personalitopia Theme Blocks & Shared Layout System v2.0
 * Theme: twentytwentyfour-child
 * Handles layout breakouts, breadcrumbs, recommendations, assessment discovery deck, and interactive carousels.
 */


  /* ==========================================================================
     Global Scroll Reveal Animations
     ========================================================================== */
/* Reveal Scroll Animation */
.pt-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--duration-enter) var(--ease-standard), transform var(--duration-enter) var(--ease-standard);
}

.pt-reveal.pt-in {
  opacity: 1;
  transform: none;
}

/* Hero Book Block Styling */

  /* ==========================================================================
     Alignwide (.alignwide) & Breakout Layout Rules
     ========================================================================== */
/* ==========================================================================
   Alignwide (.alignwide) Breakout Rules
   ========================================================================== */

/* Larger devices (> 720px): centered symmetrically at max-width 720px (50px wider on left & right than 620px content) */
@media (min-width: 721px) {

  .alignwide,
  .wp-block-group.alignwide,
  .wp-block-columns.alignwide,
  .wp-block-cover.alignwide,
  .wp-block-quote.alignwide,
  blockquote.alignwide,
  div.alignwide {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

/* Smaller devices (<= 720px): full screen alignfull breakout */
@media (max-width: 720px) {

  .alignwide,
  .wp-block-group.alignwide,
  .wp-block-columns.alignwide,
  .wp-block-cover.alignwide,
  .wp-block-quote.alignwide,
  blockquote.alignwide,
  div.alignwide {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    max-width: 100vw;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}


  /* ==========================================================================
     Global Section Alignment & Margin Reset
     ========================================================================== */
/* ==========================================================================
   Personalitopia Global Section Alignment & Margin Reset
   ========================================================================== */
:where(.wp-site-blocks)>.alignfull,
.entry-content>.alignfull,
.wp-block-post-content>.alignfull,
.wp-block-post-content>section.alignfull,
.wp-block-post-content>div.alignfull {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Standard Paragraph Spacing across all articles and pages */
.entry-content p,
.wp-block-post-content p,
.wp-site-blocks p {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--20, 12px);
  line-height: 1.7;
}

.entry-content p:last-child,
.wp-block-post-content p:last-child {
  margin-bottom: 0;
}

     Visual Breadcrumbs & Smart Recommendations
     ========================================================================== */
/* ==========================================================================
   Visual Breadcrumbs & Smart Recommendations Styles
   ========================================================================== */

/* Breadcrumbs Styling */
.pt-breadcrumbs {
  padding: var(--wp--preset--spacing--20) 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--contrast-2);
}

.pt-breadcrumbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pt-breadcrumbs-item {
  display: flex;
  align-items: center;
  font-family: var(--wp--preset--font-family--body);
  font-size: 14px;
}

.pt-breadcrumbs-item a {
  color: var(--wp--preset--color--accent-2);
  /* terracotta */
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease-standard), text-decoration var(--duration-normal) var(--ease-standard);
}

.pt-breadcrumbs-item a:hover {
  color: var(--wp--preset--color--contrast);
  text-decoration: underline;
}

.pt-breadcrumbs-separator {
  margin-left: 8px;
  color: var(--wp--preset--color--contrast-3);
  user-select: none;
  font-size: 11px;
}

.pt-breadcrumbs-current {
  color: var(--wp--preset--color--contrast-2);
  font-weight: 500;
}

/* Recommendations Section - Expanded width on larger devices */
.pt-recommendations-section,
.pt-recommendations-section.alignwide,
.wp-block-group .pt-recommendations-section.alignwide {
  margin: var(--wp--preset--spacing--40) auto;
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid rgba(44, 31, 21, 0.08);
  width: 100%;
  max-width: 1180px;
  box-sizing: border-box;
}

.wp-block-personalitopia-recommendations {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.pt-recommendations-title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--contrast);
  margin-bottom: 24px;
}

.pt-author-intro-container {
  margin-bottom: 24px;
}

.pt-recommendations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  width: 100%;
  box-sizing: border-box;
}

/* Crowdfunding Edge-to-Edge Banner with Centered Card */
.pt-crowdfunding-section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.pt-crowdfunding-card {
  max-width: 1040px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Recommendation Card - Premium styling */
.pt-recommendation-card {
  background-color: #ffffff;
  border: 1px solid rgba(44, 31, 21, 0.05);
  border-top: 4px solid var(--wp--preset--color--contrast-2);
  /* Fallback */
  border-radius: var(--wp--custom--radius--card, 12px);
  padding: 28px 24px 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: transform var(--duration-slow) var(--ease-spring),
    box-shadow var(--duration-slow) var(--ease-spring),
    border-color var(--duration-slow) var(--ease-standard);
  box-shadow: 0 4px 12px rgba(44, 31, 21, 0.015);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Accent top border colors based on post tags */
.pt-recommendation-card:has(.pt-tag-blush) {
  border-top: 4px solid var(--terracotta);
}

.pt-recommendation-card:has(.pt-tag-sage) {
  border-top: 4px solid var(--sage);
}

.pt-recommendation-card:has(.pt-tag-slate) {
  border-top: 4px solid var(--slate);
}

.pt-recommendation-card:hover {
  transform: translateY(-5px);
  border-color: rgba(44, 31, 21, 0.1);
  box-shadow: 0 16px 36px rgba(44, 31, 21, 0.06);
}

.pt-recommendation-card h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 19px;
  color: var(--wp--preset--color--contrast);
  margin: 0;
  line-height: 1.25;
  font-weight: 500;
  transition: color var(--duration-normal) var(--ease-standard);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-recommendation-card:hover h3 {
  color: var(--terracotta);
}

.pt-rec-excerpt {
  font-family: var(--wp--preset--font-family--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--wp--preset--color--contrast-2);
  margin: 0;
  flex-grow: 1;
  /* Multiline Clamp */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-rec-cta {
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--terracotta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: auto;
  transition: transform var(--duration-normal) var(--ease-standard);
  display: inline-flex;
  align-items: center;
}

.pt-recommendation-card:hover .pt-rec-cta {
  transform: translateX(3px);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .pt-recommendations-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pt-recommendation-card {
    padding: 24px 20px 20px;
  }
}


  /* ==========================================================================
     Interactive Carousel & Gutenberg Helper Blocks
     ========================================================================== */
.pt-carousel-wrapper {
  margin: 32px 0;
  background: var(--wp--preset--color--paper, #FBF5E8);
  border: 1px solid rgba(44, 31, 21, 0.08);
  border-radius: var(--wp--custom--radius--card, 12px);
  padding: 32px;
  position: relative;
}

.pt-carousel-inner {
  position: relative;
  min-height: 140px;
}

.pt-carousel-slide {
  display: none;
  opacity: 0;
  transition: opacity var(--duration-enter) var(--ease-standard);
}

.pt-carousel-slide.active {
  display: block;
  opacity: 1;
}

.pt-carousel-card {
  text-align: center;
}

.pt-carousel-card-title {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 22px;
  color: #B8674A;
  margin: 0 0 12px 0;
}

.pt-carousel-card-content p {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2C1F15;
  margin: 0 0 16px 0;
}

.pt-carousel-card-author {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: #8AA68E;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pt-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  border-top: 1px solid rgba(44, 31, 21, 0.06);
  padding-top: 16px;
}

.pt-carousel-arrow {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #B8674A;
  padding: 4px 12px;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.pt-carousel-arrow:hover {
  transform: scale(1.15);
}

.pt-carousel-dots {
  display: flex;
  gap: 8px;
}

.pt-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(44, 31, 21, 0.15);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--duration-normal) var(--ease-standard);
}

.pt-carousel-dot.active {
  background: #B8674A;
}

/* C. 1, 2, 3 Reasons Block */
.pt-three-reasons {
  display: flex;
  gap: 24px;
  margin: 32px 0;
}

.pt-reason-card {
  flex: 1;
  background: var(--wp--preset--color--paper, #FBF5E8);
  border: 1px solid rgba(44, 31, 21, 0.06);
  border-radius: var(--wp--custom--radius--card, 12px);
  padding: 28px 24px;
  text-align: center;
  transition: transform var(--duration-slow) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-standard);
}

.pt-reason-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(44, 31, 21, 0.04);
}

.pt-reason-number {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px auto;
}

.pt-reason-num-svg {
  width: 100%;
  height: 100%;
}

.pt-reason-num-text {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 54px;
  fill: none;
  stroke: #C9A563;
  stroke-width: 2.5px;
}

.pt-reason-card:hover .pt-reason-num-text {
  stroke: #B8674A;
}

.pt-reason-title {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 18px;
  color: #2C1F15;
  margin: 0 0 10px 0;
}

.pt-reason-desc {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(44, 31, 21, 0.7);
  margin: 0;
}

@media (max-width: 768px) {
  .pt-three-reasons {
    flex-direction: column;
    gap: 16px;
  }
}

/* D. Journey Builder Blocks */
.pt-journey-wrapper {
  margin: 40px 0;
}

/* Hero's Journey Connected node Map style */
.pt-journey-path-container {
  position: relative;
  padding: 24px 0;
}

.pt-journey-line-svg-wrap {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 20px;
  z-index: 1;
}

.pt-journey-line-svg {
  width: 100%;
  height: 100%;
}

.pt-journey-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.pt-journey-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}

.pt-journey-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--wp--preset--color--paper, #FBF5E8);
  border: 3px solid #B8674A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: transform var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
}

.pt-journey-step:hover .pt-journey-node {
  transform: scale(1.15);
  background-color: #B8674A;
}

.pt-journey-node-num {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-weight: 600;
  font-size: 13px;
  color: #B8674A;
}

.pt-journey-step:hover .pt-journey-node-num {
  color: var(--wp--preset--color--paper, #FBF5E8);
}

.pt-journey-content {
  max-width: 180px;
}

.pt-journey-title {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 16px;
  color: #2C1F15;
  margin: 0 0 6px 0;
}

.pt-journey-desc {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(44, 31, 21, 0.7);
  margin: 0;
}

@media (max-width: 768px) {
  .pt-journey-line-svg-wrap {
    left: 30px;
    top: 0;
    width: 10px;
    height: 100%;
  }

  .pt-journey-line-svg {
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
  }

  .pt-journey-steps {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }

  .pt-journey-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }

  .pt-journey-node {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .pt-journey-content {
    max-width: 100%;
  }
}

/* Maslow Staircase steps Going Up/Down style */
.pt-staircase-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 24px 0;
}

.pt-staircase-step {
  max-width: 580px;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.pt-staircase-step:hover {
  transform: translateX(4px);
}

.pt-staircase-block {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--wp--preset--color--paper, #FBF5E8);
  border: 1px solid rgba(44, 31, 21, 0.08);
  border-radius: var(--wp--custom--radius--btn, 8px);
  padding: 14px 20px;
}

.pt-staircase-num {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 24px;
  color: var(--wp--preset--color--paper, #FBF5E8);
  width: 42px;
  height: 42px;
  border-radius: var(--wp--custom--radius--btn, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pt-step-color-0 .pt-staircase-num {
  background-color: #B8674A;
}

.pt-step-color-1 .pt-staircase-num {
  background-color: #8AA68E;
}

.pt-step-color-2 .pt-staircase-num {
  background-color: #7B91B8;
}

.pt-step-color-3 .pt-staircase-num {
  background-color: #C9A563;
}

.pt-step-color-4 .pt-staircase-num {
  background-color: #E8B09A;
}

.pt-staircase-info {
  flex-grow: 1;
}

.pt-staircase-title {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 16px;
  color: #2C1F15;
  margin: 0 0 4px 0;
}

.pt-staircase-desc {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(44, 31, 21, 0.7);
  margin: 0;
}

/* Maslow Needs Pyramid style */
.pt-pyramid-container {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  align-items: center;
  margin: 32px auto;
  max-width: 600px;
}

.pt-pyramid-layer {
  background: var(--wp--preset--color--paper, #FBF5E8);
  border: 1px solid rgba(44, 31, 21, 0.08);
  border-radius: var(--wp--custom--radius--btn, 8px);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.pt-pyramid-layer:hover {
  transform: scale(1.02);
}

.pt-pyramid-content {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  gap: 20px;
}

.pt-pyramid-num {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-weight: 600;
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--paper, #FBF5E8);
  flex-shrink: 0;
}

.pt-pyramid-color-0 .pt-pyramid-num {
  background-color: #B8674A;
}

.pt-pyramid-color-1 .pt-pyramid-num {
  background-color: #8AA68E;
}

.pt-pyramid-color-2 .pt-pyramid-num {
  background-color: #7B91B8;
}

.pt-pyramid-color-3 .pt-pyramid-num {
  background-color: #C9A563;
}

.pt-pyramid-color-4 .pt-pyramid-num {
  background-color: #E8B09A;
}

.pt-pyramid-info {
  text-align: left;
}

.pt-pyramid-title {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 16px;
  color: #2C1F15;
  margin: 0 0 4px 0;
}

.pt-pyramid-desc {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(44, 31, 21, 0.75);
  margin: 0;
}

/* E. Parchment Scroll Block */
.pt-scroll-wrapper {
  margin: 40px 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  border-radius: var(--wp--custom--radius--sm, 4px);
  overflow: hidden;
}

.pt-scroll-top,
.pt-scroll-bottom {
  height: 24px;
  overflow: hidden;
}

.pt-scroll-roll {
  width: 100%;
  height: 100%;
}

.pt-scroll-body {
  background-color: #FAF2DF;
  background-image: radial-gradient(rgba(44, 31, 21, 0.01) 12%, transparent 12%);
  background-size: 16px 16px;
  padding: 32px 48px;
  border-left: 2px solid #e4d7bf;
  border-right: 2px solid #e4d7bf;
  text-align: center;
}

.pt-scroll-title {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  color: #2C1F15;
  margin: 0 0 20px 0;
}

.pt-scroll-text p {
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.65;
  color: #3d2f23;
  margin-bottom: 16px;
}

/* F. Mascot Chat Simulator Bubble Block */
.pt-mascot-chat {
  margin: 40px 0;
  background: var(--wp--preset--color--paper, #FBF5E8);
  border: 1px solid rgba(44, 31, 21, 0.08);
  border-radius: var(--wp--custom--radius--card, 12px);
  padding: 24px;
}

.pt-chat-profiles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(44, 31, 21, 0.06);
  padding-bottom: 16px;
}

.pt-chat-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pt-chat-avatar-thumb {
  width: 48px;
  height: 48px;
  background: #ffffff;
  border: 1px solid rgba(44, 31, 21, 0.08);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-chat-avatar-thumb svg {
  width: 100%;
  height: 100%;
}

.pt-chat-profile-name {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 15px;
  color: #2C1F15;
}

.pt-chat-vs {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: #B8674A;
}

.pt-chat-history {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pt-chat-message-row {
  display: flex;
  gap: 14px;
  max-width: 85%;
  align-items: flex-end;
}

.pt-chat-msg-left {
  align-self: flex-start;
}

.pt-chat-msg-right {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.pt-chat-bubble-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(44, 31, 21, 0.06);
  flex-shrink: 0;
}

.pt-chat-bubble-avatar svg {
  width: 100%;
  height: 100%;
}

.pt-chat-bubble-wrap {
  display: flex;
  flex-direction: column;
}

.pt-chat-msg-left .pt-chat-bubble-wrap {
  align-items: flex-start;
}

.pt-chat-msg-right .pt-chat-bubble-wrap {
  align-items: flex-end;
}

.pt-chat-sender-label {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: rgba(44, 31, 21, 0.5);
  margin-bottom: 4px;
}

.pt-chat-bubble {
  background: #ffffff;
  border: 1px solid rgba(44, 31, 21, 0.08);
  border-radius: var(--wp--custom--radius--card, 12px);
  padding: 10px 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.pt-chat-msg-left .pt-chat-bubble {
  border-bottom-left-radius: 2px;
  background-color: var(--wp--preset--color--paper, #FBF5E8);
}

.pt-chat-msg-right .pt-chat-bubble {
  border-bottom-right-radius: 2px;
  background-color: #FAF0EC;
  border-color: rgba(184, 103, 74, 0.12);
}

.pt-chat-bubble p {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 14px;
  margin: 0;
  color: #2C1F15;
  line-height: 1.45;
}

.pt-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-weight: 600;
  font-size: 11px;
  color: #ffffff;
}

.pt-char-1 {
  background-color: #B8674A;
}

.pt-char-2 {
  background-color: #8AA68E;
}

/* Global Viewport Mobile Overflow Fixes */
html,
body,
.wp-site-blocks {
  max-width: 100%;
  overflow-x: hidden;
}

/* Remove Gutenberg default block-gap margins on site blocks, template parts, post content, and headers/footers */
:where(.wp-site-blocks)>*,
:where(.wp-site-blocks)>header,
:where(.wp-site-blocks)>footer,
:where(.wp-site-blocks)>main,
:where(.wp-site-blocks)>#wp--skip-link--target,
:where(.wp-site-blocks)>.wp-block-template-part,
:where(.wp-site-blocks)>.entry-content,
:where(.wp-site-blocks)>.wp-block-post-content,
:where(.wp-site-blocks)>.wp-block-post-content.has-global-padding,
:where(.wp-site-blocks)>.wp-block-post-content-is-layout-constrained,
:where(.wp-site-blocks)>footer.wp-block-template-part,
:where(.wp-site-blocks)>header.wp-block-template-part,
.wp-site-blocks>*,
.wp-site-blocks>.wp-block-template-part,
.wp-site-blocks>.entry-content,
.wp-site-blocks>.wp-block-post-content,
.wp-block-template-part:where(.wp-site-blocks)>*,
header.wp-block-template-part,
footer.wp-block-template-part,
.wp-block-template-part,
.entry-content.wp-block-post-content,
.wp-block-post-content.is-layout-constrained,
#wp--skip-link--target {
  margin-block-start: 0;
  margin-top: 0;
  margin-block-end: 0;
  margin-bottom: 0;
}

.pt-header-navbar {
  box-sizing: border-box;
  max-width: 100%;
}

.pt-hero {
  box-sizing: border-box;
  max-width: 100%;
}

/* Heading Style Variations */
h1.is-style-pt-heading-terracotta,
h2.is-style-pt-heading-terracotta,
h3.is-style-pt-heading-terracotta,
h4.is-style-pt-heading-terracotta,
h5.is-style-pt-heading-terracotta,
h6.is-style-pt-heading-terracotta,
.is-style-pt-heading-terracotta {
  color: var(--terracotta);
}

h1.is-style-pt-heading-serif-italic,
h2.is-style-pt-heading-serif-italic,
h3.is-style-pt-heading-serif-italic,
h4.is-style-pt-heading-serif-italic,
h5.is-style-pt-heading-serif-italic,
h6.is-style-pt-heading-serif-italic,
.is-style-pt-heading-serif-italic {
  font-family: var(--wp--preset--font-family--heading, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-weight: 400;
}

h1.is-style-pt-heading-line-under,
h2.is-style-pt-heading-line-under,
h3.is-style-pt-heading-line-under,
h4.is-style-pt-heading-line-under,
h5.is-style-pt-heading-line-under,
h6.is-style-pt-heading-line-under,
.is-style-pt-heading-line-under {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 24px;
}

h1.is-style-pt-heading-line-under::after,
h2.is-style-pt-heading-line-under::after,
h3.is-style-pt-heading-line-under::after,
h4.is-style-pt-heading-line-under::after,
h5.is-style-pt-heading-line-under::after,
h6.is-style-pt-heading-line-under::after,
.is-style-pt-heading-line-under::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--terracotta);
  border-radius: var(--wp--custom--radius--xs, 2px);
}

.has-text-align-center.is-style-pt-heading-line-under::after,
.has-text-align-center .is-style-pt-heading-line-under::after {
  left: 50%;
  transform: translateX(-50%);
}

.has-text-align-right.is-style-pt-heading-line-under::after,
.has-text-align-right .is-style-pt-heading-line-under::after {
  left: auto;
  right: 0;
}


  /* ==========================================================================
     Assessment Discovery Deck (4-Layer Parchment Edition)
     ========================================================================== */
/* ==========================================================================
   Assessment Discovery Deck (4-Layer Parchment Edition)
   ========================================================================== */

.pt-deck-surface-card {
  background-color: #FAF6EC;
  border: 1px solid rgba(44, 31, 21, 0.12);
  border-radius: var(--wp--custom--radius--card, 12px);
  padding: 0;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  perspective: 1200px;
  overflow: hidden;
  box-sizing: border-box;
}

.pt-deck-surface-card.alignwide,
.alignwide.pt-deck-surface-card {
  width: 100%;
}

/* Tab Navigation Strip using native Gutenberg core/buttons */
.pt-deck-nav.wp-block-buttons,
.pt-deck-nav {
  display: flex;
  background-color: #F4EAD5;
  border: none;
  border-bottom: 1px solid rgba(44, 31, 21, 0.12);
  border-radius: 0;
  padding: 3px;
  gap: 3px;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pt-deck-nav.wp-block-buttons::-webkit-scrollbar,
.pt-deck-nav::-webkit-scrollbar {
  display: none;
}

.pt-deck-nav .pt-deck-tab.wp-block-button,
.pt-deck-nav .pt-deck-tab {
  flex: 1;
  margin: 0;
  min-width: 110px;
}

.pt-deck-nav .pt-deck-tab .wp-block-button__link,
.pt-deck-nav .pt-deck-tab button,
.pt-deck-nav button.pt-deck-tab {
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--wp--custom--radius--btn, 8px);
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 14px;
  font-weight: 400;
  color: #575551;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), font-weight var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
  user-select: none;
  box-sizing: border-box;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-deck-nav .pt-deck-tab:hover .wp-block-button__link,
.pt-deck-nav .pt-deck-tab:hover button {
  color: #2C1F15;
}

.pt-deck-nav .pt-deck-tab.is-active .wp-block-button__link,
.pt-deck-nav .pt-deck-tab.is-active button,
.pt-deck-nav button.pt-deck-tab.is-active {
  background-color: #FAF6EC;
  color: #2C1F15;
  font-weight: 500;
  border-color: rgba(44, 31, 21, 0.12);
}

.pt-deck-nav .pt-deck-tab.is-flagship-tab .wp-block-button__link,
.pt-deck-nav .pt-deck-tab.is-flagship-tab button {
  color: #B8674A;
}

.pt-deck-nav .pt-deck-tab.is-flagship-tab.is-active .wp-block-button__link,
.pt-deck-nav .pt-deck-tab.is-flagship-tab.is-active button {
  color: #7A311B;
  background-color: #FAF6EC;
}

/* 3D Parchment Pane Wrapper */
.pt-deck-pane-wrapper {
  position: relative;
  transform-style: preserve-3d;
  padding: 24px 28px;
  box-sizing: border-box;
}

.pt-deck-content-pane {
  display: none;
  transform-origin: top center;
  backface-visibility: hidden;
  box-sizing: border-box;
}

.pt-deck-content-pane.is-active {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
  animation: ptParchmentFlip var(--duration-enter) var(--ease-out) forwards;
}

@keyframes ptParchmentFlip {
  0% {
    opacity: 0;
    transform: rotateX(-8deg) translateY(-6px) scale(0.99);
    filter: brightness(0.97);
  }

  60% {
    opacity: 0.9;
    transform: rotateX(1.5deg) translateY(0) scale(1.002);
    filter: brightness(1.01);
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg) translateY(0) scale(1);
    filter: brightness(1);
  }
}

.pt-deck-info-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pt-deck-pane-title {
  font-family: var(--wp--preset--font-family--heading, 'Fraunces', Georgia, serif);
  font-size: 24px;
  font-weight: 500;
  color: #2C1F15;
  line-height: 1.25;
  margin: 0;
}

.pt-deck-quote {
  font-family: var(--wp--preset--font-family--heading, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: 15px;
  color: #B8674A;
  border-left: 2px solid #B8674A;
  padding-left: 12px;
  margin: 2px 0 6px 0;
  line-height: 1.4;
}

.pt-deck-body {
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 16px;
  font-weight: 400;
  color: #575551;
  line-height: 1.55;
  margin: 0;
}

.pt-deck-actions-side {
  background-color: #F4EAD5;
  border: 1px solid rgba(44, 31, 21, 0.12);
  border-radius: var(--wp--custom--radius--card, 12px);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  box-sizing: border-box;
}

.pt-deck-actions-side .wp-block-buttons {
  width: 100%;
  margin: 0;
  gap: 10px;
}

.pt-deck-btn-primary {
  width: 100%;
  margin: 0;
}

.pt-deck-btn-primary a.wp-element-button,
.pt-deck-btn-primary a.wp-block-button__link {
  width: 100%;
  background-color: #B8674A;
  color: #FAF6EC;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: var(--wp--custom--radius--btn, 8px);
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
  box-sizing: border-box;
}

.pt-deck-btn-primary a.wp-element-button:hover,
.pt-deck-btn-primary a.wp-block-button__link:hover {
  background-color: var(--wp--preset--color--terracotta-hover, #9E5338);
  color: #FAF6EC;
}

.pt-deck-btn-sec {
  width: 100%;
  margin: 0;
  text-align: center;
}

.pt-deck-btn-sec a.wp-element-button,
.pt-deck-btn-sec a.wp-block-button__link,
.pt-deck-btn-sec a {
  background: transparent;
  border: none;
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 13.5px;
  font-style: italic;
  color: #B8674A;
  text-decoration: none;
  font-weight: 400;
  padding: 4px 8px;
  display: inline-block;
  text-align: center;
  transition: color var(--duration-fast) var(--ease-standard);
  width: 100%;
}

.pt-deck-btn-sec a.wp-element-button:hover,
.pt-deck-btn-sec a.wp-block-button__link:hover,
.pt-deck-btn-sec a:hover {
  color: var(--wp--preset--color--terracotta-hover, #9E5338);
  text-decoration: underline;
}

.pt-deck-btn-sec-wrapper {
  margin: 0;
  text-align: center;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .pt-deck-content-pane.is-active {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 600px) {
  .pt-deck-surface-card {
    border-radius: var(--wp--custom--radius--btn, 8px);
    padding: 0;
    margin: 0 auto;
  }

  .pt-deck-pane-wrapper {
    padding: 20px 16px;
  }
}


  /* ==========================================================================
     Gutenberg Block Editor Canvas Adaptation
     ========================================================================== */
/* ==========================================================================
   Gutenberg Block Editor Canvas Adaptation
   Renders all 4 layers stacked with clear headers so the user can easily edit every card inline.
   ========================================================================== */
.editor-styles-wrapper .pt-deck-pane-wrapper,
.block-editor-block-list__layout .pt-deck-pane-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.editor-styles-wrapper .pt-deck-content-pane,
.block-editor-block-list__layout .pt-deck-content-pane {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
  background-color: #FAF6EC;
  border: 1px dashed rgba(184, 103, 74, 0.35);
  border-radius: var(--wp--custom--radius--card, 12px);
  padding: 20px 24px;
  position: relative;
  opacity: 1;
  visibility: visible;
  box-sizing: border-box;
}

.editor-styles-wrapper .pt-deck-content-pane.pt-pane-identity::before,
.block-editor-block-list__layout .pt-deck-content-pane.pt-pane-identity::before {
  content: "✦ Layer 1: Identity (16 Personalities)";
  display: block;
  grid-column: 1 / -1;
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8C5A40;
  border-bottom: 1px dashed rgba(44, 31, 21, 0.12);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.editor-styles-wrapper .pt-deck-content-pane.pt-pane-thought::before,
.block-editor-block-list__layout .pt-deck-content-pane.pt-pane-thought::before {
  content: "✦ Layer 2: Thought (Cognitive Functions)";
  display: block;
  grid-column: 1 / -1;
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8C5A40;
  border-bottom: 1px dashed rgba(44, 31, 21, 0.12);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.editor-styles-wrapper .pt-deck-content-pane.pt-pane-emotion::before,
.block-editor-block-list__layout .pt-deck-content-pane.pt-pane-emotion::before {
  content: "✦ Layer 3: Emotion (Enneagram)";
  display: block;
  grid-column: 1 / -1;
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8C5A40;
  border-bottom: 1px dashed rgba(44, 31, 21, 0.12);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.editor-styles-wrapper .pt-deck-content-pane.pt-pane-values::before,
.block-editor-block-list__layout .pt-deck-content-pane.pt-pane-values::before {
  content: "★ Layer 4: Values (Flagship Assessment)";
  display: block;
  grid-column: 1 / -1;
  font-family: var(--wp--preset--font-family--ui, 'Manrope', sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #B8674A;
  border-bottom: 1px dashed rgba(184, 103, 74, 0.25);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

/* ==========================================================================
   Personalitopia Ambient Wind-Swirl Leaf Animations
   ========================================================================== */
#pt-wind-leaf-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  contain: paint;
}

.wind-leaf-gust {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes gustPathArc {
  0% {
    transform: translate3d(-180px, 0, 0) rotate(0deg) rotateY(0deg) scale(0.9);
    opacity: 0;
  }
  10% { opacity: 0.12; }
  40% {
    transform: translate3d(45vw, 120px, 0) rotate(220deg) rotateY(180deg) scale(1.15);
    opacity: 0.14;
  }
  70% {
    transform: translate3d(80vw, -30px, 0) rotate(480deg) rotateX(160deg) scale(1.05);
    opacity: 0.12;
  }
  90% { opacity: 0.07; }
  100% {
    transform: translate3d(115vw, 100px, 0) rotate(760deg) rotateY(360deg) scale(0.85);
    opacity: 0;
  }
}

@keyframes gustPathSpiral {
  0% {
    transform: translate3d(-180px, 0, 0) rotate(45deg) scale(0.85);
    opacity: 0;
  }
  12% { opacity: 0.13; }
  35% {
    transform: translate3d(35vw, -70px, 0) rotate(260deg) rotateX(140deg) scale(1.1);
    opacity: 0.15;
  }
  65% {
    transform: translate3d(70vw, 70px, 0) rotate(520deg) rotateY(200deg) scale(1);
    opacity: 0.12;
  }
  88% { opacity: 0.06; }
  100% {
    transform: translate3d(115vw, -30px, 0) rotate(840deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes gustPathFlutter {
  0% {
    transform: translate3d(-180px, 0, 0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% { opacity: 0.11; }
  30% {
    transform: translate3d(30vw, 40px, 0) rotate(140deg) rotateY(90deg) scale(1.05);
    opacity: 0.13;
  }
  60% {
    transform: translate3d(65vw, 15px, 0) rotate(320deg) rotateX(110deg) scale(0.95);
    opacity: 0.13;
  }
  85% { opacity: 0.07; }
  100% {
    transform: translate3d(115vw, 80px, 0) rotate(600deg) scale(0.9);
    opacity: 0;
  }
}

/* ==========================================================================
   Visible Pine Forest Background Horizon Layer (Top-Swaying Natural Breeze)
   ========================================================================== */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: -10px;
  width: calc(100% + 20px);
  height: 180px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.055;
  mix-blend-mode: multiply;
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 600px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' fill='%232C1F15'%3E%3Cpath d='M30,180 L30,120 L15,120 L30,90 L20,90 L30,60 L25,60 L30,30 L35,60 L30,60 L40,90 L30,90 L45,120 L30,120 L30,180 Z M90,180 L90,130 L70,130 L90,95 L78,95 L90,65 L84,65 L90,40 L96,65 L90,65 L102,95 L90,95 L110,130 L90,130 L90,180 Z M160,180 L160,110 L140,110 L160,80 L148,80 L160,50 L154,50 L160,20 L166,50 L160,50 L172,80 L160,80 L180,110 L160,110 L160,180 Z M230,180 L230,135 L215,135 L230,105 L220,105 L230,75 L225,75 L230,45 L235,75 L230,75 L240,105 L230,105 L245,135 L230,135 L230,180 Z M310,180 L310,115 L290,115 L310,85 L298,85 L310,55 L304,55 L310,25 L316,55 L310,55 L322,85 L310,85 L330,115 L310,115 L310,180 Z M380,180 L380,140 L365,140 L380,110 L370,110 L380,80 L375,80 L380,50 L385,80 L380,80 L390,110 L380,110 L395,140 L380,140 L380,180 Z M450,180 L450,120 L430,120 L450,90 L438,90 L450,60 L444,60 L450,30 L456,60 L450,60 L462,90 L450,90 L470,120 L450,120 L450,180 Z M530,180 L530,130 L515,130 L530,100 L520,100 L530,70 L525,70 L530,40 L535,70 L530,70 L540,100 L530,100 L545,130 L530,130 L530,180 Z'/%3E%3C/svg%3E");
  transform-origin: 50% 100%;
  animation: pineForestWindRustle 14s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  will-change: transform;
}

@keyframes pineForestWindRustle {
  0% {
    transform: rotate(0deg) skewX(0deg);
  }
  35% {
    transform: rotate(0.8deg) skewX(1.1deg);
  }
  75% {
    transform: rotate(-0.6deg) skewX(-0.8deg);
  }
  100% {
    transform: rotate(0.3deg) skewX(0.4deg);
  }
}

/* ==========================================================================
   Stacking Context: Sections at z-index auto, Standalone Cards at z-index 10
   ========================================================================== */
.wp-block-group.is-style-parchment-canvas,
.wp-block-group.is-style-sage-hills,
.wp-block-group.is-style-ink-forest,
.wp-block-group.is-style-slate-sky,
.wp-block-group.is-style-dawn-ridge {
  position: relative;
  z-index: auto;
}

/* Standalone Opaque Cards that sit above and hide the trees & trail */
.wp-block-group.is-style-bullet-journal,
.wp-block-group.is-style-watermark-pine,
.site-card-container,
.pt-prompt-card,
.pt-deck-container,
.deck-card-surface,
.pt-deck-surface-card,
.pt-assessment-deck-container,
.wsf-pt-card,
.wsf-pt-runner-card,
.pt-water-pause-card,
.wsf-pt-question-container,
#wsf-pt-result-root,
#wsf-pt-runner-root,
#wsf-pt-result-container {
  position: relative;
  z-index: 10;
}

.wp-block-group.is-style-bullet-journal,
.wp-block-group.is-style-watermark-pine,
.site-card-container,
.pt-prompt-card,
.pt-deck-container,
.deck-card-surface,
.wsf-pt-card,
.wsf-pt-runner-card,
.pt-water-pause-card,
.wsf-pt-question-container {
  background-color: var(--wp--preset--color--surface, #FFFFFF);
}






/* Reduced motion: skip the parchment flip, show the pane at rest */
@media (prefers-reduced-motion: reduce) {
  .pt-deck-content-pane.is-active {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* personalitopia-archive-mag <- /wp-content/themes/twentytwentyfour-child/assets/css/archive-mag.css */
/**
 * Personalitopia Component Styles: Magazine / Newspaper Archive Styles
 * Theme: twentytwentyfour-child
 */


/* ==========================================================================
   Visual Breadcrumbs & Smart Recommendations Styles
   ========================================================================== */

/* Breadcrumbs Styling */
.pt-breadcrumbs {
    padding: var(--wp--preset--spacing--20) 0;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--contrast-2);
}

.pt-breadcrumbs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pt-breadcrumbs-item {
    display: flex;
    align-items: center;
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
}

.pt-breadcrumbs-item a {
    color: var(--wp--preset--color--accent-2); /* terracotta */
    text-decoration: none;
    transition: color var(--duration-normal) var(--ease-standard), text-decoration var(--duration-normal) var(--ease-standard);
}

.pt-breadcrumbs-item a:hover {
    color: var(--wp--preset--color--contrast);
    text-decoration: underline;
}

.pt-breadcrumbs-separator {
    margin-left: 8px;
    color: var(--wp--preset--color--contrast-3);
    user-select: none;
    font-size: 11px;
}

.pt-breadcrumbs-current {
    color: var(--wp--preset--color--contrast-2);
    font-weight: 500;
}

/* Recommendations Section */
.pt-author-intro-container {
    margin-bottom: 24px;
}

.pt-recommendations-section {
    margin: var(--wp--preset--spacing--40) 0;
    padding-top: var(--wp--preset--spacing--30);
    border-top: 1px solid rgba(44, 31, 21, 0.08);
}

.pt-recommendations-title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--contrast);
    margin-bottom: 24px;
}

.pt-recommendations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

/* Recommendation Card - Premium styling */
.pt-recommendation-card {
    background-color: #ffffff;
    border: 1px solid rgba(44, 31, 21, 0.05);
    border-top: 4px solid var(--wp--preset--color--contrast-2); /* Fallback */
    border-radius: var(--wp--custom--radius--card, 12px);
    padding: 28px 24px 24px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    transition: transform var(--duration-slow) var(--ease-spring), 
                box-shadow var(--duration-slow) var(--ease-spring), 
                border-color var(--duration-slow) var(--ease-standard);
    box-shadow: 0 4px 12px rgba(44, 31, 21, 0.015);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Accent top border colors based on post tags */
.pt-recommendation-card:has(.pt-tag-blush) {
    border-top: 4px solid var(--terracotta);
}
.pt-recommendation-card:has(.pt-tag-sage) {
    border-top: 4px solid var(--sage);
}
.pt-recommendation-card:has(.pt-tag-slate) {
    border-top: 4px solid var(--slate);
}

.pt-recommendation-card:hover {
    transform: translateY(-5px);
    border-color: rgba(44, 31, 21, 0.1);
    box-shadow: 0 16px 36px rgba(44, 31, 21, 0.06);
}

.pt-recommendation-card h3 {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 19px;
    color: var(--wp--preset--color--contrast);
    margin: 0;
    line-height: 1.25;
    font-weight: 500;
    transition: color var(--duration-normal) var(--ease-standard);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pt-recommendation-card:hover h3 {
    color: var(--terracotta);
}

.pt-rec-excerpt {
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--wp--preset--color--contrast-2);
    margin: 0;
    flex-grow: 1;
    /* Multiline Clamp */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pt-rec-cta {
    font-family: var(--wp--preset--font-family--body);
    font-size: 12px;
    font-weight: 600;
    color: var(--terracotta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: auto;
    transition: transform var(--duration-normal) var(--ease-standard);
    display: inline-flex;
    align-items: center;
}

.pt-recommendation-card:hover .pt-rec-cta {
    transform: translateX(3px);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .pt-recommendations-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pt-recommendation-card {
        padding: 24px 20px 20px;
    }
}

/* ==========================================================================
   Premium Magazine/Newspaper Archive Styles
   ========================================================================== */

/* Magazine Query Grid adjustments */
.pt-magazine-query .wp-block-post-template {
    gap: 32px 24px;
}

.pt-more-arrow a {
    font-family: var(--ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--terracotta);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform var(--duration-normal) var(--ease-standard);
    display: inline-block;
}

.pt-more-arrow a:hover {
    transform: translateX(3px);
}

@media (min-width: 769px) {
    /* Style the first post as a prominent featured article */
    .pt-magazine-query .wp-block-post-template > li:first-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: 36px;
        align-items: start;
        border-bottom: 1px solid rgba(44, 31, 21, 0.08);
        padding-bottom: 32px;
        margin-bottom: 16px;
    }

    .pt-magazine-query .wp-block-post-template > li:first-child .wp-block-post-featured-image {
        margin-bottom: 0;
        height: 100%;
        object-fit: cover;
        min-width: 0;
    }
    
    .pt-magazine-query .wp-block-post-template > li:first-child .wp-block-post-featured-image img {
        height: 100%;
        max-height: 380px;
        object-fit: cover;
        width: 100%;
    }

    .pt-magazine-query .wp-block-post-template > li:first-child > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        min-width: 0;
    }

    .pt-magazine-query .wp-block-post-template > li:first-child h2,
    .pt-magazine-query .wp-block-post-template > li:first-child h3 {
        font-size: 32px;
        line-height: 1.15;
        margin-top: 12px;
        margin-bottom: 16px;
    }
    
    .pt-magazine-query .wp-block-post-template > li:first-child .wp-block-post-excerpt {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 20px;
    }
}

/* ==========================================================================
/* ==========================================================================
   INFJ Personality Page Styles
   ========================================================================== */

/* Page layout styling */
.pt-infj-page-container {
    background-color: var(--wp--preset--color--base); /* Warm Ivory */
    color: var(--wp--preset--color--contrast); /* Warm Ink */
    padding: 60px 20px;
    max-width: 100%;
    margin: 0 auto;
}

/* Header/Hero grid */
.pt-infj-hero {
    background: linear-gradient(135deg, #F4EAD5 0%, #C9A563 100%); /* Mediterranean Gradient */
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    padding: 80px max(32px, calc((100vw - 1120px) / 2));
    box-sizing: border-box;
    border-radius: 0;
    margin-top: -60px;
    margin-bottom: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.pt-infj-hero-content {
    flex: 1;
    max-width: 60%;
}

.pt-infj-hero-image {
    flex: 0 0 35%;
    max-width: 350px;
    display: flex;
    justify-content: center;
}

.pt-infj-hero-image img {
    width: 100%;
    height: auto;
    border-radius: var(--wp--custom--radius--card, 12px);
    transition: transform var(--duration-slow) var(--ease-standard);
}

.pt-infj-hero-image img:hover {
    transform: scale(1.02);
}

.pt-infj-hero-eyebrow {
    font-family: var(--ui);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 12px;
}

.pt-infj-hero h1 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 48px;
    line-height: 1.1;
    margin: 0 0 16px 0;
    color: var(--ink);
}

.pt-infj-hero-sub {
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink-70);
    margin-bottom: 24px;
}

/* Pills / Tags */
.pt-infj-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pt-infj-pill {
    font-family: var(--ui);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--wp--custom--radius--xl, 16px);
    text-transform: capitalize;
}

.pt-infj-pill.introverted {
    background-color: var(--wp--preset--color--accent); /* Blush Rose */
    color: var(--wp--preset--color--deep-coral);
}

.pt-infj-pill.intuitive {
    background-color: var(--wp--preset--color--accent-4); /* Sage */
    color: var(--wp--preset--color--deep-green);
}

.pt-infj-pill.feeling {
    background-color: var(--wp--preset--color--accent-5); /* Slate Blue */
    color: var(--wp--preset--color--deep-navy);
}

.pt-infj-pill.judging {
    background-color: var(--wp--preset--color--accent-3); /* Warm Gold */
    color: var(--wp--preset--color--contrast);
}

/* Article Styling */
.pt-infj-body {
    max-width: 680px;
    margin: 0 auto;
    font-family: var(--body);
}

.pt-infj-body h2 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 32px;
    color: var(--wp--preset--color--contrast);
    margin-top: 48px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(44, 31, 21, 0.1);
    padding-bottom: 8px;
}

.pt-infj-body h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 22px;
    color: var(--wp--preset--color--accent-2); /* Terracotta */
    margin-top: 32px;
    margin-bottom: 12px;
}

.pt-infj-body p {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 24px;
    color: var(--ink-70);
}

.pt-infj-quote {
    background: linear-gradient(to right, rgba(234, 230, 219, 0.4), rgba(234, 230, 219, 0.2));
    border-left: 6px solid var(--wp--preset--color--accent-2); /* Terracotta */
    border-radius: var(--wp--custom--radius--sm, 4px);
    padding: 48px 56px;
    margin: 60px auto;
    max-width: 1000px;
    position: relative;
    box-sizing: border-box;
}

.pt-infj-quote::before {
    content: "“";
    position: absolute;
    top: -10px;
    left: 15px;
    font-size: 120px;
    font-family: var(--display);
    color: rgba(184, 103, 74, 0.08); /* light terracotta */
    line-height: 1;
    pointer-events: none;
}

.pt-infj-quote p {
    font-family: var(--display);
    font-style: italic;
    font-size: 24px;
    line-height: 1.6;
    margin: 0;
    color: var(--wp--preset--color--contrast);
    position: relative;
    z-index: 1;
}

/* Worksheet customization */
.pt-infj-body .personalitopia-ge-worksheet {
    margin-top: 60px;
    background-color: var(--wp--preset--color--base-2);
    border: 1px solid rgba(44, 31, 21, 0.1);
    border-radius: var(--wp--custom--radius--card, 12px);
    padding: 36px;
}

.pt-infj-body .personalitopia-ge-worksheet-header h1 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 28px;
    color: var(--wp--preset--color--contrast);
}

.pt-infj-body .personalitopia-ge-worksheet-form button {
    border-radius: var(--wp--custom--radius--btn, 8px);
    font-family: var(--ui);
    font-weight: 500;
}

/* Comments section styling */
.pt-infj-comments-container {
    max-width: 680px;
    margin: 60px auto 0 auto;
    padding-top: 40px;
    border-top: 1.5px solid rgba(44, 31, 21, 0.08);
}

.pt-infj-comments-container h2.wp-block-comments-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: 28px;
    color: var(--wp--preset--color--contrast);
    margin-bottom: 24px;
}

.pt-infj-comments-container .comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pt-infj-comments-container .comment {
    background-color: var(--wp--preset--color--base-2);
    border: 1px solid rgba(44, 31, 21, 0.08);
    border-radius: var(--wp--custom--radius--card, 12px);
    padding: 24px;
    margin-bottom: 24px;
}

.pt-infj-comments-container .comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--ink-70);
}

.pt-infj-comments-container .comment-author {
    font-family: var(--ui);
    font-weight: 600;
    color: var(--wp--preset--color--contrast);
}

.pt-infj-comments-container .comment-content p {
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
    color: var(--wp--preset--color--contrast);
}

/* Comment Form */
.pt-infj-comments-container .comment-respond {
    background-color: var(--wp--preset--color--base-2);
    border: 1px solid rgba(44, 31, 21, 0.08);
    border-radius: var(--wp--custom--radius--card, 12px);
    padding: 32px;
    margin-top: 40px;
}

.pt-infj-comments-container .comment-reply-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: 22px;
    color: var(--wp--preset--color--contrast);
    margin-bottom: 16px;
}

.pt-infj-comments-container .comment-form textarea {
    width: 100%;
    height: 120px;
    padding: 12px;
    border: 1.5px solid #e6e3dc;
    border-radius: var(--wp--custom--radius--btn, 8px);
    font-size: 14px;
    margin-bottom: 16px;
    box-sizing: border-box;
    background-color: #ffffff;
}

.pt-infj-comments-container .comment-form input[type="text"],
.pt-infj-comments-container .comment-form input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e6e3dc;
    border-radius: var(--wp--custom--radius--btn, 8px);
    font-size: 14px;
    margin-bottom: 16px;
    box-sizing: border-box;
    background-color: #ffffff;
}

.pt-infj-comments-container .comment-form .submit {
    background-color: var(--wp--preset--color--accent-2); /* Terracotta */
    color: var(--wp--preset--color--base); /* Warm Ivory */
    border: none;
    border-radius: var(--wp--custom--radius--btn, 8px);
    padding: 12px 24px;
    font-family: var(--ui);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-normal) var(--ease-standard);
}

.pt-infj-comments-container .comment-form .submit:hover {
    background-color: var(--wp--preset--color--contrast);
}

@media (max-width: 768px) {
    .pt-infj-hero {
        flex-direction: column;
        padding: 48px 24px;
        border-radius: 0;
    }
    
    .pt-infj-hero-content {
        max-width: 100%;
        text-align: center;
    }
    
    .pt-infj-hero-image {
        max-width: 100%;
        width: 100%;
    }
    
    .pt-infj-pills {
        justify-content: center;
    }
    
    .pt-infj-quote {
        padding: 36px 28px;
        margin: 40px 16px;
    }

    .pt-infj-quote::before {
        font-size: 80px;
        top: -5px;
        left: 10px;
    }
}

/* ------------------------------------------------------------- */

@layer components {
  /* Generous Desktop Layout Container */
  .wp-block-post-content .alignwide,
  .entry-content .alignwide,
  .pt-spotlight-section,
  .pt-posts-grid-wrapper,
  .pt-crowdfunding-section {
    max-width: 1240px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  /* Spotlight Hero Card for Latest Post */
  .pt-spotlight-section {
    margin-top: var(--wp--preset--spacing--40, 36px);
    margin-bottom: var(--wp--preset--spacing--50, 48px);
  }

  .pt-spotlight-card {
    background-color: var(--wp--preset--color--surface, #FFFFFF);
    border: 1px solid rgba(44, 31, 21, 0.08);
    border-radius: var(--wp--custom--radius--xl, 16px);
    padding: 44px 48px;
    box-shadow: 0 10px 30px rgba(44, 31, 21, 0.04);
    box-sizing: border-box;
    transition: transform var(--duration-slow) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-standard);
  }

  .pt-spotlight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(44, 31, 21, 0.07);
  }

  .pt-spotlight-columns {
    align-items: center;
    gap: 48px;
  }

  @media (max-width: 820px) {
    .pt-spotlight-card {
      padding: 24px 20px;
    }
    .pt-spotlight-columns {
      gap: 24px;
    }
  }

  .pt-spotlight-badge {
    font-family: var(--wp--preset--font-family--ui, sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--wp--preset--color--terracotta, #B8674A);
    margin: 0 0 8px 0;
  }

  .pt-spotlight-title a {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces', serif);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    color: var(--wp--preset--color--ink, #2C1F15);
    text-decoration: none;
    line-height: 1.25;
    transition: color var(--duration-normal) var(--ease-standard);
  }

  .pt-spotlight-title a:hover {
    color: var(--wp--preset--color--terracotta, #B8674A);
  }

  .pt-spotlight-excerpt {
    font-family: var(--wp--preset--font-family--body, 'Crimson Pro', serif);
    font-size: 18px;
    line-height: 1.65;
    color: rgba(44, 31, 21, 0.8);
    margin-top: 14px;
    margin-bottom: 24px;
  }

  /* Universal Featured Image Framing */
  .wp-block-post-featured-image,
  figure.wp-block-post-featured-image,
  .pt-grid-card-img,
  .pt-posts-grid-container .wp-block-post-featured-image,
  .pt-cat-query .wp-block-post-featured-image,
  .pt-spotlight-img-col .wp-block-post-featured-image {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--card, 12px);
    box-sizing: border-box;
    margin: 0 0 16px 0;
    padding: 0;
  }

  .pt-grid-card-inner .wp-block-post-featured-image,
  .pt-posts-grid-container .wp-block-post-featured-image,
  .pt-cat-query .wp-block-post-featured-image {
    height: 220px;
    background-color: rgba(44, 31, 21, 0.04);
  }

  .wp-block-post-featured-image a,
  figure.wp-block-post-featured-image a,
  .pt-grid-card-img a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--card, 12px);
  }

  .wp-block-post-featured-image img,
  figure.wp-block-post-featured-image img,
  .pt-grid-card-img img,
  .pt-posts-grid-container .wp-block-post-featured-image img,
  .pt-cat-query .wp-block-post-featured-image img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 220px;
    max-height: 220px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--wp--custom--radius--card, 12px);
    display: block;
  }

  .pt-spotlight-img-col .wp-block-post-featured-image,
  .pt-spotlight-img-col .wp-block-post-featured-image img {
    height: 100%;
    min-height: 280px;
    max-height: 380px;
    object-fit: cover;
    border-radius: var(--wp--custom--radius--card, 12px);
  }

  /* Spotlight Author & Footer Meta */
  .pt-spotlight-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    margin-top: 20px;
    border-top: 1px solid rgba(44, 31, 21, 0.08);
    flex-wrap: wrap;
    gap: 16px;
  }

  .pt-spotlight-author-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }

  .pt-spotlight-author-name {
    font-family: var(--wp--preset--font-family--ui, sans-serif);
    font-size: 14px;
    color: var(--wp--preset--color--ink, #2C1F15);
    margin: 0;
  }

  .pt-spotlight-date,
  .pt-spotlight-date time {
    font-family: var(--wp--preset--font-family--ui, sans-serif);
    font-size: 13.5px;
    color: var(--wp--preset--color--sage, #8AA68E);
    margin: 0;
  }

  /* Buttonized Read More links */
  .wp-block-read-more,
  a.wp-block-read-more,
  .pt-read-more-link,
  a.pt-read-more-link,
  .pt-more-arrow,
  a.pt-more-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    background-color: var(--wp--preset--color--blush-tint, #F7DDD3);
    color: var(--wp--preset--color--terracotta, #B8674A);
    border-radius: var(--wp--custom--radius--btn, 8px);
    font-family: var(--wp--preset--font-family--ui, sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
    white-space: nowrap;
  }

  .wp-block-read-more:hover,
  a.wp-block-read-more:hover,
  .pt-read-more-link:hover,
  a.pt-read-more-link:hover,
  .pt-more-arrow:hover,
  a.pt-more-arrow:hover {
    background-color: var(--wp--preset--color--terracotta, #B8674A);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184, 103, 74, 0.2);
  }

  /* Chronological 2-Column Grid of Posts */
  .pt-posts-grid-wrapper {
    margin-top: var(--wp--preset--spacing--40, 36px);
    margin-bottom: var(--wp--preset--spacing--50, 48px);
  }

  .pt-posts-grid-container,
  .wp-block-post-template.is-layout-grid,
  ul.pt-posts-grid-container,
  ul.wp-block-post-template.is-layout-grid {
    gap: 36px 32px;
    margin-bottom: 32px;
  }

  .pt-grid-card-inner {
    background-color: transparent;
    border: none;
    border-radius: var(--wp--custom--radius--card, 12px);
    overflow: hidden;
    height: 100%;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: transform var(--duration-normal) var(--ease-standard);
  }

  .pt-grid-card-inner:hover {
    transform: translateY(-2px);
  }

  .pt-grid-card-body {
    padding: 0;
    gap: 6px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;
  }

  .pt-grid-card-title {
    margin: 0 0 4px 0;
  }

  .pt-grid-card-title a {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces', serif);
    font-size: 21px;
    font-weight: 500;
    color: var(--wp--preset--color--ink, #2C1F15);
    text-decoration: none;
    line-height: 1.3;
    transition: color var(--duration-normal) var(--ease-standard);
  }

  .pt-grid-card-title a:hover {
    color: var(--wp--preset--color--terracotta, #B8674A);
  }

  .pt-grid-card-excerpt {
    font-family: var(--wp--preset--font-family--body, 'Crimson Pro', serif);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(44, 31, 21, 0.8);
    margin: 0 0 8px 0;
    flex-grow: 1;
  }

  .pt-grid-card-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(44, 31, 21, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .pt-grid-card-date,
  .pt-grid-card-date time {
    font-family: var(--wp--preset--font-family--ui, sans-serif);
    font-size: 13px;
    color: var(--wp--preset--color--sage, #8AA68E);
    margin: 0;
  }

  /* Category Hub Headers & Feeds */
  .pt-category-hubs-container {
    margin-top: var(--wp--preset--spacing--50, 48px);
    margin-bottom: var(--wp--preset--spacing--50, 48px);
  }

  .pt-category-section {
    margin-bottom: 40px;
  }

  .pt-category-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(44, 31, 21, 0.1);
    padding-bottom: 12px;
  }

  .pt-category-eyebrow {
    font-family: var(--wp--preset--font-family--ui, sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--terracotta, #B8674A);
    display: block;
    margin-bottom: 4px;
  }

  .pt-category-section-title {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces', serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--wp--preset--color--ink, #2C1F15);
    margin: 0;
  }

  .pt-category-more-link a {
    font-family: var(--wp--preset--font-family--ui, sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--wp--preset--color--terracotta, #B8674A);
    text-decoration: none;
  }

  .pt-category-more-link a:hover {
    color: var(--wp--preset--color--terracotta-hover, #9E5338);
  }

  /* The Age of Self-Realization Book Philosophy Card */
  .pt-crowdfunding-section {
    margin-top: var(--wp--preset--spacing--50, 48px);
    margin-bottom: var(--wp--preset--spacing--50, 48px);
  }

  .pt-crowdfunding-card {
    background-color: var(--wp--preset--color--surface, #FFFFFF);
    border: 1px solid rgba(44, 31, 21, 0.08);
    border-left: 5px solid var(--wp--preset--color--terracotta, #B8674A);
    border-radius: var(--wp--custom--radius--xl, 16px);
    padding: 44px 48px;
    box-shadow: 0 10px 30px rgba(44, 31, 21, 0.04);
    box-sizing: border-box;
  }

  @media (max-width: 768px) {
    .pt-crowdfunding-card {
      padding: 28px 24px;
    }
  }

  .pt-book-eyebrow {
    font-family: var(--wp--preset--font-family--ui, sans-serif);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--terracotta, #B8674A);
    margin: 0 0 6px 0;
    display: inline-block;
  }

  .pt-crowdfunding-title {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces', serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--wp--preset--color--ink, #2C1F15);
    margin: 6px 0 12px 0;
    line-height: 1.25;
  }

  .pt-crowdfunding-text {
    font-family: var(--wp--preset--font-family--body, 'Crimson Pro', serif);
    font-size: 17.5px;
    line-height: 1.65;
    color: rgba(44, 31, 21, 0.8);
    margin: 0 0 24px 0;
    max-width: 68ch;
  }

  .pt-crowdfunding-actions {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .pt-crowdfunding-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--wp--preset--color--terracotta, #B8674A);
    color: #FFFFFF;
    font-family: var(--wp--preset--font-family--ui, sans-serif);
    font-size: 14.5px;
    font-weight: 600;
    padding: 12px 26px;
    border-radius: var(--wp--custom--radius--btn, 8px);
    text-decoration: none;
    transition: background-color var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
    box-shadow: 0 2px 8px rgba(184, 103, 74, 0.2);
    margin: 0;
  }

  .pt-crowdfunding-btn:hover {
    background-color: var(--wp--preset--color--terracotta-hover, #9E5338);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(184, 103, 74, 0.3);
    color: #FFFFFF;
  }

  /* Modern Button Pagination with Gaps */
  .pt-pagination-container,
  .wp-block-query-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 36px;
    margin-bottom: 24px;
    padding: 12px 0;
  }

  .wp-block-query-pagination a,
  .wp-block-query-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--wp--custom--radius--btn, 8px);
    background-color: var(--wp--preset--color--surface, #FFFFFF);
    border: 1px solid rgba(44, 31, 21, 0.15);
    box-shadow: 0 2px 6px rgba(44, 31, 21, 0.04);
    font-family: var(--wp--preset--font-family--ui, sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--wp--preset--color--ink, #2C1F15);
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  }

  .wp-block-query-pagination a:hover {
    background-color: var(--wp--preset--color--blush-tint, #F7DDD3);
    border-color: var(--wp--preset--color--terracotta, #B8674A);
    color: var(--wp--preset--color--terracotta, #B8674A);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184, 103, 74, 0.18);
  }

  .wp-block-query-pagination .page-numbers.current {
    background-color: var(--wp--preset--color--terracotta, #B8674A);
    border-color: var(--wp--preset--color--terracotta, #B8674A);
    color: #FFFFFF;
    box-shadow: 0 3px 10px rgba(184, 103, 74, 0.25);
  }

  .wp-block-query-pagination .page-numbers.dots {
    background: transparent;
    border: none;
    box-shadow: none;
    min-width: 24px;
    color: rgba(44, 31, 21, 0.5);
  }
}


/* ==========================================================================
   Spacing cascade fixes
   The @layer components block above is layered, and an unlayered declaration
   always beats a layered one regardless of specificity. WordPress prints its
   global styles unlayered, so these three currently win over the layer and
   flatten the magazine layout:
     :root :where(.is-layout-flex){gap: 0rem}       -> every flex gap collapses
     :root :where(p){margin-bottom: ...}            -> paragraph resets ignored
     .has-global-padding :where(...){padding-*: 0}  -> card side padding dropped
   Restating just the spacing here, unlayered and prefixed with :root so the
   selectors land at (0,2,0), puts the intended values back in front.
   ========================================================================== */

/* Side padding on wide containers that also carry .has-global-padding. */
:root .pt-spotlight-section,
:root .pt-posts-grid-wrapper {
  padding-left: 24px;
  padding-right: 24px;
}

:root .pt-spotlight-card {
  padding: 44px 48px;
}

@media (max-width: 820px) {
  :root .pt-spotlight-card {
    padding: 24px 20px;
  }
}

/* Flex gaps, all collapsed to 0 by the global blockGap. */
:root .pt-spotlight-columns {
  gap: 48px;
}

@media (max-width: 820px) {
  :root .pt-spotlight-columns {
    gap: 24px;
  }
}

:root .pt-spotlight-footer {
  gap: 16px;
}

:root .pt-spotlight-author-meta {
  gap: 14px;
}

:root .pt-grid-card-body {
  gap: 6px;
}

:root .pt-grid-card-footer {
  gap: 16px;
}

:root .pt-pagination-container,
:root .wp-block-query-pagination {
  gap: 10px;
}

/* Paragraph resets, all overridden by the global <p> bottom margin. */
:root .pt-spotlight-badge {
  margin: 0 0 8px;
}

:root .pt-spotlight-author-name {
  margin: 0;
}

:root .pt-crowdfunding-text {
  margin: 0 0 24px;
}

/* Excerpts render as a <div> wrapping a <p>; the wrapper owns the spacing. */
:root .pt-spotlight-excerpt p,
:root .pt-grid-card-excerpt p {
  margin: 0;
}

/* Hold the featured image at the 16:9 shape the artwork is authored in and
   centre it in the column. Letting it fill the card height instead turns a
   1376x768 image into a narrow vertical slice and crops the subject away,
   which is what happened to the Why I Love cover. */
:root .pt-spotlight-img-col {
  display: flex;
  align-items: center;
}

:root .pt-spotlight-img-col .wp-block-post-featured-image {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
  margin: 0;
}

:root .pt-spotlight-img-col .wp-block-post-featured-image a,
:root .pt-spotlight-img-col .wp-block-post-featured-image picture {
  display: block;
  height: 100%;
}

:root .pt-spotlight-img-col .wp-block-post-featured-image img {
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
}