/* ============================================================
   PASAJCAP — library blocks (v3)
   Optional, general-purpose blocks for editors. Built entirely on the
   design tokens in main.css (--paper/--ink/--accent/--serif/…) so they
   match the home page. Class prefix: .pjcb-
   ============================================================ */

/* ---------- 1. Section Heading ---------- */
.pjcb-heading .pjcb-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: end;
}
.pjcb-head-intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 22px 0 0;
}
.pjcb-heading.is-center .pjcb-head {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 22px;
  max-width: 820px;
  margin: 0 auto;
}
.pjcb-heading.is-center .sec-no { justify-content: center; }
.pjcb-heading.is-center .sec-title { max-width: none; }
.pjcb-heading.is-center .pjcb-head-intro { margin-left: auto; margin-right: auto; }

/* ---------- 2. Text Block ---------- */
.pjcb-prose-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 6vw, 100px);
}
.pjcb-prose-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 14px 0 0;
}
.pjcb-prose-title em { font-style: italic; color: var(--accent); }
.pjcb-lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 30ch;
}
.pjcb-lead em { font-style: italic; color: var(--accent); }
.pjcb-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
.pjcb-cols p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

/* ---------- 3. Image & Text ---------- */
.pjcb-imagetext.tone-deep { background: var(--paper-deep); }
.pjcb-imagetext.tone-ink { background: var(--ink); color: var(--paper); }
.pjcb-it-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.pjcb-imagetext.media-left .pjcb-it-media { order: 0; }
.pjcb-imagetext.media-left .pjcb-it-text { order: 1; }
.pjcb-imagetext.media-right .pjcb-it-media { order: 1; }
.pjcb-imagetext.media-right .pjcb-it-text { order: 0; }
.pjcb-it-media {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--paper-deep);
}
.pjcb-it-media img { width: 100%; height: 100%; object-fit: cover; }
.pjcb-it-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 16px 0 22px;
}
.pjcb-it-title em { font-style: italic; }
.pjcb-it-body p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 18px;
}
.pjcb-imagetext.tone-ink .pjcb-it-body p { color: var(--paper); opacity: 0.82; }
.pjcb-it-text .btn { margin-top: 14px; }

/* ---------- 4. Feature Grid ---------- */
.pjcb-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 2.6vw, 44px) clamp(28px, 3vw, 56px);
}
.pjcb-feat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.pjcb-feat-icon { color: var(--accent); }
.pjcb-feat-icon svg { width: 38px; height: 38px; display: block; }
.pjcb-feat-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.pjcb-feat-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.12;
  margin: 0;
  max-width: 20ch;
}
.pjcb-feat-desc {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* ---------- 5. Stats Band ---------- */
.pjcb-stats-title { margin: 0 0 clamp(36px, 4vw, 56px); }
.pjcb-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(32px, 4vw, 52px) 0;
}
.pjcb-stat-v {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.pjcb-stat-v em { font-style: italic; font-weight: 300; color: var(--accent); }
.pjcb-stat-l {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}

/* ---------- 6. Numbered Steps ---------- */
.pjcb-steps-list {
  display: flex;
  flex-direction: column;
}
.pjcb-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding: clamp(28px, 3vw, 40px) 0;
  border-top: 1px solid var(--line);
}
.pjcb-step:last-child { border-bottom: 1px solid var(--line); }
.pjcb-step-no {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  color: var(--accent);
}
.pjcb-step-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1;
  margin: 0 0 10px;
}
.pjcb-step-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}

/* ---------- 7. FAQ ---------- */
.pjcb-faq-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.pjcb-faq-item {
  border-top: 1px solid var(--line);
}
.pjcb-faq-item:last-child { border-bottom: 1px solid var(--line); }
.pjcb-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.25;
  color: var(--ink);
  transition: color 200ms;
}
.pjcb-faq-item summary::-webkit-details-marker { display: none; }
.pjcb-faq-item summary:hover { color: var(--accent); }
.pjcb-faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: 16px; height: 16px;
}
.pjcb-faq-mark::before,
.pjcb-faq-mark::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 280ms cubic-bezier(.16,.84,.28,1), opacity 280ms;
}
.pjcb-faq-mark::before { top: 7px; left: 0; width: 16px; height: 1.5px; }
.pjcb-faq-mark::after { left: 7px; top: 0; width: 1.5px; height: 16px; }
.pjcb-faq-item[open] .pjcb-faq-mark::after { transform: rotate(90deg); opacity: 0; }
.pjcb-faq-a {
  padding: 0 0 26px;
  max-width: 60ch;
}
.pjcb-faq-a p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

