:root {
  --wp-project-post-preview-layout-width: 100%;
  --wp-project-post-preview-header-width: var(--wp-project-layout-width-wide, min(100%, 72rem));
  --wp-project-post-preview-text-width: var(--wp-project-layout-width-article, min(100%, 62rem));
  --wp-project-post-preview-media-width: var(--wp-project-layout-width-article, min(100%, 62rem));
  --wp-project-post-preview-display-font: var(--wp-project-font-family-display, "Poppins", sans-serif);
  --wp-project-post-preview-body-font: var(--wp-project-font-family-body, "Plus Jakarta Sans", sans-serif);
  --wp-project-post-preview-serif-font: var(--wp-project-font-family-serif, "Lora", serif);
  --wp-project-post-preview-title-size: clamp(2.55rem, 5.8vw, 4.5rem);
  --wp-project-post-preview-title-gap: 1.15rem;
  --wp-project-post-preview-header-gap: clamp(2.4rem, 5vw, 4rem);
  --wp-project-post-preview-meta-gap: 1.1rem;
  --wp-project-post-preview-copy-size: clamp(1.125rem, 2vw, 1.35rem);
  --wp-project-post-preview-copy-line-height: 1.9;
  --wp-project-post-preview-olive: var(--color-primary, #6b7034);
  --wp-project-post-preview-orange: var(--color-accent-solid, #f47e20);
  --wp-project-post-preview-ink: var(--color-text, #1f1a16);
  --wp-project-post-preview-muted: var(--color-muted, #52617a);
  --wp-project-post-preview-surface: var(--wp-project-color-surface-hero, var(--color-hero-surface, #fcfbf7));
}

.portal-post-preview {
  padding: 2rem;
  background: var(--wp-project-post-preview-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.portal-post-preview__frame {
  display: flex;
  flex: 1;
  justify-content: center;
  min-height: 100%;
}

.portal-post-preview__article {
  width: var(--wp-project-post-preview-layout-width);
  padding: 0 0 3rem;
}

.portal-post-preview__header {
  display: grid;
  justify-items: center;
  margin: 0 auto var(--wp-project-post-preview-header-gap);
  width: var(--wp-project-post-preview-header-width);
  max-width: 100%;
  text-align: center;
}

.portal-post-preview__eyebrow {
  margin: 0 0 1rem;
  color: var(--wp-project-post-preview-orange);
  font-family: var(--wp-project-post-preview-display-font);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-post-preview__title {
  margin: 0;
  max-width: 20ch;
  color: var(--wp-project-post-preview-olive);
  font-family: var(--wp-project-post-preview-display-font);
  font-size: var(--wp-project-post-preview-title-size);
  font-weight: 700;
  letter-spacing: var(--wp-project-letter-spacing-tight, -0.04em);
  line-height: 0.96;
}

.portal-post-preview__excerpt {
  margin: 1.2rem auto var(--wp-project-post-preview-header-gap);
  width: var(--wp-project-post-preview-text-width);
  max-width: 100%;
  color: var(--wp-project-post-preview-muted);
  font-size: var(--wp-project-post-preview-copy-size);
  line-height: var(--wp-project-post-preview-copy-line-height);
  text-align: center;
}

.portal-post-preview__meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--wp-project-post-preview-meta-gap);
  margin: 1.5rem auto 0;
  color: var(--wp-project-post-preview-muted);
  font-family: var(--wp-project-post-preview-body-font);
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  font-weight: 500;
  line-height: 1.4;
}

.portal-post-preview__meta::before {
  content: "";
  display: block;
  width: 2.35rem;
  height: 2px;
  border-radius: 999px;
  background: var(--wp-project-post-preview-orange);
  flex: 0 0 auto;
}

.portal-post-preview__meta-separator {
  color: rgba(100, 116, 139, 0.5);
  font-size: 0.82em;
}

.portal-post-preview__media {
  width: var(--wp-project-post-preview-media-width);
  max-width: 100%;
  margin: 0 auto var(--wp-project-post-preview-header-gap);
}

.portal-post-preview__media-frame {
  position: relative;
  overflow: hidden;
  border-radius: clamp(1.5rem, 3vw, 2rem);
  isolation: isolate;
}

.portal-post-preview__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  object-fit: cover;
}

.portal-post-preview__caption {
  margin: 1rem auto 0;
  max-width: 36rem;
  color: rgba(100, 116, 139, 0.9);
  font-family: var(--wp-project-post-preview-serif-font);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  font-style: italic;
  line-height: 1.7;
  text-align: center;
}

.portal-post-preview__body {
  width: var(--wp-project-post-preview-text-width);
  max-width: 100%;
  margin: 0 auto;
}

.portal-post-preview__media + .portal-post-preview__body {
  margin-top: var(--wp-project-post-preview-header-gap);
}

.portal-post-preview__excerpt + .portal-post-preview__body {
  margin-top: 0;
}

.portal-post-preview__body--editable {
  min-height: 1.25rem;
  outline: none;
  cursor: text;
}

.portal-post-editable {
  outline: none;
  cursor: text;
}

.portal-post-editable[data-placeholder]:empty::before,
.portal-post-preview__body--editable[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
}

.portal-post-preview__empty {
  color: var(--wp-project-post-preview-muted);
  font-style: italic;
}

.portal-post-preview--public {
  padding: 0;
  background: transparent;
  overflow: visible;
}

.portal-post-preview--public .portal-post-preview__frame {
  min-height: 0;
}

.portal-post-preview--public .portal-post-preview__article {
  padding-bottom: 0;
}

@media (max-width: 48rem) {
  .portal-post-preview {
    padding: 1.25rem;
  }

  .portal-post-preview--public {
    padding: 0;
  }

  .portal-post-preview__article {
    padding-bottom: 2rem;
  }

  .portal-post-preview--public .portal-post-preview__article {
    padding-bottom: 0;
  }

  .portal-post-preview__header {
    margin-bottom: 2.35rem;
  }

  .portal-post-preview__title {
    max-width: 15ch;
  }

  .portal-post-preview__meta {
    gap: 0.6rem;
  }
}