/*
 * Prophet Muhammad — theme styles.
 *
 * The design tokens, the header, the building blocks shared with the homepage
 * widgets (eyebrow labels, the "Explore More" button, article cards, section
 * headings), and the placeholder article and category pages. The homepage
 * sections themselves are styled by the Elementor Addons plugin
 * (assets/css/pm-widgets.css), on top of this file.
 *
 * Breakpoints follow the design: 1280px, 900px and 620px.
 */

/* ── Tokens ───────────────────────────────────────────────────── */

:root {
  --pm-ink: #062721;
  --pm-body: #263734;
  --pm-green: #018774;
  --pm-green-dark: #016a5b;
  --pm-gold: #b78f50;
  --pm-cream: #f5e8d3;
  --pm-sand: #f4f1de;
  --pm-paper: #ffffff;
  --pm-muted: #9daca9;
  --pm-line: #dbe3e1;

  --pm-font-heading: "Gloock", Georgia, serif;
  --pm-font-display: "DM Serif Display", Georgia, serif;
  --pm-font-titling: "Castoro Titling", Georgia, serif;
  --pm-font-quote: "Merriweather", Georgia, serif;
  --pm-font-label: "Manrope", Arial, sans-serif;
  --pm-font-button: "Inter", Arial, sans-serif;
  --pm-font-body: "Open Sans", Arial, sans-serif;
  --pm-font-arabic: "Amiri Quran", "Amiri", serif;

  /* The width of the page's content, and the gutter outside it on wide screens. */
  --pm-container: min(87.3vw, 1676px);
  --pm-gutter: max(6.3vw, calc((100vw - 1680px) / 2));
  --pm-radius: 24px;
  --pm-shadow: 0 30px 60px rgb(31 80 61 / 10%);

  /* The light star lattice on sand bands shows at the left and right only,
     fading into plain sand across the middle 880px where centred text sits.
     Measured from the centre of whatever it masks; used as a mask-image. */
  --pm-lattice-fade: linear-gradient(90deg,
    #000 calc(50% - 700px),
    rgb(0 0 0 / 60%) calc(50% - 600px),
    rgb(0 0 0 / 22%) calc(50% - 510px),
    transparent calc(50% - 440px),
    transparent calc(50% + 440px),
    rgb(0 0 0 / 22%) calc(50% + 510px),
    rgb(0 0 0 / 60%) calc(50% + 600px),
    #000 calc(50% + 700px));
}

@media (max-width: 620px) {
  :root {
    --pm-container: 88vw;
    --pm-gutter: 7vw;
  }
}

/* ── Base ─────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--pm-paper);
  color: var(--pm-body);
  font-family: var(--pm-font-body);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--pm-ink);
  font-family: var(--pm-font-heading);
  font-weight: 400;
}

p,
blockquote,
figure {
  margin: 0;
}

a {
  color: var(--pm-green);
}

button {
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--pm-gold);
  outline-offset: 4px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pm-skip-link:focus {
  top: 12px;
  left: 12px;
  z-index: 1000;
  width: auto;
  height: auto;
  padding: 12px 20px;
  margin: 0;
  clip: auto;
  border-radius: 999px;
  background: var(--pm-ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.pm-container {
  width: var(--pm-container);
  margin-inline: auto;
}

/* ── Header ───────────────────────────────────────────────────── */

.pm-header {
  position: relative;
  z-index: 50;
  height: 112px;
  display: flex;
  align-items: center;
  padding-inline: max(5vw, calc((100vw - 1680px) / 2));
  border-top: 6px solid var(--pm-green);
  border-bottom: 1px solid #dfe7e5;
  background: var(--pm-paper);
}

/* The logo sits on a white tab that hangs below the header line. */
.pm-header__brand {
  align-self: flex-start;
  flex: none;
  width: 141px;
  height: 136px;
  padding: 10px 13px;
  border-radius: 70px 70px 0 0;
  background: var(--pm-paper);
}

.pm-header .pm-header__brand img {
  width: 115px;
  height: 119px;
  max-width: none;
  object-fit: contain;
}

.pm-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(15px, 2.1vw, 42px);
  margin-left: clamp(28px, 4vw, 75px);
}

.pm-nav__link {
  position: relative;
  flex: none;
  color: var(--pm-ink);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color 240ms ease;
}

/* The green line sits on the header's bottom edge, over its grey rule. The
   link is centred in the header, so the edge is a fixed distance below the
   link's middle whatever the size of its text: half the space inside the
   borders (112 − 6 − 1), plus the 1px rule, less the line's 2px. */
.pm-nav__link::after {
  content: "";
  position: absolute;
  top: calc(50% + 51.5px);
  right: 0;
  left: 0;
  height: 2px;
  background: var(--pm-green);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 280ms ease;
}

.pm-nav__link:hover,
.pm-nav__link:focus-visible,
.pm-nav__link.is-current {
  color: var(--pm-green);
}

.pm-nav__link:hover::after,
.pm-nav__link:focus-visible::after,
.pm-nav__link.is-current::after {
  transform: scaleX(1);
}