/* ---------- 8. Rate Cards ---------- */
.pjcb-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.4vw, 40px);
  align-items: stretch;
}
.pjcb-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--line);
  background: var(--paper);
}
.pjcb-price-card.is-featured {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 6%, var(--paper));
}
.pjcb-price-flag {
  position: absolute;
  top: -1px; right: 24px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  padding: 6px 12px;
  border-radius: 999px;
}
.pjcb-price-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pjcb-price-amount {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.pjcb-price-period {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 6px;
}
.pjcb-price-feat {
  list-style: none;
  margin: 6px 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}
.pjcb-price-feat li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.pjcb-price-feat li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px;
  border: 1px solid var(--accent);
  border-radius: 999px;
}
.pjcb-price-card .btn { width: 100%; justify-content: center; }

/* ---------- 9. Content Cards ---------- */
.pjcb-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}
.pjcb-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 700ms cubic-bezier(.16,.84,.28,1);
}
a.pjcb-card:hover { transform: translateY(-6px); }
.pjcb-card-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--paper-deep);
}
.pjcb-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(.2,.6,.2,1);
}
a.pjcb-card:hover .pjcb-card-img img { transform: scale(1.04); }
.pjcb-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  margin: 0;
}
.pjcb-card-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  max-width: 34ch;
}
.pjcb-card-link {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pjcb-card-link::after { content: "→"; font-size: 12px; transition: transform 200ms; }
a.pjcb-card:hover .pjcb-card-link { color: var(--accent); }
a.pjcb-card:hover .pjcb-card-link::after { transform: translateX(4px); }

/* ---------- 10. Checklist ---------- */
.pjcb-list-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.pjcb-list-head .sec-title { font-size: clamp(32px, 3.6vw, 52px); }
.pjcb-list-items.amen-grid { columns: 2; }
@media (min-width: 1100px) { .pjcb-list-items.amen-grid { columns: 3; } }

/* ---------- 11. CTA Banner ---------- */
.pjcb-banner {
  padding: clamp(72px, 10vw, 140px) 0;
  text-align: center;
}
.pjcb-banner.tone-ink { background: var(--ink); color: var(--paper); }
.pjcb-banner.tone-accent { background: var(--accent); color: var(--paper); }
.pjcb-banner.tone-teal { background: var(--accent-2); color: var(--paper); }
.pjcb-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pjcb-banner.tone-ink .eyebrow,
.pjcb-banner.tone-accent .eyebrow,
.pjcb-banner.tone-teal .eyebrow { color: currentColor; opacity: 0.7; }
.pjcb-banner-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 24px auto 0;
  max-width: 18ch;
}
.pjcb-banner-title em { font-style: italic; }
.pjcb-banner-text {
  max-width: 520px;
  margin: 28px auto 0;
  font-size: 16px;
  line-height: 1.7;
  opacity: 0.85;
}
.pjcb-banner-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}
/* On dark bands the "solid" (ink) primary button would vanish — flip it light. */
.pjcb-banner.tone-ink .btn.solid,
.pjcb-banner.tone-accent .btn.solid,
.pjcb-banner.tone-teal .btn.solid {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.pjcb-banner.tone-ink .btn.solid:hover,
.pjcb-banner.tone-accent .btn.solid:hover,
.pjcb-banner.tone-teal .btn.solid:hover { background: transparent; color: var(--paper); }

/* ---------- 12. Statement ---------- */
.pjcb-statement-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.pjcb-statement-eyebrow { margin-bottom: 32px; }
.pjcb-statement-text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.pjcb-statement-text em { font-style: italic; color: var(--accent); }
.pjcb-statement-foot {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 36px;
}

/* ---------- 13. Divider ---------- */
.pjcb-divider { padding: clamp(40px, 7vw, 90px) 0; }
.pjcb-divider-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.pjcb-divider-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
.pjcb-divider.style-dots .pjcb-divider-line {
  height: 0;
  background: none;
  border-top: 1px dotted var(--muted);
  opacity: 0.6;
}
.pjcb-divider-mark {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  letter-spacing: 0.08em;
}

/* ---------- 14. Contact Details ---------- */
.pjcb-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.pjcb-contact-title { margin: 14px 0 0; }
.pjcb-contact-intro {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 24px 0 32px;
}
.pjcb-contact-list {
  display: flex;
  flex-direction: column;
}
.pjcb-contact-row {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.pjcb-contact-row:last-child { border-bottom: 1px solid var(--line); }
.pjcb-contact-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pjcb-contact-value {
  font-family: var(--serif);
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.3;
  color: var(--ink);
  word-break: break-word;
}
.pjcb-contact-value a { transition: color 200ms; }
.pjcb-contact-value a:hover { color: var(--accent); }

/* ---------- 15. Full-width Image ---------- */
.pjcb-media { margin: 0; }
.pjcb-media-frame {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-deep);
  display: flex;
  align-items: flex-end;
}
.pjcb-media.height-tall .pjcb-media-frame { min-height: 78vh; }
.pjcb-media.height-short .pjcb-media-frame { min-height: 48vh; }
.pjcb-media-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(40px, 6vw, 72px);
  color: var(--paper);
}
.pjcb-media-frame::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15,12,8,0) 40%, rgba(15,12,8,0.6) 100%);
}
.pjcb-media-overlay:empty { display: none; }
.pjcb-media-frame:not(:has(.pjcb-media-overlay))::after { content: none; }
.pjcb-media-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.pjcb-media-title em { font-style: italic; }
.pjcb-media-cap {
  max-width: var(--container);
  margin: 14px auto 0;
  padding: 0 var(--gutter);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1100px) {
  .pjcb-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .pjcb-price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .pjcb-card-grid { grid-template-columns: repeat(2, 1fr); }
  .pjcb-stats-row { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 1000px) {
  .pjcb-heading .pjcb-head,
  .pjcb-prose-grid,
  .pjcb-it-grid,
  .pjcb-faq-grid,
  .pjcb-list-grid,
  .pjcb-contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .pjcb-imagetext.media-right .pjcb-it-media,
  .pjcb-imagetext.media-right .pjcb-it-text { order: 0; }
  .pjcb-cols { grid-template-columns: 1fr; }
  .pjcb-feat-grid,
  .pjcb-card-grid { grid-template-columns: 1fr; }
  .pjcb-step { grid-template-columns: 1fr; gap: 10px; }
  .pjcb-contact-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 600px) {
  .pjcb-stats-row { grid-template-columns: 1fr; gap: 28px; text-align: left; }
}

/* ============================================================
   Explore — home-page block (pasajcap/explore)
   A dark navigation band of cards linking to the discovery pages.
   Lives here (not main.css) so main.css stays the prototype verbatim.
   ============================================================ */
.explore {
  padding: clamp(80px, 12vw, 160px) 0;
  background: var(--ink);
  color: var(--paper);
}
.explore .sec-title { color: var(--paper); }
.explore .sec-no { color: color-mix(in oklab, var(--paper) 55%, transparent); }
.explore .sec-no::before { background: color-mix(in oklab, var(--paper) 40%, transparent); }
.exp-intro {
  max-width: 56ch;
  margin: -28px 0 clamp(48px, 6vw, 72px);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: color-mix(in oklab, var(--paper) 72%, transparent);
}
.exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.exp-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  border: 1px solid color-mix(in oklab, var(--paper) 14%, transparent);
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in oklab, var(--paper) 3%, transparent);
  transition: transform 700ms cubic-bezier(.16,.84,.28,1), border-color 300ms ease, background 300ms ease;
}
.exp-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--paper) 42%, transparent);
  background: color-mix(in oklab, var(--paper) 6%, transparent);
}
.exp-ph {
  position: relative;
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
  background: var(--paper-deep);
}
.exp-ph img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(.2,.6,.2,1);
}
.exp-card:hover .exp-ph img { transform: scale(1.06); }
.exp-no {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--paper);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  padding: 5px 9px;
  border-radius: 999px;
}
.exp-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 26px;
}
.exp-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.08;
  margin: 0;
}
.exp-desc {
  flex: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 300;
  color: color-mix(in oklab, var(--paper) 66%, transparent);
}
.exp-link {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 55%, transparent);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 200ms ease;
}
.exp-link::after { content: "→"; font-size: 12px; transition: transform 200ms ease; }
.exp-card:hover .exp-link { color: var(--accent); }
.exp-card:hover .exp-link::after { transform: translateX(4px); }
@media (max-width: 1100px) { .exp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .exp-grid { grid-template-columns: 1fr; } }

