/* Article reading system, aligned with the editorial homepage. */
@font-face {
  font-family: "Gentium Home";
  src: url("fonts/gentium-basic-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body.single-post {
  --derm-paper: #faf9f6;
  --derm-porcelain: oklch(91.5% 0.018 104);
  --derm-wash: oklch(86% 0.022 118);
  --derm-ink: #222b28;
  --derm-noir: oklch(15% 0.035 205);
  --derm-graphite: oklch(30% 0.026 205);
  --derm-muted: #555e59;
  --derm-line: #d8d9d2;
  --derm-coral: oklch(63% 0.17 35);
  --derm-aubergine: oklch(31% 0.09 194);
  --derm-burgundy: oklch(30% 0.08 158);
  --derm-gold: oklch(72% 0.12 78);
  --derm-ochre: oklch(62% 0.13 72);
  --derm-teal: oklch(50% 0.11 205);
  --derm-sage: oklch(64% 0.08 145);
  --derm-max: 1200px;
  --derm-article-wide: 960px;
  --derm-article-measure: 45rem; /* Approximately 72ch at the 18px body size. */
  --derm-article-display: "Gentium Home", Georgia, serif;
  background: var(--derm-paper);
}

.derm-article,
.derm-article * {
  box-sizing: border-box;
  letter-spacing: 0;
  min-width: 0;
}

body.single-post .jet-sub-mega-menu,
body.single-post .elementor-location-header,
body.single-post .elementor-location-footer,
body.single-post .elementor-popup-modal,
body.single-post .dialog-widget,
body.single-post .grecaptcha-badge {
  display: none !important;
}

body.single-post #secondary,
body.single-post .sidebar,
body.single-post .widget-area,
body.single-post aside[class*="sidebar"],
body.single-post aside[id*="sidebar"] {
  display: none !important;
}

body.single-post .site-main,
body.single-post .site-content,
body.single-post .content-area {
  max-width: none !important;
  width: 100% !important;
}

.derm-article {
  --article-accent: var(--derm-teal);
  --article-accent-strong: var(--derm-burgundy);
  --article-surface: var(--derm-paper);
  --article-hero-ink: var(--derm-ink);
  --article-hero-muted: var(--derm-muted);
  --article-hero-line: var(--derm-line);
  background: var(--derm-paper);
  color: var(--derm-ink);
  font-family: "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.55;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  text-rendering: geometricPrecision;
}

.derm-article a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.derm-article img {
  display: block;
  height: auto;
  max-width: 100%;
}

.derm-article__sr-only {
  block-size: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.derm-article__shell {
  margin-inline: auto;
  width: min(calc(100% - 48px), var(--derm-max));
}

.derm-article__hero {
  background: var(--article-surface);
  border-block-end: 1px solid var(--derm-line);
  padding-block: 52px;
}

.derm-article__hero-grid {
  align-items: center;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
}

.derm-article__copy {
  grid-column: 1;
}

.derm-article__media {
  grid-column: 2;
  margin: 0;
}

.derm-article__title {
  color: var(--derm-ink);
  font-family: var(--derm-article-display);
  font-size: 3.8rem;
  font-weight: 400;
  hyphens: none;
  line-height: 1.06;
  margin: 0 0 24px;
  max-width: 22ch;
  overflow-wrap: break-word;
  text-transform: none;
  text-wrap: balance;
  word-break: normal;
}

.derm-article--title-medium .derm-article__title {
  font-size: 3.5rem;
}

.derm-article--title-long .derm-article__title {
  font-size: 3.1rem;
}

.derm-article__dek {
  color: var(--derm-muted);
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 62ch;
  text-wrap: pretty;
}

/* Reading actions belong to the compact article opening. */
.derm-article__actions,
.derm-article__share-status {
  display: none;
}

.derm-article__meta {
  color: var(--derm-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  gap: 8px 20px;
  line-height: 1.45;
  margin: 0 0 12px;
}

.derm-article-byline {
  border-block-start: 1px solid var(--derm-line);
  color: var(--derm-muted);
  display: grid;
  font-size: 0.875rem;
  gap: 6px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  padding-block-start: 14px;
}

.derm-article-byline p {
  margin: 0;
}

.derm-article-byline a {
  color: var(--article-accent-strong);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.derm-article-byline a:hover {
  color: var(--derm-ink);
  text-decoration-thickness: 2px;
}

.derm-article-byline a:focus-visible {
  outline: 2px solid var(--article-accent);
  outline-offset: 3px;
}

.derm-article-byline__review {
  color: var(--derm-ink);
}

.derm-article__hero-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* Professional photographs retain the complete scene and its natural proportion. */
.derm-article__hero-image--professional {
  aspect-ratio: auto;
  display: block;
  height: auto;
  max-height: 620px;
  object-fit: contain;
}

.derm-article__media figcaption {
  color: var(--derm-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  gap: 4px 12px;
  line-height: 1.4;
  padding-block-start: 10px;
}

.derm-article__media figcaption span {
  color: inherit;
}

.derm-article__content-grid {
  max-width: var(--derm-article-wide);
  padding-block: 36px 52px;
}

.derm-article__reading-nav {
  align-items: center;
  border-block-start: 1px solid var(--derm-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin: 32px auto 0;
  max-width: var(--derm-article-measure);
  padding-block-start: 16px;
}

.derm-article .derm-article__reading-link {
  align-items: center;
  color: #203f35;
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 500;
  gap: 8px;
  line-height: 1.5;
  min-height: 44px;
  padding-block: 8px;
  text-decoration: none;
}

.derm-article__reading-link svg {
  flex: 0 0 18px;
}

.derm-article .derm-article__reading-link:hover {
  text-decoration: underline;
}

.derm-article__reading-link:focus-visible {
  outline: 2px solid #203f35;
  outline-offset: 3px;
}

.derm-article__toc {
  border-block: 1px solid var(--derm-line);
  color: var(--derm-ink);
  font-size: 1.125rem;
  margin: 0 auto 36px;
  max-width: var(--derm-article-measure);
}

.derm-article__toc summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  font-weight: 600;
  gap: 12px;
  line-height: 1.5;
  list-style: none;
  min-height: 48px;
  padding-block: 12px;
}

.derm-article__toc summary::-webkit-details-marker {
  display: none;
}

.derm-article__toc-title {
  flex: 1;
}

.derm-article__toc-count {
  color: var(--derm-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}

.derm-article__toc-chevron {
  flex: 0 0 20px;
}

.derm-article__toc details[open] .derm-article__toc-chevron {
  transform: rotate(180deg);
}

.derm-article__toc details[open] summary {
  margin-block-end: 8px;
}

.derm-article__toc ol {
  display: grid;
  gap: 0 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.derm-article__toc li {
  border-block-start: 1px solid var(--derm-line);
  margin: 0;
}

.derm-article__toc a {
  align-items: center;
  color: var(--derm-ink);
  display: flex;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  min-height: 44px;
  padding-block: 8px;
  text-decoration: none;
}

.derm-article__toc a:hover {
  color: var(--article-accent-strong);
}

.derm-article__toc a:focus-visible,
.derm-article__toc summary:focus-visible {
  outline: 2px solid var(--article-accent);
  outline-offset: 3px;
}

.derm-article__content {
  font-size: 1.125rem;
  margin-inline: auto;
  max-width: var(--derm-article-measure);
}

.derm-article__content > * {
  margin-inline: auto;
}

.derm-article__content > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6) {
  max-width: var(--derm-article-measure);
}

.derm-article__content :is(h2, h3, h4, h5, h6, li[id]) {
  scroll-margin-top: 28px;
}

.derm-article::selection,
.derm-article ::selection {
  background: var(--derm-burgundy);
  color: var(--derm-paper);
}

.derm-article__content > *:first-child {
  margin-block-start: 0;
}

.derm-article__content p,
.derm-article__content li {
  color: var(--derm-graphite);
  font-size: 1.125rem;
  line-height: 1.75;
  text-wrap: pretty;
}

.derm-article__content p {
  margin-block: 0 1.3em;
}

.derm-article__content h2 {
  border-block-start: 1px solid var(--derm-line);
  color: var(--derm-ink);
  font-family: var(--derm-article-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.15;
  margin-block: 48px 20px;
  padding-block-start: 24px;
  text-transform: none;
  text-wrap: balance;
}

.derm-article__content h3 {
  color: var(--derm-ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  margin-block: 32px 12px;
  text-transform: none;
  text-wrap: balance;
}

.derm-article__content h4,
.derm-article__content h5,
.derm-article__content h6 {
  color: var(--derm-graphite);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin-block: 28px 12px;
  text-transform: none;
}

.derm-article__content ul,
.derm-article__content ol {
  margin-block: 0 1.5em;
  padding-inline-start: 1.5em;
}

.derm-article__content li + li {
  margin-block-start: 0.5em;
}

.derm-article__content li::marker {
  color: var(--article-accent-strong);
  font-variant-numeric: tabular-nums;
}

.derm-article__content a {
  color: var(--article-accent-strong);
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.derm-article__content blockquote {
  border-block: 1px solid var(--derm-line);
  color: var(--derm-graphite);
  font-size: 1.125rem;
  line-height: 1.65;
  margin-block: 32px;
  padding-block: 20px;
}

.derm-article__content blockquote p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.derm-article__content .bento-container {
  font-family: inherit;
  margin: 0;
  max-width: none;
  padding: 0;
}

.derm-article__content .bento-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: 1.2em 2.4em;
}

.derm-article__content .bento-card {
  background: transparent !important;
  border-block-start: 1px solid color-mix(in oklch, var(--derm-line) 78%, var(--article-accent));
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--derm-ink);
  padding: 24px 22px 28px 0 !important;
  transform: none !important;
  transition: none !important;
}

.derm-article__content .bento-card:hover {
  box-shadow: none !important;
  transform: none !important;
}

.derm-article__content .card-large,
.derm-article__content .card-full {
  grid-column: 1 / -1;
}

.derm-article__content .card-medium,
.derm-article__content .card-wide,
.derm-article__content .card-small {
  grid-column: auto;
}

.derm-article__content .card-icon {
  display: none !important;
}

.derm-article__content .card-title,
.derm-article__content .card-subtitle {
  color: var(--derm-ink) !important;
  font-size: 1.24rem !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  margin: 0 0 14px !important;
  text-transform: uppercase;
}

.derm-article__content .card-description {
  color: color-mix(in oklch, var(--derm-ink) 76%, var(--derm-muted)) !important;
  font-size: 1.02rem !important;
  line-height: 1.68 !important;
  margin: 0 0 14px !important;
}

.derm-article__content .feature-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.derm-article__content .feature-list li {
  align-items: start;
  color: var(--derm-graphite) !important;
  display: grid;
  font-size: 0.98rem;
  gap: 10px;
  grid-template-columns: 18px minmax(0, 1fr);
  line-height: 1.5;
  margin: 0;
  padding: 7px 0;
}

.derm-article__content .feature-list li::before {
  background: var(--article-accent);
  content: "";
  display: block;
  height: 2px;
  margin-block-start: 0.72em;
  width: 14px;
}

.derm-article__content .btn-primary {
  display: none !important;
}

.derm-article__content figure {
  margin: 2.4em 0;
}

.derm-article__content img {
  border: 1px solid color-mix(in oklch, var(--derm-line) 78%, var(--article-accent));
  object-fit: cover;
  width: auto;
}

.derm-article__content figcaption,
.derm-article__content .wp-caption-text {
  color: var(--derm-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  margin-block-start: 10px;
}

.derm-article__content .derm-article__practice-photo {
  margin: 2.5rem auto;
  max-width: 760px;
}

.derm-article__content .derm-article__practice-image {
  border: 0;
  display: block;
  height: auto;
  max-height: 660px;
  object-fit: contain;
  width: 100%;
}

.derm-article__content :where(p, li, caption, figcaption, td, th) {
  overflow-wrap: break-word;
}

.derm-article__content table {
  border-collapse: collapse;
  display: block;
  margin: 2em 0;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
}

.derm-article__content th,
.derm-article__content td {
  border: 1px solid color-mix(in oklch, var(--derm-line) 84%, var(--article-accent));
  font-size: 0.96rem;
  line-height: 1.45;
  min-width: 150px;
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.derm-article__content > .derm-viz,
.derm-article__content > .bento-container,
.derm-article__content > figure,
.derm-article__content > table {
  max-width: var(--derm-article-measure);
  width: 100%;
}

.derm-article__content > :where(div, section, article):not(.derm-viz):not(.bento-container) {
  max-width: var(--derm-article-measure);
  width: 100%;
}

.derm-article__content > .table-responsive {
  overflow-x: auto;
}

@media (max-width: 900px) {
body.single-post .derm-article__content table:not(.derm-viz__table),
  body.single-post .derm-article__content table:not(.derm-viz__table) > caption,
  body.single-post .derm-article__content table:not(.derm-viz__table) thead,
  body.single-post .derm-article__content table:not(.derm-viz__table) tbody,
  body.single-post .derm-article__content table:not(.derm-viz__table) tr,
  body.single-post .derm-article__content table:not(.derm-viz__table) th,
  body.single-post .derm-article__content table:not(.derm-viz__table) td {
    display: block !important;
    max-width: 100%;
    min-width: 0 !important;
    width: 100% !important;
  }

body.single-post .derm-article__content table:not(.derm-viz__table) {
    border-block-start: 1px solid color-mix(in oklch, var(--derm-line) 84%, var(--article-accent));
    overflow: hidden;
  }

body.single-post .derm-article__content table:not(.derm-viz__table) tr {
    border-block-end: 1px solid color-mix(in oklch, var(--derm-line) 84%, var(--article-accent));
    padding-block: 8px;
  }

body.single-post .derm-article__content table:not(.derm-viz__table) th,
  body.single-post .derm-article__content table:not(.derm-viz__table) td {
    border: 0;
    overflow-wrap: anywhere;
    padding: 8px 0;
  }

}

.derm-article__content button,
.derm-article__content input[type="button"],
.derm-article__content input[type="submit"],
.entry-content button,
.entry-content input[type="button"],
.entry-content input[type="submit"] {
  background: var(--derm-ink) !important;
  border: 1px solid var(--derm-ink) !important;
  color: var(--derm-paper) !important;
}

.derm-article__content a[style*="background"],
.entry-content a[style*="background"],
.derm-article__content .button,
.entry-content .button,
.derm-article__content .btn,
.entry-content .btn {
  background: var(--derm-ink) !important;
  color: var(--derm-paper) !important;
}

body.single-post a[href*="wa.me"],
body.single-post a[href^="tel:"] {
  color: var(--derm-paper) !important;
}

.derm-article__content th {
  color: var(--derm-ink);
  font-weight: 950;
  text-transform: uppercase;
}

.derm-article__footer-grid {
  border-block-start: 1px solid color-mix(in oklch, var(--derm-line) 84%, var(--article-accent));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 52px 72px;
}

.derm-article__related a:focus-visible,
.derm-article__content button:focus-visible,
.derm-article__content input[type="button"]:focus-visible,
.derm-article__content input[type="submit"]:focus-visible,
.derm-article__content a.button:focus-visible,
.derm-article__content a.btn:focus-visible {
  outline: 2px solid var(--article-accent);
  outline-offset: 3px;
}

.derm-article__related {
  border-block: 1px solid color-mix(in oklch, var(--derm-line) 84%, var(--article-accent));
}

.derm-article__related p {
  color: var(--article-accent-strong);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1.2;
  margin: 0;
  padding-block: 16px;
  text-transform: uppercase;
}

.derm-article__related a {
  align-items: baseline;
  border-block-start: 1px solid color-mix(in oklch, var(--derm-line) 70%, transparent);
  color: var(--derm-ink);
  display: grid;
  font-size: 1rem;
  font-weight: 950;
  gap: 16px;
  grid-template-columns: 34px minmax(0, 1fr);
  line-height: 1.2;
  padding-block: 16px;
  text-decoration: none;
  text-transform: uppercase;
}

.derm-article__related a:hover {
  color: var(--article-accent-strong);
}

.derm-article__related a span {
  color: var(--article-accent);
  font-size: 0.72rem;
}

.derm-article__explicit-cta {
  border-block-start: 1px solid color-mix(in oklch, var(--derm-line) 84%, var(--article-accent));
  padding-block: 0 64px;
}

.derm-article__explicit-cta .derm-article__button {
  margin-block-start: 24px;
}

.derm-article__consultation-cta {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block: 32px;
}

.derm-article__button,
body.single-post .derm-article__content a[href*="wa.me"],
body.single-post .derm-article__content a[href^="tel:"] {
  align-items: center;
  background: #203f35;
  border: 1px solid #203f35;
  color: var(--derm-paper) !important;
  display: inline-flex;
  gap: 12px;
  font-size: max(16px, 1rem);
  font-weight: 600;
  justify-content: center;
  line-height: 1.4;
  max-width: 100%;
  min-height: 48px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  width: fit-content;
}

.derm-article__button:hover,
body.single-post .derm-article__content a[href*="wa.me"]:hover,
body.single-post .derm-article__content a[href^="tel:"]:hover {
  background: #163c2d;
  border-color: #163c2d;
}

.derm-article__content .derm-article__service-link {
  align-items: center;
  color: #203f35;
  display: inline-flex;
  font-size: max(16px, 1rem);
  line-height: 1.5;
  max-width: 100%;
  min-height: 44px;
  overflow-wrap: anywhere;
  padding-block: 8px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.derm-article__button:focus-visible,
.derm-article__service-link:focus-visible,
.derm-article__content a[href*="wa.me"]:focus-visible,
.derm-article__content a[href^="tel:"]:focus-visible {
  outline: 2px solid #203f35;
  outline-offset: 3px;
}

.derm-article--laser-dossier {
  --article-accent: var(--derm-gold);
  --article-accent-strong: #00413f;
  --article-surface: #203f35;
  --article-hero-ink: var(--derm-paper);
  --article-hero-muted: #e0e6df;
  --article-hero-line: #71857b;
}

.derm-article--laser-dossier .derm-article__hero {
  color: var(--article-hero-ink);
}

.derm-article--laser-dossier .derm-article__title,
.derm-article--laser-dossier .derm-article-byline,
.derm-article--laser-dossier .derm-article-byline a,
.derm-article--laser-dossier .derm-article-byline__review {
  color: var(--article-hero-ink);
}

.derm-article--laser-dossier .derm-article__dek,
.derm-article--laser-dossier .derm-article__meta,
.derm-article--laser-dossier .derm-article__media figcaption {
  color: var(--article-hero-muted);
}

.derm-article--laser-dossier .derm-article-byline {
  border-color: var(--article-hero-line);
}

.derm-article--pigment-atlas {
  --article-accent: var(--derm-ochre);
}

.derm-article--injectables-brief {
  --article-accent: var(--derm-coral);
}

.derm-article--reference-journal {
  --article-accent: var(--derm-sage);
}

/* Excluded clinical montages retain their existing text-only header. */
.derm-article__hero-grid--text {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--derm-article-wide);
}

.derm-article__hero-grid--text .derm-article__copy {
  max-width: 54rem;
}

@media (max-width: 980px) {
.derm-article__hero-grid {
    gap: 32px;
    grid-template-columns: minmax(0, 1fr);
  }

.derm-article__copy,
  .derm-article__media {
    grid-column: 1;
  }

.derm-article__media {
    max-width: 560px;
  }

}

@media (max-width: 760px) {
body.single-post .derm-site-header__inner {
    column-gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 20px;
    row-gap: 0;
  }

body.single-post .derm-brandmark .derm-brandmark__logo {
    width: min(100%, 240px);
  }

body.single-post .derm-site-header__controls {
    gap: 4px;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 44px auto;
  }

body.single-post .derm-site-header__controls .derm-button {
    background: transparent;
    border-color: transparent;
    border-radius: 6px;
    color: var(--derm-ink);
    font-size: 0.875rem;
    font-weight: 500;
    gap: 6px;
    min-width: 44px;
    padding: 10px 6px;
    text-transform: none;
  }

body.single-post .derm-site-header__controls .derm-button:is(:hover, [aria-expanded="true"]) {
    background: #e9ede5;
    color: #203f35;
  }

body.single-post .derm-site-control__icon {
    flex: 0 0 20px;
  }

body.single-post [data-derm-mobile-search] .derm-site-control__label {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

body.single-post .derm-site-nav {
    grid-row: 2;
    margin: 10px -20px -10px;
  }

body.single-post .derm-site-nav a {
    font-weight: 500;
    justify-content: flex-start;
    padding-inline: 20px;
    text-transform: none;
  }

.derm-article {
    --article-surface: var(--derm-paper);
    --article-hero-ink: #203f35;
    --article-hero-muted: var(--derm-muted);
    --article-hero-line: var(--derm-line);
  }

.derm-article__shell {
    width: min(calc(100% - 40px), var(--derm-max));
  }

.derm-article__hero {
    padding-block: 32px 24px;
  }

.derm-article__title {
    color: var(--article-hero-ink);
    font-size: clamp(2.25rem, 10vw, 3rem);
    line-height: 1.1;
    margin-block-end: 18px;
    max-width: none;
  }

.derm-article--title-medium .derm-article__title {
    font-size: clamp(2.125rem, 9.5vw, 2.75rem);
  }

.derm-article--title-long .derm-article__title {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

.derm-article__dek {
    font-size: 1.0625rem;
    line-height: 1.6;
    margin-block-end: 22px;
  }

.derm-article__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 24px;
  }

.derm-article .derm-article__action {
    align-items: center;
    background: transparent;
    border: 1px solid var(--derm-line);
    border-radius: 6px;
    color: #203f35;
    cursor: pointer;
    display: inline-flex;
    flex: 1 1 auto;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    line-height: 1.4;
    min-height: 48px;
    padding: 10px 12px;
    text-decoration: none;
    text-transform: none;
  }

.derm-article .derm-article__action--primary {
    background: #203f35;
    border-color: #203f35;
    color: var(--derm-paper);
  }

.derm-article__action svg {
    flex: 0 0 20px;
  }

.derm-article .derm-article__action:hover {
    background: #e9ede5;
    color: #203f35;
  }

.derm-article .derm-article__action--primary:hover {
    background: #315547;
    border-color: #315547;
    color: var(--derm-paper);
  }

.derm-article__action:focus-visible {
    outline: 2px solid #203f35;
    outline-offset: 3px;
  }

.derm-article .derm-article__action[hidden] {
    display: none;
  }

.derm-article__action:disabled {
    cursor: wait;
    opacity: 0.7;
  }

.derm-article__share-status {
    display: block;
  }

.derm-article__share-status:empty {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

.derm-article__share-status:not(:empty) {
    color: var(--derm-muted);
    display: block;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: -12px 0 20px;
  }

.derm-article__meta {
    font-size: 0.8125rem;
    gap: 6px 16px;
    margin-block-end: 6px;
  }

.derm-article-byline {
    border: 0;
    font-size: 0.8125rem;
    gap: 4px;
    padding: 0;
  }

.derm-article__content-grid {
    padding-block: 24px 40px;
  }

.derm-article__toc {
    background: #eef0e9;
    border: 1px solid #dce1d6;
    border-radius: 6px;
    margin-block-end: 32px;
    padding-inline: 16px;
    scroll-margin-top: 20px;
  }

.derm-article__toc summary {
    min-height: 56px;
  }

.derm-article__toc a {
    min-height: 48px;
    padding-block: 12px;
  }

.derm-article__toc ol {
    grid-template-columns: minmax(0, 1fr);
  }

.derm-article__content p,
  .derm-article__content li {
    font-size: 1.0625rem;
    line-height: 1.7;
  }

.derm-article__content > p:first-child {
    color: var(--derm-ink);
    font-size: 1.1875rem;
    line-height: 1.65;
  }

.derm-article__content h2:where(:not(.derm-viz__title)) {
    border: 0;
    color: #203f35;
    font-family: inherit;
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.22;
    margin-block: 44px 16px;
    padding: 0;
    text-wrap: pretty;
  }

.derm-article__content h3:where(:not(.derm-viz__title)) {
    font-size: 1.25rem;
    margin-block: 30px 12px;
    text-wrap: pretty;
  }

.derm-article__content > h2[id^="referencia"] {
    border-block-start: 1px solid var(--derm-line);
    color: var(--derm-muted);
    font-size: 1.125rem;
    margin-block-start: 40px;
    padding-block-start: 24px;
  }

.derm-article__content > h2[id^="referencia"] + :is(ol, ul) li {
    color: var(--derm-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
  }

.derm-article__content .bento-grid {
    grid-template-columns: minmax(0, 1fr);
  }

.derm-article__content .bento-card {
    padding-inline-end: 0 !important;
  }

.derm-article__content table,
  .derm-article__content thead,
  .derm-article__content tbody,
  .derm-article__content tr,
  .derm-article__content th,
  .derm-article__content td {
    display: block;
    min-width: 0;
    width: 100%;
  }

.derm-article__content table {
    border-block-start: 1px solid color-mix(in oklch, var(--derm-line) 84%, var(--article-accent));
    overflow: visible;
  }

.derm-article__content tr {
    border-block-end: 1px solid color-mix(in oklch, var(--derm-line) 84%, var(--article-accent));
    padding-block: 8px;
  }

.derm-article__content th,
  .derm-article__content td {
    border: 0;
    overflow-wrap: anywhere;
    padding: 8px 0;
  }

body.single-post table,
  body.single-post thead,
  body.single-post tbody,
  body.single-post tr,
  body.single-post th,
  body.single-post td {
    display: block !important;
    max-width: 100%;
    min-width: 0 !important;
    width: 100% !important;
  }

body.single-post table {
    overflow: hidden;
  }

.derm-article__footer-grid {
    padding-block: 42px 54px;
  }

.derm-article__button {
    min-height: 56px;
    width: 100%;
  }

}

/* Source-verified topic video: article-only, click-to-load media. */
.derm-topic-video {
  background: #f0f1eb;
  border: 1px solid var(--derm-line);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  margin-block: 48px;
  max-width: var(--derm-article-wide);
  overflow: hidden;
  width: 100%;
}

.derm-topic-video__frame {
  background: var(--derm-noir);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: max(176px, 11rem);
  position: relative;
  width: 100%;
}

.derm-topic-video__frame::before {
  aspect-ratio: 16 / 9;
  content: "";
  grid-area: 1 / 1;
  pointer-events: none;
}

.derm-topic-video__frame iframe {
  border: 0;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.derm-article__content .derm-topic-video__poster {
  align-content: space-between;
  align-items: start;
  background: #203f35 !important;
  border: 0 !important;
  color: var(--derm-paper) !important;
  cursor: pointer;
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: min-content;
  overflow: hidden;
  padding: 16px !important;
  position: relative;
  text-align: left;
  white-space: normal;
  width: 100%;
}

.derm-article__content .derm-topic-video__poster > img {
  border: 0;
  display: block;
  height: 100%;
  inset: 0;
  max-width: none;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

.derm-article__content .derm-topic-video__poster::before {
  background: rgb(16 37 29 / 72%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.derm-topic-video__poster-channel,
.derm-topic-video__poster-action {
  font-size: max(16px, 1rem);
  font-weight: 500;
  grid-column: 1 / -1;
  letter-spacing: 0;
  line-height: 1.4;
  position: relative;
  text-transform: none;
  z-index: 2;
}

.derm-topic-video__poster-channel {
  color: var(--derm-paper);
}

.derm-topic-video__poster-action {
  align-items: center;
  border-block-start: 1px solid color-mix(in oklch, var(--derm-paper) 42%, transparent);
  display: flex;
  min-height: 44px;
  padding-block-start: 14px;
}

.derm-topic-video__play {
  align-self: center;
  background: var(--derm-paper);
  border-radius: 50%;
  display: grid;
  grid-column: 1;
  justify-self: center;
  height: 64px;
  place-items: center;
  position: relative;
  width: 64px;
  z-index: 2;
}

.derm-topic-video__play span {
  border-block: 10px solid transparent;
  border-inline-start: 16px solid #203f35;
  display: block;
  margin-inline-start: 5px;
}

.derm-topic-video__body {
  align-content: start;
  display: grid;
  padding: clamp(24px, 3vw, 32px);
}

.derm-topic-video__body h2 {
  border: 0;
  color: #203f35;
  font-family: inherit;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
  max-width: none;
  overflow-wrap: anywhere;
  padding: 0;
  text-wrap: balance;
}

.derm-topic-video__meta {
  border-block-end: 1px solid var(--derm-line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr));
  gap: 12px 16px;
  margin: 20px 0 0;
  padding-block-end: 20px;
}

.derm-topic-video__meta div {
  padding: 0;
}

.derm-topic-video__meta div:nth-child(-n + 2) {
  grid-column: 1 / -1;
}

.derm-topic-video__meta dt {
  color: var(--derm-muted);
  overflow-wrap: anywhere;
  font-size: max(16px, 1rem);
  font-weight: 400;
  line-height: 1.5;
}

.derm-topic-video__meta dd {
  color: var(--derm-ink);
  font-size: max(16px, 1rem);
  font-weight: 500;
  line-height: 1.5;
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.derm-article__content .derm-topic-video__bridge {
  color: var(--derm-graphite);
  font-size: max(16px, 1rem);
  line-height: 1.65;
  margin: 20px 0 0;
}

.derm-topic-video__links {
  display: grid;
  gap: 4px;
  margin-block-start: 16px;
}

.derm-topic-video__links a,
.derm-topic-video-fallback a {
  align-items: center;
  border: 0;
  display: inline-flex;
  font-size: max(16px, 1rem);
  font-weight: 500;
  justify-content: flex-start;
  line-height: 1.5;
  min-height: 44px;
  padding: 8px 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-transform: none;
}

.derm-topic-video__related {
  background: transparent;
  color: #203f35 !important;
}

.derm-topic-video__fallback {
  background: transparent;
  color: var(--derm-ink) !important;
}

.derm-topic-video-fallback {
  margin-block: 24px;
}

.derm-topic-video__poster:hover {
  background: #315547 !important;
}

.derm-article__content .derm-topic-video__poster:focus-visible,
.derm-topic-video__links a:focus-visible,
.derm-topic-video-fallback a:focus-visible,
.derm-topic-video__frame iframe:focus-visible {
  outline: 3px solid #203f35;
  outline-offset: -5px;
}

.derm-topic-video__links a:focus-visible,
.derm-topic-video-fallback a:focus-visible {
  outline-offset: 3px;
}

.derm-article__content .derm-topic-video__poster:focus-visible {
  outline-color: var(--derm-paper);
}

@media (min-width: 761px) {
  .derm-topic-video {
    align-items: start;
    gap: 20px 24px;
    padding: 24px;
  }

  .derm-topic-video__body {
    display: contents;
  }

  .derm-topic-video__body h2 {
    align-self: center;
    grid-column: 2;
    grid-row: 1;
  }

  .derm-topic-video__meta {
    grid-column: 1 / -1;
    margin: 0;
  }

  .derm-topic-video__meta div:nth-child(-n + 2) {
    grid-column: auto;
  }

  .derm-article__content .derm-topic-video__bridge {
    grid-column: 1 / -1;
    margin: 0;
  }

  .derm-topic-video__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    grid-column: 1 / -1;
    margin: 0;
  }
}

@media (max-width: 760px) {
.derm-topic-video {
    grid-template-columns: minmax(0, 1fr);
    margin-block: 36px;
  }

  .derm-topic-video__poster {
    min-height: 0;
  }

.derm-topic-video__body {
    padding: 24px 20px;
  }

}

/* Keep adjacent article reference numbers visually distinct. */
.derm-article__content sup:has(> a[href^="#ref-"]) + sup:has(> a[href^="#ref-"]) {
  margin-inline-start: 0.25em;
}


.derm-article__content li[id^="ref-"]:target {
  background: #eef0e9;
}