.pm-nav__link small {
  display: block;
  color: var(--pm-gold);
  font-family: var(--pm-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pm-nav__link span {
  font-family: var(--pm-font-display);
  font-size: clamp(15px, 1.15vw, 22px);
}

.pm-nav__search,
.pm-header__toggle {
  border: 0;
  background: transparent;
  color: var(--pm-ink);
}

.pm-nav__search {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  transition: color 240ms ease;
}

.pm-nav__search:hover {
  color: var(--pm-green);
}

.pm-nav__search .pm-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.pm-header__toggle {
  display: none;
}

/* Folded navigation: on a phone, and wherever the chapters do not fit on one
   line (main.js adds .is-compact). Without JavaScript the chapters wrap instead. */
.pm-js .pm-header.is-compact {
  justify-content: space-between;
}

.pm-js .pm-header.is-compact .pm-header__toggle {
  position: relative;
  display: grid;
  gap: 5px;
  width: 44px;
  padding: 10px;
}

.pm-js .pm-header.is-compact .pm-header__toggle > span:not(.screen-reader-text) {
  display: block;
  height: 2px;
  background: var(--pm-ink);
  transition: transform 240ms ease, opacity 240ms ease;
}

.pm-js .pm-header.is-open .pm-header__toggle > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pm-js .pm-header.is-open .pm-header__toggle > span:nth-child(2) { opacity: 0; }
.pm-js .pm-header.is-open .pm-header__toggle > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.pm-js .pm-header.is-compact .pm-nav {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
  margin: 0;
  padding: 25px max(5vw, 24px);
  background: var(--pm-paper);
  box-shadow: 0 20px 40px rgb(6 39 33 / 12%);
}

.pm-js .pm-header.is-compact.is-open .pm-nav {
  display: grid;
}

.pm-js .pm-header.is-compact .pm-nav__link {
  display: block;
  padding: 12px;
}

.pm-js .pm-header.is-compact .pm-nav__link::after {
  top: auto;
  right: 12px;
  bottom: 4px;
  left: 12px;
}

.pm-js .pm-header.is-compact .pm-nav__link span {
  font-size: 19px;
}

.pm-js .pm-header.is-compact .pm-nav__search {
  margin: 12px;
}

@media (max-width: 900px) {
  .pm-header {
    height: 94px;
    padding-inline: 24px;
  }

  .pm-nav__link::after {
    top: calc(50% + 42.5px);
  }

  .pm-header__brand {
    width: 105px;
    height: 105px;
    padding: 6px 10px;
  }

  .pm-header .pm-header__brand img {
    width: 85px;
    height: 92px;
  }

  html:not(.pm-js) .pm-header {
    height: auto;
    flex-wrap: wrap;
    padding-bottom: 16px;
  }

  html:not(.pm-js) .pm-nav {
    flex-wrap: wrap;
    margin: 12px 0 0;
  }
}

/* ── Search overlay (light) ───────────────────────────────────── */

.pm-search {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, rgb(255 255 255 / 97%) 0%, rgb(244 241 222 / 97%) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 250ms ease;
}

.pm-search[hidden] {
  display: none;
}

.pm-search.is-open {
  opacity: 1;
}

.pm-search__close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(6 39 33 / 15%);
  border-radius: 50%;
  background: #fff;
  color: var(--pm-ink);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.pm-search__close:hover {
  border-color: var(--pm-green);
  background: var(--pm-green);
  color: #fff;
}

.pm-search__close .pm-icon {
  width: 20px;
  height: 20px;
}

.pm-search__form {
  width: min(680px, 100%);
}

.pm-search__label {
  margin-bottom: 24px;
  color: var(--pm-gold);
  font-family: var(--pm-font-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.pm-search__field {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgb(6 39 33 / 20%);
  color: var(--pm-gold);
  transition: border-color 250ms ease;
}

.pm-search__field:focus-within {
  border-bottom-color: var(--pm-green);
}

.pm-search__field .pm-icon {
  flex: none;
  width: 28px;
  height: 28px;
}

.pm-search__field input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--pm-ink);
  font-family: var(--pm-font-heading);
  font-size: clamp(30px, 4vw, 42px);
}

.pm-search__field input::placeholder {
  color: rgb(6 39 33 / 28%);
}

.pm-search__hint {
  margin-top: 20px;
  color: #5d6f6b;
  font-size: 13px;
  text-align: center;
}

/* The ✕ that clears a search box: the theme's own — a cream circle with an
   ink cross that turns green — instead of the browser's blue one. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: 12px;
  border-radius: 50%;
  background: #f5e8d3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062721' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E") center / 16px no-repeat;
  cursor: pointer;
  transition: background-color 200ms ease;
}

input[type="search"]::-webkit-search-cancel-button:hover {
  background-color: #018774;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E");
}

/* ── Labels, links and the "Explore More" button ──────────────── */

.pm-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--pm-gold);
  font-family: var(--pm-font-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.pm-eyebrow .pm-icon {
  flex: none;
  width: 6px;
  height: 6px;
}

.pm-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.pm-eyebrow a:hover {
  color: var(--pm-green);
}

.pm-article-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.14em;
  transition: color 220ms ease, text-decoration-color 220ms ease;
}

.pm-article-link:hover,
.pm-article-link:focus-visible {
  color: var(--pm-green);
  text-decoration-color: currentColor;
}

.pm-banner-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
  transition: text-decoration-color 220ms ease;
}

.pm-banner-link:hover,
.pm-banner-link:focus-visible {
  text-decoration-color: currentColor;
}

.pm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 24px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--pm-cream);
  color: var(--pm-ink);
  font-family: var(--pm-font-button);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 280ms ease, color 280ms ease;
}

a.pm-btn:hover,
a.pm-btn:focus-visible,
button.pm-btn:hover,
button.pm-btn:focus-visible {
  background: var(--pm-green);
  color: #fff;
}

.pm-btn__icon {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pm-green);
  color: #fff;
  transition: background-color 280ms ease, color 280ms ease;
}

.pm-btn__icon .pm-icon {
  width: 40px;
  height: 40px;
}

a.pm-btn:hover .pm-btn__icon,
a.pm-btn:focus-visible .pm-btn__icon,
button.pm-btn:hover .pm-btn__icon,
button.pm-btn:focus-visible .pm-btn__icon {
  background: var(--pm-cream);
  color: var(--pm-green);
}

a.pm-btn:hover .pm-btn__icon .pm-icon,
a.pm-btn:focus-visible .pm-btn__icon .pm-icon,
button.pm-btn:hover .pm-btn__icon .pm-icon,
button.pm-btn:focus-visible .pm-btn__icon .pm-icon {
  animation: pm-arrow-flight 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pm-arrow-flight {
  0% { opacity: 1; transform: translate(0, 0); }
  42% { opacity: 0; transform: translate(22px, -22px); }
  43% { opacity: 0; transform: translate(-22px, 22px); }
  100% { opacity: 1; transform: translate(0, 0); }
}

@keyframes pm-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Section headings ─────────────────────────────────────────── */

.pm-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 42px;
}

.pm-section-heading__star,
.pm-simple-heading .pm-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--pm-gold);
}

.pm-section-heading .pm-section-heading__title,
.pm-simple-heading .pm-simple-heading__title {
  margin: 0;
  color: var(--pm-gold);
  font-family: var(--pm-font-label);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.pm-section-heading .pm-section-heading__title {
  white-space: nowrap;
}

.pm-section-heading__rule {
  flex: 1;
  height: 1px;
  margin-inline: 10px;
  background: var(--pm-cream);
}

.pm-simple-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 42px;
  text-align: center;
}

.pm-simple-heading--large .pm-icon {
  width: 29px;
  height: 29px;
}

@media (max-width: 620px) {
  .pm-section-heading {
    flex-wrap: wrap;
  }

  .pm-section-heading__rule {
    order: 3;
    flex-basis: 100%;
    margin-inline: 0;
  }

  .pm-section-heading .pm-section-heading__button {
    margin-left: auto;
  }

  .pm-section-heading .pm-section-heading__title,
  .pm-simple-heading .pm-simple-heading__title {
    font-size: 20px;
    white-space: normal;
  }
}

/* ── Article cards ────────────────────────────────────────────── */

.pm-card {
  position: relative;
  min-width: 0;
}