/* ---------- 16. Property Video ---------- */
/* The poster stays a still image until play is pressed; .is-playing then hands
   the frame over to the YouTube iframe main.js injects. */
.pjcv-head { margin-bottom: clamp(36px, 5vw, 56px); }
.pjcv-intro {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.7;
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 6px 0 0;
}
.pjcv-stage { margin: 0; }
.pjcv-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-deep);
}
/* A bright midday poster leaves white-on-white play chrome unreadable, so the
   scrim pools light shade behind the button as well as at the edges. */
.pjcv-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(46% 52% at 50% 50%, rgba(12,10,6,0.46) 0%, rgba(12,10,6,0.16) 60%, rgba(12,10,6,0) 100%),
    linear-gradient(180deg, rgba(15,12,8,0.30) 0%, rgba(15,12,8,0.06) 42%, rgba(15,12,8,0.42) 100%);
  transition: opacity 400ms ease;
}
.pjcv-poster { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.pjcv-stage:hover .pjcv-poster { transform: scale(1.03); }

/* ----- play control ----- */
/* Ring and label share one grid cell rather than stacking in a flex column:
   stacked, the column centres ring + gap + label as a group, which pushes the
   ring itself above the middle of the frame. Here the ring is exactly centred
   and the label is translated out from under it. */
.pjcv-play {
  --pjcv-ring: clamp(64px, 7vw, 92px);
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
}
.pjcv-play-ring {
  grid-area: 1 / 1;
  width: var(--pjcv-ring);
  height: var(--pjcv-ring);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.92);
  background: rgba(20,17,12,0.34);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 40px rgba(0,0,0,0.28);
  display: grid;
  place-items: center;
  transition: background 260ms ease, border-color 260ms ease, transform 260ms ease;
}
.pjcv-play-ring svg {
  width: 34%;
  fill: currentColor;
  /* A triangle reads as centred on its centroid, not its bounding box — this
     nudge puts the centroid on the ring's centre. */
  transform: translateX(2%);
}
.pjcv-play-label {
  grid-area: 1 / 1;
  transform: translateY(calc(var(--pjcv-ring) / 2 + 22px));
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 18px rgba(0,0,0,0.5);
}
.pjcv-play:hover .pjcv-play-ring,
.pjcv-play:focus-visible .pjcv-play-ring {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06);
}
.pjcv-play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

