body.page-news {
  margin: 0;
  background: #fff;
  color: var(--ps-charcoal);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

.page-news .skip-link {
  position: fixed;
  z-index: 200;
  top: -6.25rem;
  left: 1.25rem;
  padding: .875rem;
  background: var(--ps-ink);
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.page-news .skip-link:focus {
  top: .75rem;
}

.page-news .skip-link:focus-visible {
  outline: .1875rem solid var(--ps-teal);
  outline-offset: .3125rem;
}

/* ---------- article ---------- */

/* The title's second half drops to its own line in teal. */
.news-article-title .ps-accent {
  display: block;
}

.news-article a {
  color: var(--ps-teal-accessible);
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}

.news-article-img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 40rem;
  margin: 1.875rem auto;
  border-radius: 1.25rem;
  object-fit: contain;
}

/* "By PS Salon & Spa · Originally shared …" under the title. */
.news-published {
  color: var(--ps-muted);
  font-size: .875rem;
  line-height: 1.7;
}

/* A photo of any shape, letterboxed in a dark band no taller than the column needs. */
.news-article-photo {
  margin: 1.875rem 0;
}

.news-article-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 22.5rem;
  margin-bottom: 1.875rem;
  border-radius: var(--ps-image-radius);
  background: var(--ps-charcoal);
  object-fit: contain;
}

/* A landscape photo cropped to fill the band instead. */
.news-article-photo--cover img {
  background: none;
  object-fit: cover;
}

.news-article-photo figcaption {
  margin-top: .625rem;
  color: var(--ps-muted);
  font-size: .875rem;
}

/* A partner's logo, at a fixed height. */
.news-article-logo {
  margin: 1.875rem 0;
}

.news-article-logo img {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: 9rem;
  margin: 1.875rem auto;
  border-radius: 1.25rem;
  object-fit: contain;
  object-position: left center;
}

/* A product shot on white, at a fixed height. */
.news-product-photo {
  margin: 1.875rem 0;
}

.news-product-photo img {
  display: block;
  width: 100%;
  height: 22rem;
  padding: .75rem;
  background: #fff;
  object-fit: contain;
}

.news-product-callout {
  font-weight: 800;
}

/* ---------- leader portraits ---------- */

.news-article-leaders {
  margin: 1.875rem 0;
}

.news-leaders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  padding: 1.5rem 1.125rem;
  border-radius: 1.5rem;
  background: var(--ps-mint-tint);
}

.news-leader-portrait {
  display: block;
  width: 100%;
  max-width: 11.25rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 50%;
}

.news-leader-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.news-leader-name {
  display: block;
  margin-top: .75rem;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---------- Celebration Portal ---------- */

/* The portal articles' screenshot panel and family invitation card. */
.portal-feature {
  margin-block: 1.875rem;
  overflow: hidden;
  border: 1px solid var(--ps-mint);
  border-radius: 1.375rem;
  background: var(--ps-mint-tint);
}

.portal-feature-heading {
  padding: 1.25rem;
}

.portal-feature-eyebrow {
  margin: 0 0 .5rem;
  color: var(--ps-teal-accessible);
  font-size: .8125rem;
  font-weight: 900;
  letter-spacing: .0934375rem;
  text-transform: uppercase;
}

.portal-feature-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.0375rem;
  text-wrap: balance;
}

.portal-screenshot {
  margin: 0;
  background: #fff;
}

.portal-screenshot > a {
  display: block;
  cursor: zoom-in;
}

.portal-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.portal-screenshot figcaption {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  gap: .5rem;
  padding: .9375rem 1.25rem;
  border-top: 1px solid var(--ps-line);
  background: #fff;
  font-size: .875rem;
  line-height: 1.5;
}

.portal-screenshot figcaption span {
  max-width: 35rem;
}

/* "Enlarge view": opens the full-size screenshot in a new tab. */
.portal-enlarge {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  min-height: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}

.portal-enlarge svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* a.family-invitation outranks .news-article a, which would turn the whole
   card's text teal. */
a.family-invitation {
  display: grid;
  grid-template-columns: 3.375rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--ps-mint);
  border-radius: 1.375rem;
  background: var(--ps-mint-tint);
  color: var(--ps-charcoal);
  text-decoration: none;
}

a.family-invitation:hover {
  border-color: var(--ps-teal);
  background: #dcf0e8;
}

a.family-invitation:focus-visible {
  outline: .1875rem solid var(--ps-teal);
  outline-offset: .3125rem;
}

.family-invitation img {
  display: block;
  width: 3.125rem;
  height: 3.5625rem;
  object-fit: contain;
  transition: transform .2s;
}

.family-invitation:hover img {
  transform: translateY(-.1875rem) rotate(-5deg);
}

.family-invitation-copy {
  display: flex;
  flex-direction: column;
  gap: .4375rem;
}

.family-invitation-eyebrow {
  color: var(--ps-teal-accessible);
  font-size: .875rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .07rem;
  text-transform: uppercase;
}

.family-invitation-title {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.family-invitation-detail {
  font-size: 1rem;
  line-height: 1.4;
}

.family-invitation-action {
  margin-top: .1875rem;
  color: var(--ps-teal-accessible);
  font-size: .875rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .25rem;
}

.family-invitation > svg {
  display: none;
  width: 1.375rem;
  height: 1.375rem;
}

/* Section headings in the article, and the sources box's heading.
   :where() lets the partnership panel's title keep its own size. */
:where(.news-article) h2 {
  margin: .5rem 0 1rem;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.039rem;
  text-wrap: balance;
}

/* ---------- more from PS ---------- */

.news-sources {
  margin-top: 2.1875rem;
  padding-top: .9375rem;
  border-top: 1px solid var(--ps-line);
}

.news-sources a {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block: .75rem;
  font-size: .9375rem;
}

.news-sources svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

/* ---------- partnership CTA ---------- */

.news-article-cta {
  margin-top: 2.1875rem;
  padding: 1.4375rem;
  border-radius: 1.375rem;
  background: var(--ps-mint-tint);
}

.news-article-cta-title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.051rem;
  text-wrap: balance;
}

/* .news-article a would otherwise turn the button's label teal. */
.news-article-cta .ps-cta {
  width: 100%;
  color: #fff;
}

@media (min-width: 43.8125rem) {
  .news-article-photo img {
    max-height: 30.625rem;
  }

  .news-article-cta {
    padding: 1.875rem;
  }

  .news-article-cta .ps-cta {
    width: auto;
  }

  .news-leaders {
    gap: 1.5rem;
    padding: 1.75rem;
  }

  .news-leaders--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .news-leader-name {
    font-size: 1rem;
  }

  .portal-feature-heading {
    padding: 1.375rem 1.5rem 1.125rem;
  }

  .portal-feature-eyebrow {
    font-size: .875rem;
    letter-spacing: .1225rem;
  }

  .portal-screenshot figcaption {
    flex-direction: row;
    gap: 1.125rem;
    padding: 1rem 1.5rem;
  }

  a.family-invitation {
    grid-template-columns: 4.375rem minmax(0, 1fr) 1.375rem;
    gap: 1.25rem;
    padding: 1.5rem;
  }

  .family-invitation img {
    width: 4rem;
    height: 4.5rem;
  }

  .family-invitation > svg {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .family-invitation img {
    transition: none;
  }

  .family-invitation:hover img {
    transform: none;
  }
}