.pm-card .pm-card__title {
  margin: 12px 0 15px;
  font-size: clamp(28px, 2.1vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.pm-card .pm-card__summary {
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 1.6;
}

.pm-card__media {
  display: block;
  border-radius: var(--pm-radius);
  overflow: hidden;
}

.pm-card .pm-card__image {
  width: 100%;
  height: 415px;
  max-width: none;
  border-radius: var(--pm-radius);
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-card:hover .pm-card__image {
  transform: scale(1.03);
}

/* Picture first, as on the archive pages. */
.pm-card--image-top {
  display: flex;
  flex-direction: column;
}

.pm-card--image-top .pm-card__media {
  order: -1;
  margin-bottom: 22px;
}

.pm-card.pm-card--image-top .pm-card__image {
  height: 280px;
}

.pm-card.pm-card--image-top .pm-card__title {
  margin: 10px 0 12px;
  font-size: clamp(24px, 1.7vw, 30px);
}

.pm-card.pm-card--image-top .pm-card__summary {
  margin-bottom: 0;
  font-size: 15px;
}

@media (max-width: 620px) {
  .pm-card .pm-card__image {
    height: 330px;
  }

  .pm-card.pm-card--image-top .pm-card__image {
    height: 240px;
  }
}

/* A row with a round picture beside the label and title. */
.pm-story {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--pm-line);
}

.pm-story__media {
  display: block;
  border-radius: 50%;
}

.pm-story .pm-story__image {
  width: 120px;
  height: 120px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}

.pm-story .pm-story__title {
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.2;
}

.pm-story .pm-story__summary {
  margin-top: 6px;
  overflow: hidden;
  color: var(--pm-body);
  font-size: 15px;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── The whole box is the link ────────────────────────────────── */

/* The title's link is stretched over its whole card or row, so a click
   anywhere opens the article, and hovering anywhere lights the title and
   slowly enlarges the picture inside its frame. */
.pm-story {
  position: relative;
}

.pm-story .pm-article-link::after,
.pm-card .pm-card__title .pm-article-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pm-story__media {
  overflow: hidden;
}

.pm-story .pm-story__image {
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-story:hover .pm-story__image,
.pm-story:focus-within .pm-story__image {
  transform: scale(1.08);
}

.pm-story:hover .pm-article-link,
.pm-card:hover .pm-card__title .pm-article-link {
  color: var(--pm-green);
  text-decoration-color: currentColor;
}

/* ── Titles and summaries that keep a row level ───────────────── */

/* In a row of articles every title takes exactly two lines (a longer one ends
   in "…", and shows whole on hover) and every summary its set number of
   lines, so the pictures and rules of a row always line up. */
.pm-story .pm-story__title,
.pm-grid .pm-card__title,
.pm-lead-grid .pm-card__title,
.pm-section .pm-card__title {
  display: -webkit-box;
  min-height: 2.4em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pm-grid .pm-card__summary,
.pm-lead-grid .pm-card__summary,
.pm-section .pm-card__summary {
  display: -webkit-box;
  min-height: 3.2em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* The placeholder picture keeps the star in the middle whatever the crop. */
img.is-placeholder {
  object-fit: cover;
  object-position: center;
}

/* ── Grids ────────────────────────────────────────────────────── */

.pm-grid {
  display: grid;
  gap: 56px 50px;
}

.pm-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .pm-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .pm-grid--3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
}

/* Two large cards beside a list of round-picture rows — the homepage's New
   Articles layout, used at the top of a chapter page. The list stretches to
   the cards' height and shares it out evenly, so its last rule meets the foot
   of their pictures. */
.pm-lead-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 70px;
}

.pm-lead-grid.has-no-list {
  grid-template-columns: minmax(0, 1fr);
}

.pm-lead-grid__cards {
  display: grid;
  grid-template-columns: repeat(var(--pm-columns, 2), minmax(0, 1fr));
  gap: 45px;
}

.pm-lead-grid__list {
  display: grid;
  grid-auto-rows: 1fr;
}

.pm-lead-grid__list .pm-story {
  align-items: center;
  padding: 18px 0;
}

.pm-lead-grid__list .pm-story .pm-story__title {
  font-size: clamp(22px, 1.46vw, 28px);
}

@media (max-width: 900px) {
  .pm-lead-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
  }
}

@media (max-width: 620px) {
  .pm-lead-grid__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-lead-grid__list .pm-story {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
  }

  .pm-lead-grid__list .pm-story .pm-story__image {
    width: 96px;
    height: 96px;
  }
}

/* ── Archive pages (category, search, 404) ────────────────────── */

.pm-archive__hero {
  padding: 96px 0 72px;
  background: linear-gradient(180deg, var(--pm-sand), rgb(244 241 222 / 0%));
}

.pm-archive__hero-inner {
  width: var(--pm-container);
  margin-inline: auto;
}

.pm-archive__title {
  max-width: 980px;
  margin: 16px 0 24px;
  font-size: clamp(46px, 5vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.pm-archive__description {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.7;
}

.pm-archive__description p {
  margin: 0 0 12px;
}

.pm-archive__count {
  margin-top: 20px;
  color: var(--pm-green);
  font-family: var(--pm-font-label);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── A page's light opening band (legal pages, sitemap, pages) ── */

/* The article page's sand band: the star lattice at the left and right,
   the title centred over plain sand. */
.pm-archive__hero--light {
  position: relative;
  isolation: isolate;
  padding: 84px 0 76px;
  background: var(--pm-sand);
  text-align: center;
}

.pm-archive__hero--light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/pattern-lattice-light.svg") center bottom / 120px 120px repeat;
  -webkit-mask-image: var(--pm-lattice-fade);
  mask-image: var(--pm-lattice-fade);
}

.pm-archive__hero--light .pm-archive__hero-inner {
  width: min(880px, 88vw);
}

.pm-archive__hero--light .pm-eyebrow {
  justify-content: center;
}

.pm-archive__hero--light .pm-archive__title {
  margin-inline: auto;
  font-size: clamp(42px, 4.4vw, 68px);
  line-height: 1.08;
}

.pm-archive__hero--light .pm-archive__title:last-child {
  margin-bottom: 0;
}

.pm-archive__hero--light .pm-archive__description {
  margin-inline: auto;
}

.pm-archive__hero--light .pm-archive__description p:last-child {
  margin-bottom: 0;
}

/* What follows the band starts clear of it. */
.pm-archive__hero--light + .pm-legal__layout,
.pm-archive__hero--light + .pm-sitemap__body {
  padding-top: 64px;
}

.pm-page .pm-archive__hero--light ~ .pm-article__figure,
.pm-page .pm-archive__hero--light + .pm-prose {
  margin-top: 56px;
}

@media (max-width: 620px) {
  .pm-archive__hero--light {
    padding: 56px 0 52px;
  }

  .pm-archive__hero--light + .pm-legal__layout,
  .pm-archive__hero--light + .pm-sitemap__body {
    padding-top: 44px;
  }
}

/* ── A chapter's opening band (dark, with Islamic ornament) ───── */

.pm-archive__hero--chapter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 104px 0 100px;
  background:
    radial-gradient(ellipse 55% 95% at 82% 45%, rgb(1 135 116 / 38%), transparent 70%),
    linear-gradient(155deg, #0b3b32 0%, var(--pm-ink) 52%, #041a16 100%);
  color: #fff;
}

/* The star lattice: strongest on the right, fading out behind the words. */
.pm-archive__hero--chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../images/pattern-lattice.svg") center / 120px 120px repeat;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, rgb(0 0 0 / 45%) 42%, #000 82%);
  mask-image: linear-gradient(90deg, transparent 8%, rgb(0 0 0 / 45%) 42%, #000 82%);
}

/* A fine gold rule along the foot of the band. */
.pm-archive__hero--chapter::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pm-gold) 25%, var(--pm-gold) 75%, transparent);
  opacity: 0.75;
}

/* The rosette of nested stars, turning very slowly, with the chapter's
   number at its heart. */
.pm-archive__rosette {
  position: absolute;
  top: 50%;
  right: max(5vw, calc((100vw - 1676px) / 2));
  z-index: -1;
  display: grid;
  place-items: center;
  width: clamp(280px, 30vw, 460px);
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.pm-archive__rosette::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/rosette.svg") center / contain no-repeat;
  opacity: 0.6;
  animation: pm-rosette-turn 180s linear infinite;
}

@keyframes pm-rosette-turn {
  to { transform: rotate(360deg); }
}

.pm-archive__numeral {
  position: relative;
  color: #e2c28f;
  font-family: var(--pm-font-heading);
  font-size: clamp(46px, 5vw, 80px);
  line-height: 1;
  letter-spacing: 0.02em;
}

.pm-archive__hero--chapter .pm-archive__title {
  max-width: min(900px, 58%);
  color: #fff;
}

.pm-archive__hero--chapter .pm-archive__description {
  max-width: 620px;
  color: rgb(255 255 255 / 78%);
}

.pm-archive__hero--chapter .pm-eyebrow {
  color: #e2c28f;
}

.pm-archive__hero--chapter .pm-breadcrumbs li {
  color: rgb(255 255 255 / 60%);
}

.pm-archive__hero--chapter .pm-breadcrumbs a:hover {
  color: #e2c28f;
}

.pm-archive__hero--chapter .pm-breadcrumbs [aria-current] {
  color: #fff;
}

/* The article count as a gold-edged pill. */
.pm-archive__hero--chapter .pm-archive__count {
  display: inline-flex;
  margin-top: 30px;
  padding: 8px 18px;
  border: 1px solid rgb(226 194 143 / 45%);
  border-radius: 999px;
  color: #e2c28f;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.pm-archive__hero--chapter + .pm-archive__featured,
.pm-archive__hero--chapter + .pm-archive__list {
  padding-top: 72px;
}

@media (max-width: 900px) {
  .pm-archive__hero--chapter {
    padding: 72px 0 64px;
  }

  .pm-archive__rosette {
    top: 24px;
    right: -70px;
    width: 300px;
    transform: none;
  }

  .pm-archive__rosette::before {
    opacity: 0.35;
  }

  .pm-archive__numeral {
    opacity: 0.5;
  }

  .pm-archive__hero--chapter .pm-archive__title {
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .pm-archive__rosette {
    top: -40px;
    right: -110px;
    width: 280px;
  }

  .pm-archive__numeral {
    display: none;
  }
}

.pm-archive__featured,
.pm-archive__list {
  width: var(--pm-container);
  margin: 0 auto;
  padding: 40px 0 90px;
}

.pm-archive__featured + .pm-archive__list {
  padding-top: 0;
}

.pm-empty {
  max-width: 640px;
  margin-bottom: 20px;
  font-size: 18px;
}

.pm-chapter-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.pm-chapter-links a {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--pm-cream);
  color: var(--pm-ink);
  font-family: var(--pm-font-display);
  font-size: 17px;
  text-decoration: none;
  transition: background-color 220ms ease, color 220ms ease;
}

.pm-chapter-links a:hover {
  background: var(--pm-green);
  color: #fff;
}

.pm-searchform {
  display: flex;
  max-width: 560px;
  margin-top: 28px;
  border-bottom: 2px solid var(--pm-ink);
}

.pm-searchform input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--pm-ink);
  font-family: var(--pm-font-heading);
  font-size: 26px;
}

.pm-searchform button {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--pm-ink);
}