/* ----- warming / playing -----
   On hover the player is inserted early and left invisible behind the poster so
   the first seconds are buffered before the click; it only becomes visible and
   clickable once play is actually pressed. */
.pjcv-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.pjcv-stage.is-playing .pjcv-iframe { opacity: 1; pointer-events: auto; }
.pjcv-stage.is-playing .pjcv-play,
.pjcv-stage.is-playing .pjcv-scrim { opacity: 0; pointer-events: none; }
.pjcv-stage.is-playing .pjcv-poster { transform: none; }

.pjcv-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 18px;
}

/* ----- the statement the video sets up ----- */
.pjcv-after {
  max-width: 860px;
  margin: clamp(56px, 7vw, 96px) auto 0;
  text-align: center;
}
.pjcv-after-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}
.pjcv-after-title em { font-style: italic; color: var(--accent); }
.pjcv-after-text {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.75;
  font-weight: 300;
  color: var(--ink-soft);
  margin: 22px auto 0;
  max-width: 62ch;
}

@media (max-width: 700px) {
  /* A 16:9 strip is too thin to read on a phone — crop the poster taller. */
  .pjcv-stage:not(.is-playing) .pjcv-frame { aspect-ratio: 4 / 3; }
  .pjcv-play-label { transform: translateY(calc(var(--pjcv-ring) / 2 + 18px)); }
}
@media (prefers-reduced-motion: reduce) {
  .pjcv-poster,
  .pjcv-stage:hover .pjcv-poster { transition: none; transform: none; }
}