/* Scoped styles; the component and image have transparent backgrounds. */
perioral-treatment-map {
  --dfm-ink:#221d15; --dfm-copy:#756c5a; --dfm-gold:#93711e;
  --dfm-highlight:#d6ae48; --dfm-heading:'Cormorant Garamond',Georgia,serif;
  --dfm-body:'Jost',Helvetica,Arial,sans-serif;
  display:block; color:var(--dfm-ink); background:transparent;
  font-family:var(--dfm-body); font-weight:300; container-type:inline-size;
}
perioral-treatment-map * {box-sizing:border-box}
.dfm-header{text-align:center;margin:0 0 16px}
.dfm-header h2{font-family:var(--dfm-heading);font-weight:300;font-size:clamp(36px,4.5vw,68px);line-height:1.05;margin:0 0 12px}
.dfm-header p{font-size:16px;color:var(--dfm-copy);margin:0}
.dfm-layout{position:relative;display:grid;grid-template-columns:24% 52% 24%;align-items:start}
.dfm-portrait{grid-column:2;grid-row:1;position:relative;aspect-ratio:3/2}
.dfm-portrait svg{display:block;width:100%;height:100%;overflow:visible}
.dfm-region{fill:var(--dfm-highlight);fill-opacity:.32;stroke:var(--dfm-gold);stroke-width:1;stroke-opacity:.3;transition:fill-opacity .15s,stroke-width .15s}
.dfm-region.is-active{fill-opacity:.62;stroke-opacity:1;stroke-width:2.5}
.dfm-leader{fill:none;stroke:var(--dfm-gold);stroke-width:1.5;opacity:.65;vector-effect:non-scaling-stroke}
.dfm-leader.is-active{opacity:1;stroke-width:2}
.dfm-labels{display:contents;list-style:none;margin:0;padding:0}
.dfm-item{position:absolute;width:24%;top:var(--dfm-y);transform:translateY(-50%);z-index:2}
.dfm-item[data-side=left]{left:0;padding-right:12px}
.dfm-item[data-side=right]{right:0;padding-left:12px}
.dfm-control{appearance:none;display:block;width:100%;padding:8px 10px;text-align:left;background:transparent;border:1px solid transparent;border-radius:4px;color:inherit;font:inherit;text-decoration:none;cursor:pointer}
.dfm-control:hover,.dfm-control[aria-pressed=true],.dfm-control.is-active{border-color:var(--dfm-gold);background:rgb(214 174 72 / .07)}
.dfm-control:focus-visible{outline:2px solid var(--dfm-gold);outline-offset:3px}
.dfm-name{display:block;font-family:var(--dfm-heading);font-weight:400;font-size:clamp(23px,2.5vw,36px);line-height:1.08;margin-bottom:6px}
.dfm-description{display:block;font-size:clamp(14px,1.35vw,19px);line-height:1.45;color:var(--dfm-copy);font-weight:300}
.dfm-footer{text-align:center;font-size:14px;color:var(--dfm-copy);margin:14px 0 0}
.dfm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@container (max-width:850px){
  .dfm-layout{display:flex;flex-direction:column;align-items:stretch}
  .dfm-portrait{width:min(100%,540px);align-self:center}
  .dfm-leader{display:none}
  .dfm-labels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
  .dfm-item{position:static;width:auto;transform:none;padding:0!important}
  .dfm-control{height:100%;padding:12px;border-color:rgb(147 113 30 / .25)}
  .dfm-name{font-size:28px}.dfm-description{font-size:16px}
}
@container (max-width:420px){.dfm-labels{grid-template-columns:1fr}.dfm-header h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){.dfm-region{transition:none}}