.pm-searchform .pm-icon {
  width: 26px;
  height: 26px;
}

.pm-pagination {
  margin-top: 72px;
}

.pm-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--pm-cream);
  border-radius: 999px;
  color: var(--pm-ink);
  font-family: var(--pm-font-button);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.pm-pagination a.page-numbers:hover,
.pm-pagination .page-numbers.current {
  border-color: var(--pm-green);
  background: var(--pm-green);
  color: #fff;
}

.pm-pagination .pm-icon {
  width: 20px;
  height: 20px;
}

/* ── A single article ─────────────────────────────────────────── */

.pm-article__header {
  width: min(900px, 88vw);
  margin: 0 auto;
  padding: 90px 0 48px;
}

.pm-article__title {
  margin: 16px 0 24px;
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.pm-article__lead {
  margin-bottom: 24px;
  font-size: 21px;
  line-height: 1.65;
}

.pm-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #5d6f6b;
  font-size: 15px;
}

.pm-article__figure {
  width: min(1100px, 92vw);
  margin: 0 auto 64px;
}

.pm-article__figure .pm-article__image {
  width: 100%;
  max-height: 640px;
  border-radius: var(--pm-radius);
  object-fit: cover;
}

.pm-article__figure figcaption {
  margin-top: 12px;
  color: #5d6f6b;
  font-size: 14px;
  text-align: center;
}

.pm-prose {
  width: min(760px, 88vw);
  margin: 0 auto;
  padding-bottom: 40px;
  color: var(--pm-body);
  font-size: 18px;
  line-height: 1.85;
}

.pm-prose > * + * {
  margin-top: 1.25em;
}

.pm-prose p {
  margin-bottom: 0;
}

.pm-prose h2 {
  margin-top: 2.2em;
  font-size: clamp(30px, 2.4vw, 38px);
  line-height: 1.2;
}

.pm-prose h3 {
  margin-top: 1.8em;
  font-size: clamp(24px, 1.8vw, 28px);
  line-height: 1.25;
}

.pm-prose h4 {
  margin-top: 1.6em;
  font-family: var(--pm-font-label);
  font-size: 18px;
  font-weight: 700;
}

.pm-prose a {
  color: var(--pm-green);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
}

.pm-prose blockquote {
  margin: 2em 0;
  padding-left: 28px;
  border-left: 3px solid var(--pm-gold);
  color: var(--pm-ink);
  font-family: var(--pm-font-quote);
  font-size: 23px;
  font-style: italic;
  line-height: 1.6;
}

.pm-prose blockquote p {
  margin: 0;
}

.pm-prose blockquote cite {
  display: block;
  margin-top: 12px;
  color: var(--pm-green);
  font-size: 17px;
}

.pm-prose ul,
.pm-prose ol {
  padding-left: 1.3em;
}

.pm-prose li + li {
  margin-top: 0.4em;
}

.pm-prose li::marker {
  color: var(--pm-gold);
}

.pm-prose img {
  border-radius: 16px;
}

.pm-prose [lang="ar"],
.pm-prose .arabic {
  font-family: var(--pm-font-arabic);
  font-size: 1.4em;
  direction: rtl;
}

.pm-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: min(760px, 88vw);
  margin: 0 auto;
  padding-bottom: 40px;
}

.pm-article__tags a {
  color: var(--pm-green);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* ── The article page: text at the picture's width ────────────── */

/* The header, the picture and the text all share the picture's width. A sand
   band runs behind the header and on, edge to edge, behind the top third of
   the picture. */
.pm-single .pm-article__top {
  position: relative;
  isolation: isolate;
  background: var(--pm-sand);
}

/* The chapter pages' star lattice, in a faint gold, at the left and right
   only: it fades into plain sand across the middle 880px, where the centred
   heading sits, so the text reads on a clean ground. The fade is measured
   from the page's centre, and the lattice is drawn twice — on the band behind
   the header (anchored to its foot) and on the band behind the picture
   (anchored to its top) — so the two meet without a seam. On a phone the
   heading spans the screen and the band stays plain. */
.pm-single .pm-article__top::before,
.pm-single .pm-article__picture::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-image: url("../images/pattern-lattice-light.svg");
  background-repeat: repeat;
  background-size: 120px 120px;
  -webkit-mask-image: var(--pm-lattice-fade);
  mask-image: var(--pm-lattice-fade);
}

