/* The intro lives in the feed below; keep the phone scroll scene, not its duplicate video scene. */
.pu-iv .pu-iv_media { display: none !important; }
.pu-iv.is-js { height: 400vh !important; height: 400svh !important; }

.pu-journal {
  max-width: 1220px;
  margin: 0 auto;
  padding: clamp(54px, 7vw, 96px) 20px clamp(82px, 9vw, 128px);
  color: #19171d;
}

.pu-journal * { box-sizing: border-box; }
.pu-journal_feed {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: #b69bdc #eee9f4;
  scrollbar-width: thin;
  padding: 4px 4px 20px;
}

.pu-journal_card {
  flex: 0 0 clamp(280px, 29vw, 345px);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #e9e4ec;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(34, 22, 56, .05);
  scroll-snap-align: start;
}

.pu-journal_card video {
  display: block;
  width: 100%;
  height: 200px;
  border-radius: 15px;
  background: #f5f3fa;
  object-fit: contain;
}

.pu-journal_meta {
  display: flex;
  gap: 9px;
  margin: 21px 9px 9px;
  color: #8854df;
  font: 700 11px/1.2 system-ui,sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.pu-journal_meta span + span::before { content: "·"; margin-right: 9px; color: #b6aabc; }
.pu-journal_card h3 { margin: 0 9px 10px; font: 600 28px/1.1 var(--_typography---font-family--primary,"BDO Grotesk",Arial,sans-serif); letter-spacing: -.02em; }
.pu-journal_card p { margin: 0 9px 20px; color: #69636e; font: 400 14px/1.5 system-ui,sans-serif; }
.pu-journal_card > a { display: inline-flex; align-items: center; margin: auto 9px 10px; color: #7c3aed; font: 600 14px/1.3 system-ui,sans-serif; text-decoration: none; }
.pu-journal_card > a:hover { text-decoration: underline; }

.pu-journal_card.is-article { background: #f9f7fc; color: #19171d; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.pu-journal_card.is-article:hover { transform: translateY(-3px); box-shadow: 0 18px 32px rgba(42, 23, 72, .1); }
.pu-journal_card.is-article small { margin: 15px 10px 0; color: #8854df; font: 700 11px/1.2 system-ui,sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.pu-journal_card.is-article img { display: block; width: 76px; height: 76px; margin: 35px 9px 27px; object-fit: contain; }
.pu-journal_card.is-article h3 { font-size: 32px; }
.pu-journal_card.is-article p { margin-bottom: 0; }
.pu-journal_card.is-article span { margin: auto 9px 11px; padding-top: 20px; color: #7c3aed; font: 600 14px/1.3 system-ui,sans-serif; }

@media (max-width: 767px) {
  .pu-journal { padding: 54px 0 90px 20px; }
  .pu-journal_feed { padding-right: 20px; gap: 12px; }
  .pu-journal_card { flex-basis: min(80vw, 330px); min-height: 405px; }
}

/* Article cards line up: the same icon box, two lines kept for every title, three for every line of text,
   so titles, text and links sit at the same height in every card. */
.pu-journal_card.is-article img { width: 64px; height: 64px; margin: 32px 9px 26px; }
.pu-journal_card.is-article h3 { display: flex; align-items: flex-end; min-height: 2.2em; line-height: 1.1; }
.pu-journal_card.is-article p { min-height: 4.5em; }
.pu-journal_card.is-article span { margin-top: 20px; padding-top: 0; }
@media (max-width: 767px) {
  .pu-journal_card.is-article h3 { font-size: 28px; }
}