.pm-single .pm-article__top::before {
  inset: 0;
  background-position: center bottom;
}

.pm-single .pm-article__picture::after {
  top: 0;
  left: 50%;
  width: 100vw;
  height: 33.333%;
  background-position: center top;
  transform: translateX(-50%);
}

.pm-single .pm-article__header {
  width: min(1100px, 92vw);
  padding: 44px 0 56px;
}

.pm-single .pm-article__title {
  max-width: 1000px;
}

.pm-single .pm-article__lead {
  max-width: 840px;
}

/* Breadcrumbs, chapter, title, lead and date centred over the picture. */
.pm-single .pm-article__header {
  text-align: center;
}

.pm-single .pm-article__header .pm-breadcrumbs ol,
.pm-single .pm-article__header .pm-eyebrow,
.pm-single .pm-article__header .pm-article__meta {
  justify-content: center;
}

.pm-single .pm-article__header .pm-article__title,
.pm-single .pm-article__header .pm-article__lead {
  margin-inline: auto;
}

.pm-single .pm-article__figure {
  margin-bottom: 72px;
}

.pm-single .pm-article__picture {
  position: relative;
}

.pm-single .pm-article__picture::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: calc(33.333% + 1px);
  background: var(--pm-sand);
  transform: translateX(-50%);
}

/* The text runs the full width of the picture. The gold "On this page" box
   stands outside it, in the right-hand margin, and follows the reader down
   the article. */
.pm-single .pm-article__layout {
  position: relative;
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding-bottom: 48px;
}

.pm-single .pm-prose,
.pm-single .pm-article__tags {
  width: auto;
  max-width: none;
  margin: 0;
}

.pm-single .pm-prose h2 {
  scroll-margin-top: 24px;
}

/* A column as tall as the article, in the margin to the right of the text;
   the box inside it sticks to the top of the screen while it scrolls. */
.pm-article__aside {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + 48px);
  width: min(300px, calc((100vw - 100%) / 2 - 80px));
}

.pm-article__contents {
  position: sticky;
  top: 32px;
  padding: 28px;
  border-radius: 20px;
  background: var(--pm-sand);
}

.pm-article__contents-title {
  margin-bottom: 14px;
  color: var(--pm-gold);
  font-family: var(--pm-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pm-article__contents ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pm-contents;
}

.pm-article__contents li {
  display: flex;
  gap: 12px;
  counter-increment: pm-contents;
  font-size: 15px;
  line-height: 1.45;
}

.pm-article__contents li::before {
  content: counter(pm-contents, decimal-leading-zero);
  flex: none;
  color: var(--pm-gold);
  font-family: var(--pm-font-label);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
}

.pm-article__contents a {
  color: var(--pm-body);
  text-decoration: none;
  transition: color 200ms ease;
}

.pm-article__contents a:hover {
  color: var(--pm-green);
}

/* Where the margin is too narrow to hold the box (below 1700px), it sits
   above the text instead, its sections set out in columns. */
@media (max-width: 1699px) {
  .pm-single .pm-article__layout.has-contents {
    display: flex;
    flex-direction: column;
    gap: 44px;
  }

  .pm-article__aside {
    position: static;
    order: -1;
    width: auto;
  }

  .pm-article__contents {
    position: static;
  }

  .pm-article__contents ol {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    column-gap: 32px;
  }
}

/* ── Breadcrumbs ──────────────────────────────────────────────── */

.pm-breadcrumbs {
  margin-bottom: 22px;
  font-size: 13px;
  line-height: 1.5;
}

.pm-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: #5d6f6b;
}

/* A small gold chevron between the steps. */
.pm-breadcrumbs li + li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 12px 0 8px;
  border-top: 1.5px solid var(--pm-gold);
  border-right: 1.5px solid var(--pm-gold);
  transform: rotate(45deg);
}

.pm-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}

.pm-breadcrumbs a:hover {
  color: var(--pm-green);
}

.pm-breadcrumbs [aria-current] {
  overflow: hidden;
  max-width: 48ch;
  color: var(--pm-ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-related {
  width: var(--pm-container);
  margin: 0 auto;
  padding: 70px 0 90px;
  border-top: 1px solid var(--pm-line);
}

/* ── Comments ─────────────────────────────────────────────────── */

/* At the picture's width under the article: the comments as cards, replies
   stepped in under a gold rule, then the reply form as a sand card with a
   faint star lattice in its corner. */
.pm-comments {
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding: 32px 0 90px;
}

.pm-comment-list,
.pm-comment-list .children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-comment-list {
  display: grid;
  gap: 20px;
  margin-bottom: 56px;
}

.pm-comment-list .children {
  display: grid;
  gap: 20px;
  margin: 20px 0 0 36px;
  padding-left: 28px;
  border-left: 2px solid rgb(183 143 80 / 35%);
}

.pm-comment__card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding: 28px 32px;
  border: 1px solid var(--pm-line);
  border-radius: 20px;
  background: #fff;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.pm-comment__card:hover {
  border-color: rgb(183 143 80 / 45%);
  box-shadow: 0 18px 40px rgb(31 80 61 / 8%);
}

.bypostauthor > .pm-comment__card {
  background: #fcfbf5;
}

.pm-comment .pm-comment__image {
  width: 56px;
  height: 56px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--pm-cream);
}

.pm-comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 10px;
}

.pm-comment__author {
  color: var(--pm-ink);
  font-family: var(--pm-font-heading);
  font-size: 21px;
  line-height: 1.2;
}

.pm-comment__author a {
  color: inherit;
  text-decoration: none;
}

.pm-comment__author a:hover {
  color: var(--pm-green);
}

.pm-comment__badge {
  align-self: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--pm-green);
  color: #fff;
  font-family: var(--pm-font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

.pm-comment__date {
  color: #5d6f6b;
  font-size: 13px;
  text-decoration: none;
}

.pm-comment__date:hover {
  color: var(--pm-green);
}

.pm-comment__pending {
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--pm-sand);
  color: #8a6a37;
  font-size: 13px;
}

.pm-comment__text {
  color: var(--pm-body);
  font-size: 16px;
  line-height: 1.75;
}

.pm-comment__text p {
  margin: 0 0 0.8em;
}

.pm-comment__text p:last-child {
  margin-bottom: 0;
}

.pm-comment__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
  font-family: var(--pm-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pm-comment__actions a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pm-green);
  text-decoration: none;
  transition: color 200ms ease;
}

.pm-comment__actions a:hover {
  color: var(--pm-ink);
}

.pm-comment__actions .pm-icon {
  width: 22px;
  height: 22px;
  margin: -4px -2px -4px -6px;
}

.pm-comment__actions .comment-edit-link {
  color: #5d6f6b;
}

.pm-comments__closed {
  margin-bottom: 40px;
  color: #5d6f6b;
}

.pm-comments__pagination {
  margin: -24px 0 48px;
}

/* The reply form. */
.pm-respond {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 48px 52px;
  border-radius: 28px;
  background: var(--pm-sand);
}

.pm-respond::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/pattern-lattice.svg") right top / 120px 120px repeat;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 0, transparent 55%);
  mask-image: radial-gradient(circle at 100% 0, #000 0, transparent 55%);
}

/* Replying to one comment: the form moves under it. */
.pm-comment-list .pm-respond {
  margin-top: 20px;
}

.pm-respond .pm-respond__title {
  margin-bottom: 8px;
  font-size: clamp(30px, 2.4vw, 40px);
  line-height: 1.15;
}

.pm-respond__cancel a {
  margin-left: 12px;
  color: var(--pm-green);
  font-family: var(--pm-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
}

.pm-respond__note {
  margin-bottom: 28px;
  color: #5d6f6b;
  font-size: 14px;
}

.pm-respond__note a {
  color: var(--pm-green);
}

.pm-comment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.pm-comment-form > * {
  grid-column: 1 / -1;
  margin: 0;
}

.pm-comment-form > .comment-form-author,
.pm-comment-form > .comment-form-email {
  grid-column: auto;
}

.pm-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--pm-ink);
  font-family: var(--pm-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.pm-field__required {
  color: var(--pm-gold);
}

.pm-field input[type="text"],
.pm-field input[type="email"],
.pm-field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgb(6 39 33 / 12%);
  border-radius: 14px;
  outline: none;
  background: #fff;
  color: var(--pm-ink);
  font-family: var(--pm-font-body);
  font-size: 16px;
  line-height: 1.6;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.pm-field textarea {
  min-height: 170px;
  resize: vertical;
}

.pm-field input::placeholder,
.pm-field textarea::placeholder {
  color: rgb(6 39 33 / 35%);
}

.pm-field input[type="text"]:focus,
.pm-field input[type="email"]:focus,
.pm-field textarea:focus {
  border-color: var(--pm-green);
  box-shadow: 0 0 0 4px rgb(1 135 116 / 12%);
}

.pm-field--check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pm-field--check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--pm-green);
}

.pm-field--check label {
  margin: 0;
  color: var(--pm-body);
  font-family: var(--pm-font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
}

.pm-respond__submit {
  margin-top: 6px;
}

button.pm-btn {
  border: 0;
  cursor: pointer;
}

@media (max-width: 620px) {
  .pm-comment__card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 20px;
  }

  .pm-comment .pm-comment__image {
    width: 44px;
    height: 44px;
  }

  .pm-comment-list .children {
    margin-left: 10px;
    padding-left: 14px;
  }

  .pm-respond {
    padding: 32px 22px;
    border-radius: 22px;
  }

  .pm-comment-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A page that is not built in Elementor. */
.pm-page .pm-article__header {
  padding-bottom: 32px;
}

/* ── Newsletter (Simple Newsletter plugin) ────────────────────── */

/* The newsletter page: a sand band with the star lattice at its sides, an
   envelope crest, the message centred and the form on a white card. */
.pm-newsletter__hero {
  position: relative;
  isolation: isolate;
  padding: 72px 0 96px;
  background: var(--pm-sand);
}

.pm-newsletter__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/pattern-lattice-light.svg") center top / 120px 120px repeat;
  -webkit-mask-image: var(--pm-lattice-fade);
  mask-image: var(--pm-lattice-fade);
}

.pm-newsletter__inner {
  width: min(720px, 88vw);
  margin: 0 auto;
  text-align: center;
}

/* A green medallion ringed in gold, like a wax seal on the envelope. */
.pm-newsletter__crest {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--pm-green);
  color: #fff;
  box-shadow: 0 0 0 8px var(--pm-sand), 0 0 0 9px rgb(183 143 80 / 55%), 0 22px 44px rgb(1 135 116 / 22%);
}

.pm-newsletter__crest .pm-icon {
  width: 36px;
  height: 36px;
}

.pm-newsletter .pm-newsletter__eyebrow {
  justify-content: center;
  margin-bottom: 14px;
}

.pm-newsletter .snl-status {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.pm-newsletter .snl-status .snl-status__title,
.pm-newsletter .pm-newsletter__title {
  margin: 0 0 16px;
  color: var(--pm-ink);
  font-family: var(--pm-font-heading);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.pm-newsletter .snl-status__message {
  max-width: 560px;
  margin: 0 auto;
  color: var(--pm-body);
  font-size: 19px;
  line-height: 1.65;
}

.pm-newsletter .snl-status__form {
  max-width: 620px;
  margin: 40px auto 0;
  padding: 36px 40px 30px;
  border-radius: var(--pm-radius);
  background: var(--pm-paper);
  box-shadow: var(--pm-shadow);
  text-align: left;
}

.pm-newsletter .snl-status__hint {
  margin: 0 0 22px;
  color: #5d6f6b;
  text-align: center;
  opacity: 1;
}

.pm-newsletter .snl-status__actions {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* On the card the two fields share a row and the button runs underneath. */
.pm-newsletter .newsletter-field--submit {
  flex: 1 0 100%;
}

.pm-newsletter .newsletter-form .newsletter-button {
  width: 100%;
}

.pm-newsletter .snl-status__form .newsletter-privacy {
  text-align: center;
}

.pm-newsletter .pm-newsletter__latest {
  border-top: 0;
}

@media (max-width: 620px) {
  .pm-newsletter__hero {
    padding: 52px 0 68px;
  }

  .pm-newsletter .snl-status__message {
    font-size: 17px;
  }

  .pm-newsletter .snl-status__form {
    padding: 28px 22px 24px;
  }
}

/* The plugin's form wherever it appears ([newsletter_form], the newsletter
   page): the comment form's fields and the site's green pill button. The
   plugin's stylesheet loads after this one, hence "body" in front. */
body .newsletter-form .newsletter-fields {
  gap: 16px;
}

body .newsletter-form .newsletter-field {
  gap: 8px;
}

body .newsletter-form .newsletter-label {
  color: var(--pm-ink);
  font-family: var(--pm-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

body .newsletter-form .newsletter-required {
  color: var(--pm-gold);
}

body .newsletter-form .newsletter-input {
  min-height: 54px;
  padding: 14px 18px;
  border: 1px solid rgb(6 39 33 / 12%);
  border-radius: 14px;
  background: #fff;
  color: var(--pm-ink);
  font-family: var(--pm-font-body);
  font-size: 16px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

body .newsletter-form .newsletter-input:focus {
  outline: none;
  border-color: var(--pm-green);
  box-shadow: 0 0 0 4px rgb(1 135 116 / 12%);
}

body .newsletter-form .newsletter-button {
  min-height: 54px;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--pm-green);
  color: #fff;
  font-family: var(--pm-font-button);
  font-size: 16px;
  font-weight: 600;
  transition: background-color 280ms ease;
}

body .newsletter-form .newsletter-button:hover,
body .newsletter-form .newsletter-button:focus-visible {
  opacity: 1;
  background: var(--pm-ink);
  color: #fff;
}

body .newsletter-form .newsletter-message {
  color: var(--pm-green-dark);
  font-weight: 600;
}

body .newsletter-form .newsletter-message.is-error {
  color: #b3261e;
}

body .newsletter-form .newsletter-privacy {
  margin-top: 16px;
  color: #5d6f6b;
  font-size: 13px;
  opacity: 1;
}

body .newsletter-form .newsletter-privacy a {
  color: var(--pm-green);
}

/* The thank-you pop-up: a white card whose head is sand with the star
   lattice fading out, a green seal ringed in gold, the title over a gold
   star between two fine lines, and the site's green pill button. */
body .snl-popup {
  width: 460px;
  color: var(--pm-body);
  font-family: var(--pm-font-body);
}

body .snl-popup::backdrop {
  background: rgb(6 39 33 / 62%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

body .snl-popup.is-open {
  box-shadow: 0 0 0 100vmax rgb(6 39 33 / 62%);
}

body .snl-popup .snl-popup__box {
  isolation: isolate;
  overflow: hidden;
  padding: 54px 40px 38px;
  border-radius: var(--pm-radius);
  background: var(--pm-paper);
  box-shadow: 0 40px 80px rgb(6 39 33 / 28%);
}

body .snl-popup .snl-popup__box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 170px;
  background: url("../images/pattern-lattice-light.svg") center top / 120px 120px repeat, var(--pm-sand);
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
  mask-image: linear-gradient(#000 35%, transparent);
}

body .snl-popup .snl-popup__icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 24px;
  background: var(--pm-green);
  color: #fff;
  box-shadow: 0 0 0 7px var(--pm-paper), 0 0 0 8px rgb(183 143 80 / 55%), 0 18px 36px rgb(1 135 116 / 25%);
}

body .snl-popup[data-state="alert"] .snl-popup__icon {
  background: var(--pm-gold);
  box-shadow: 0 0 0 7px var(--pm-paper), 0 0 0 8px rgb(183 143 80 / 55%), 0 18px 36px rgb(183 143 80 / 30%);
}

body .snl-popup .snl-popup__svg {
  width: 32px;
  height: 32px;
}

body .snl-popup .snl-popup__title {
  margin: 0;
  color: var(--pm-ink);
  font-family: var(--pm-font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

body .snl-popup .snl-popup__title::after {
  content: "\2726";
  display: block;
  width: 132px;
  margin: 14px auto 16px;
  background:
    linear-gradient(90deg, rgb(183 143 80 / 0%), rgb(183 143 80 / 60%)) left center / 50px 1px no-repeat,
    linear-gradient(90deg, rgb(183 143 80 / 60%), rgb(183 143 80 / 0%)) right center / 50px 1px no-repeat;
  color: var(--pm-gold);
  font-family: var(--pm-font-body);
  font-size: 13px;
  line-height: 1;
}

body .snl-popup .snl-popup__message {
  margin: 0 0 30px;
  color: var(--pm-body);
  font-size: 16px;
  line-height: 1.7;
}

body .snl-popup .snl-popup__button {
  min-width: 160px;
  min-height: 52px;
  padding: 14px 34px;
  border-radius: 999px;
  background: var(--pm-green);
  color: #fff;
  font-family: var(--pm-font-button);
  font-size: 16px;
  font-weight: 600;
  transition: background-color 280ms ease;
}

body .snl-popup .snl-popup__button:hover,
body .snl-popup .snl-popup__button:focus-visible {
  opacity: 1;
  background: var(--pm-ink);
  color: #fff;
}

body .snl-popup .snl-popup__close {
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0 0 2px;
  border-radius: 50%;
  background: var(--pm-paper);
  color: var(--pm-ink);
  font-size: 22px;
  box-shadow: 0 4px 14px rgb(6 39 33 / 10%);
  transition: background-color 200ms ease, color 200ms ease;
}

body .snl-popup .snl-popup__close:hover,
body .snl-popup .snl-popup__close:focus-visible {
  background: var(--pm-green);
  color: #fff;
}

@media (max-width: 480px) {
  body .snl-popup .snl-popup__box {
    padding: 48px 24px 30px;
  }

  body .snl-popup .snl-popup__title {
    font-size: 27px;
  }
}

/* ── Page not found (404) ─────────────────────────────────────── */

/* The sand band with the lattice at its sides; a gold 404 at the heart of
   the chapter pages' rosette, turning slowly. */
.pm-404__hero {
  position: relative;
  isolation: isolate;
  padding: 56px 0 92px;
  background: var(--pm-sand);
  text-align: center;
}

.pm-404__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/pattern-lattice-light.svg") center top / 120px 120px repeat;
  -webkit-mask-image: var(--pm-lattice-fade);
  mask-image: var(--pm-lattice-fade);
}

.pm-404__inner {
  width: min(780px, 88vw);
  margin: 0 auto;
}

.pm-404__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(210px, 22vw, 290px);
  aspect-ratio: 1;
  margin: 0 auto 10px;
}

.pm-404__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/rosette.svg") center / contain no-repeat;
  opacity: 0.75;
  animation: pm-rosette-turn 180s linear infinite;
}

/* The widget's "Turning rosette" switched off. */
.pm-404__mark--plain {
  width: auto;
  aspect-ratio: auto;
  margin-bottom: 18px;
}

.pm-404__mark--plain::before {
  display: none;
}

.pm-404__code {
  position: relative;
  color: var(--pm-gold);
  font-family: var(--pm-font-heading);
  font-size: clamp(60px, 6vw, 88px);
  line-height: 1;
  letter-spacing: 0.04em;
}

.pm-404 .pm-404__eyebrow {
  justify-content: center;
}

.pm-404__title {
  margin: 14px 0 18px;
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.pm-404__text {
  max-width: 600px;
  margin: 0 auto;
  color: var(--pm-body);
  font-size: 18px;
  line-height: 1.7;
}

/* The search box as a white pill with a green round button. */
.pm-404 .pm-searchform {
  align-items: center;
  max-width: 560px;
  margin: 34px auto 0;
  padding: 6px 6px 6px 26px;
  border: 1px solid rgb(6 39 33 / 10%);
  border-radius: 999px;
  background: var(--pm-paper);
  box-shadow: var(--pm-shadow);
}

.pm-404 .pm-searchform input {
  padding: 10px 0;
  font-size: 20px;
}

.pm-404 .pm-searchform button {
  display: grid;
  flex: none;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 50%;
  background: var(--pm-green);
  color: #fff;
  transition: background-color 220ms ease;
}

.pm-404 .pm-searchform button:hover,
.pm-404 .pm-searchform button:focus-visible {
  background: var(--pm-ink);
}

.pm-404 .pm-searchform .pm-icon {
  width: 22px;
  height: 22px;
}

.pm-404__label {
  margin: 40px 0 0;
  color: var(--pm-gold);
  font-family: var(--pm-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pm-404 .pm-chapter-links {
  justify-content: center;
  margin-top: 16px;
}

.pm-404 .pm-chapter-links a {
  border: 1px solid #e8dfc7;
  background: var(--pm-paper);
}

.pm-404 .pm-chapter-links a:hover {
  border-color: var(--pm-green);
}

.pm-404__home {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pm-404 .pm-404__latest {
  border-top: 0;
}

@media (max-width: 620px) {
  .pm-404__hero {
    padding: 40px 0 64px;
  }

  .pm-404__text {
    font-size: 17px;
  }

  .pm-404 .pm-searchform input {
    font-size: 18px;
  }
}

/* ── Under construction ───────────────────────────────────────── */

/* The chapter pages' dark green band: the gold lattice at the sides, the
   rosette turning slowly behind everything, the words in the middle, and a
   saying of the Prophet ﷺ on a gold-edged card. Fills the screen when the
   whole site is closed (--full). */
.pm-construction {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0 104px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 38%, rgb(1 135 116 / 30%), transparent 70%),
    linear-gradient(160deg, #0b3b32 0%, var(--pm-ink) 52%, #041a16 100%);
  color: rgb(255 255 255 / 78%);
  text-align: center;
}

.pm-construction::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../images/pattern-lattice.svg") center / 120px 120px repeat;
  opacity: 0.22;
  -webkit-mask-image: var(--pm-lattice-fade);
  mask-image: var(--pm-lattice-fade);
}

.pm-construction--full {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 56px 0 64px;
}

/* The widget's "Gold lattice at the sides" switched off. */
.pm-construction--plain::before {
  display: none;
}

.pm-construction__inner {
  width: min(760px, 88vw);
  margin: 0 auto;
}

.pm-construction__logo {
  display: inline-block;
  margin-bottom: 36px;
}

.pm-construction__logo img {
  display: block;
  width: auto;
  height: 132px;
}

.pm-construction .pm-construction__eyebrow {
  justify-content: center;
  color: #e2c28f;
}

.pm-construction__title {
  margin: 14px 0 18px;
  color: #fff;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.pm-construction__text {
  max-width: 600px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.75;
}

.pm-construction__saying {
  position: relative;
  max-width: 660px;
  margin: 64px auto 0;
  padding: 50px 44px 34px;
  border: 1px solid rgb(201 164 103 / 45%);
  border-radius: var(--pm-radius);
  background: rgb(255 255 255 / 4%);
  box-shadow: inset 0 0 0 6px rgb(255 255 255 / 2%);
}

/* The gold quotation seal on the card's top edge. */
.pm-construction__mark {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--pm-gold);
  color: var(--pm-ink);
  box-shadow: 0 0 0 6px #072b24;
  transform: translate(-50%, -50%);
}

.pm-construction__mark .pm-icon {
  width: 20px;
  height: 17px;
}

.pm-construction__arabic {
  margin: 0;
  color: #e2c28f;
  font-family: var(--pm-font-arabic);
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.9;
}

.pm-construction__english {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
}

.pm-construction__english p {
  margin: 0;
  color: #fff;
  font-family: var(--pm-font-quote);
  font-size: clamp(18px, 1.5vw, 21px);
  font-style: italic;
  line-height: 1.7;
}

/* "Prophet Muhammad ﷺ", centred under the saying. */
.pm-construction__source {
  margin-top: 22px;
  color: #c9a467;
  font-family: var(--pm-font-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.pm-construction__signup {
  max-width: 520px;
  margin: 52px auto 0;
}

.pm-construction__signup-title {
  margin: 0 0 16px;
  color: #fff;
  font-family: var(--pm-font-heading);
  font-size: 22px;
}

.pm-construction .newsletter-form .newsletter-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.pm-construction .newsletter-form .newsletter-input {
  border-color: rgb(255 255 255 / 18%);
  background: rgb(255 255 255 / 8%);
  color: #fff;
}

.pm-construction .newsletter-form .newsletter-input::placeholder {
  color: rgb(255 255 255 / 55%);
}

.pm-construction .newsletter-form .newsletter-button:hover,
.pm-construction .newsletter-form .newsletter-button:focus-visible {
  background: var(--pm-gold);
}

.pm-construction .newsletter-form .newsletter-privacy,
.pm-construction .newsletter-form .newsletter-message {
  color: rgb(255 255 255 / 60%);
}

.pm-construction .newsletter-form .newsletter-privacy a {
  color: #e2c28f;
}

.pm-construction__contact {
  margin: 40px 0 0;
  font-size: 14px;
}

.pm-construction__contact a {
  color: #e2c28f;
  font-weight: 600;
  text-decoration: none;
}

.pm-construction__contact a:hover {
  color: #fff;
}

@media (max-width: 620px) {
  .pm-construction {
    padding: 64px 0 72px;
  }

  .pm-construction__logo img {
    height: 104px;
  }

  .pm-construction__text {
    font-size: 17px;
  }

  .pm-construction__saying {
    margin-top: 52px;
    padding: 42px 22px 28px;
  }
}

/* ── Footer, when the Site Footer template is not built yet ───── */

.pm-footer-fallback {
  padding: 56px 0;
  background: var(--pm-ink);
  color: rgb(255 255 255 / 70%);
}

.pm-footer-fallback__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: var(--pm-container);
  margin: 0 auto;
  text-align: center;
}

.pm-footer-fallback__logo img {
  width: 130px;
  height: 135px;
}

.pm-footer-fallback__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}

.pm-footer-fallback__nav a {
  color: rgb(255 255 255 / 75%);
  font-family: var(--pm-font-display);
  font-size: 18px;
  text-decoration: none;
}

.pm-footer-fallback__nav a:hover {
  color: #fff;
}

.pm-footer-fallback__copy {
  color: rgb(255 255 255 / 40%);
  font-size: 13px;
}

/* ── Sitemap page ─────────────────────────────────────────────── */

.pm-sitemap__body {
  width: var(--pm-container);
  margin: 0 auto;
  padding: 24px 0 100px;
}

.pm-sitemap__intro {
  width: auto;
  max-width: 760px;
  margin: 0 0 48px;
}

.pm-sitemap__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 48px;
}

.pm-sitemap__block {
  padding-top: 24px;
  border-top: 1px solid var(--pm-line);
}

.pm-sitemap__number {
  margin-bottom: 4px;
  color: var(--pm-gold);
  font-family: var(--pm-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.pm-sitemap .pm-sitemap__heading {
  margin-bottom: 18px;
  font-size: 30px;
  line-height: 1.2;
}

.pm-sitemap__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-sitemap__list a {
  color: var(--pm-body);
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 200ms ease;
}

.pm-sitemap__list a:hover {
  color: var(--pm-green);
}

.pm-sitemap__empty {
  color: #6b7c78;
  font-size: 14px;
  font-style: italic;
}

@media (max-width: 1100px) {
  .pm-sitemap__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .pm-sitemap__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Legal page (terms, privacy) ──────────────────────────────── */

.pm-legal__layout {
  width: min(1080px, 88vw);
  margin: 0 auto;
  padding: 24px 0 100px;
}

.pm-legal__layout.has-contents {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.pm-legal__contents {
  position: sticky;
  top: 32px;
  padding: 24px;
  border-radius: 16px;
  background: var(--pm-sand);
}

.pm-legal__contents-title {
  margin-bottom: 12px;
  color: var(--pm-gold);
  font-family: var(--pm-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pm-legal__contents ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2em;
  color: var(--pm-gold);
  font-size: 14px;
}

.pm-legal__contents a {
  color: var(--pm-body);
  text-decoration: none;
}

.pm-legal__contents a:hover {
  color: var(--pm-green);
}

.pm-legal .pm-legal__body {
  width: auto;
  margin: 0;
}

.pm-legal__body h2 {
  scroll-margin-top: 24px;
}

@media (max-width: 900px) {
  .pm-legal__layout.has-contents {
    display: block;
  }

  .pm-legal__contents {
    position: static;
    margin-bottom: 40px;
  }
}

/* ── Fading in as the page scrolls ────────────────────────────── */

/* Switched on and off in Settings → PM Site Setup → Animations. main.js marks
   the pieces of each section and reveals them as they come into view, one
   after another; without JavaScript nothing is ever hidden. */
.pm-js .pm-reveal-on .pm-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--pm-reveal-delay, 0ms);
}

.pm-js .pm-reveal-on .pm-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ── Reduced motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}