/* journal */
.journal-page {
  background: linear-gradient(132deg, #fcfffd 0%, #f1f7f3 42%, #e8eeea 100%);
}

.journal-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--leaf);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.journal-section {
  padding: 40px 0 72px;
}

.journal-results__head {
  margin-bottom: 20px;
}

.journal-section.is-live-loading .journal-results {
  opacity: .58;
  pointer-events: none;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.journal-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  background: var(--surface-matte);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--el-1);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}

.journal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px rgba(7,27,20,.1);
}

.journal-card__image {
  display: block;
  color: inherit;
  background: linear-gradient(135deg, var(--mint), var(--sand));
}

.journal-card__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.journal-card__body {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
}

.journal-card h2 {
  margin: 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.13;
  letter-spacing: 0;
}

.journal-card h2 a {
  color: inherit;
  text-decoration: none;
}

.journal-card p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.55;
}

.journal-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.journal-card__chips span,
.journal-card__chips a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  color: var(--leaf-dark);
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  background: rgba(15,109,75,.08);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
}

.journal-card__chips a {
  min-height: 44px;
}

.journal-empty {
  padding: 28px;
  background: var(--surface-matte);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
}

.journal-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-3);
  font-size: .9rem;
}

.journal-crumbs a {
  color: var(--leaf-dark);
  text-decoration: none;
}

.journal-product-card {
  display: grid;
  gap: 0;
  width: min(100%, 240px);
  margin-top: 12px;
  overflow: hidden;
  color: inherit;
  background: var(--surface-matte);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--el-2);
}

.journal-product-card__media {
  display: block;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(135deg, var(--mint), var(--sand));
}

.journal-product-card__media img,
.journal-product-card__media span {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.journal-product-card__media img {
  object-fit: cover;
}

.journal-product-card__media span {
  display: grid;
  place-items: center;
  color: var(--leaf-dark);
  font-weight: 800;
}

.journal-product-card__body {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.journal-product-card__eyebrow {
  color: var(--leaf);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.journal-product-card h2 {
  margin: 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.16;
}

.journal-product-card h2 a {
  color: inherit;
  text-decoration: none;
}

.journal-product-card p,
.journal-product-card small {
  margin: 0;
  color: var(--text-3);
  line-height: 1.4;
}

.journal-product-card__meta {
  display: grid;
  gap: 5px;
  margin: 0;
}

.journal-product-card__meta div {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.journal-product-card__meta dt,
.journal-product-card__meta dd {
  margin: 0;
  line-height: 1.3;
}

.journal-product-card__meta dt {
  color: var(--text-3);
  font-size: .72rem;
  font-weight: 800;
}

.journal-product-card__meta dd {
  min-width: 0;
  color: var(--text-1);
  font-size: .84rem;
  font-weight: 800;
}

.journal-product-card strong {
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
}

.journal-article__body {
  min-width: 0;
  color: var(--text-1);
  font-size: 1.08rem;
  line-height: 1.82;
}

.journal-article__body h2,
.journal-article__body h3 {
  margin: 1.7em 0 .65em;
  color: var(--text-1);
  letter-spacing: 0;
}

.journal-article__body p {
  margin: 0 0 1.3em;
}

.journal-article__body ul,
.journal-article__body ol {
  display: grid;
  gap: 10px;
  margin: 0 0 1.3em;
  padding-left: 1.25em;
  list-style: disc;
}

.journal-article__body a {
  color: var(--leaf-dark);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.journal-article__body :where(p, li, a, h2, h3, h4, blockquote, figcaption),
.journal-product-card :where(h2, p, small, strong, a, dd) {
  overflow-wrap: anywhere;
}

.journal-article__body :where(img, video, iframe, table, pre) {
  max-width: 100%;
}

.journal-article__body :where(img, video) {
  height: auto;
}

.journal-article__body :where(table, pre) {
  display: block;
  overflow-x: auto;
}

/* Author (E-E-A-T): compact chip in card meta + prominent byline + bio card */
.journal-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.journal-author-chip__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--mint), var(--sand));
  color: var(--leaf-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .68rem;
  line-height: 1;
}

.journal-author-chip__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.journal-author-chip__text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.journal-author-chip__name {
  font-weight: 700;
  color: var(--text-2);
}

.journal-author-chip--byline {
  gap: 12px;
  margin-top: 18px;
}

.journal-author-chip--byline .journal-author-chip__avatar {
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}

.journal-author-chip--byline .journal-author-chip__text {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.journal-author-chip--byline .journal-author-chip__name {
  font-family: var(--font-display);
  font-size: 1.04rem;
  color: var(--text-1);
}

.journal-author-chip--byline .journal-author-chip__role {
  font-size: .86rem;
  font-weight: 700;
  color: var(--leaf-dark);
}

.journal-author {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 2.6em 0 0;
  padding: 18px 20px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-card);
  background: var(--sand);
}

.journal-author__avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--mint), var(--sand));
  color: var(--leaf-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
}

.journal-author__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.journal-author__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.journal-author__eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--leaf);
}

.journal-author__name {
  font-family: var(--font-display);
  font-size: 1.14rem;
  line-height: 1.2;
  color: var(--text-1);
}

.journal-author__role {
  font-size: .92rem;
  font-weight: 700;
  color: var(--leaf-dark);
}

.journal-author__bio {
  margin: 6px 0 0;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--text-2);
}

/* Rubrics chips bar at the top of the journal index */
.journal-cats-bar {
  border-bottom: 1px solid var(--border-1);
}

.journal-cats-bar__inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.journal-cats-bar__inner::-webkit-scrollbar {
  display: none;
}

.journal-cats-bar__chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--leaf-dark);
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.journal-cats-bar__chip:hover {
  border-color: var(--leaf);
}

.journal-cats-bar__chip.is-active {
  background: var(--leaf-dark);
  border-color: var(--leaf-dark);
  color: #fff;
}

.journal-inline-photo,
.journal-photo-grid {
  margin: 28px 0;
}

.journal-inline-photo {
  overflow: hidden;
  background: var(--surface-matte);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-panel);
  box-shadow: var(--el-2);
}

.journal-inline-photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.journal-inline-photo figcaption,
.journal-photo-grid figcaption {
  padding: 12px 14px;
  color: var(--text-3);
  font-size: .86rem;
  line-height: 1.45;
}

.journal-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.journal-photo-grid figure {
  overflow: hidden;
  background: var(--surface-matte);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--el-1);
}

.journal-photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.journal-note,
.journal-checklist,
.journal-sources {
  margin: 28px 0;
  padding: 18px;
  background: var(--surface-matte);
  border: 1px solid var(--border-1);
  border-radius: var(--r-card);
  box-shadow: var(--el-1);
}

.journal-note {
  color: var(--text-2);
  border-color: var(--border-s);
}

.journal-checklist ul,
.journal-sources ul {
  margin-bottom: 0;
}

.journal-section--related {
  padding: 46px 0 62px;
  background:
    linear-gradient(180deg, rgba(241,248,244,.86), rgba(255,255,255,.96)),
    var(--sand);
  border-top: 1px solid var(--border-2);
}

.journal-section--related .container {
  display: grid;
  gap: 22px;
}

.journal-section--related .section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
}

.journal-section--related .section-head h2 {
  margin: 2px 0 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.08;
}

.journal-section--related .section-head p {
  max-width: 520px;
  margin: 5px 0 0;
  color: var(--text-2);
  line-height: 1.45;
}

.journal-section--related .section-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 14px;
  color: var(--leaf-dark);
  font-weight: 800;
  text-decoration: none;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
}

.journal-grid--related {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.journal-card--related {
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 34px rgba(7,27,20,.06);
}

.journal-card--related .journal-card__image img {
  aspect-ratio: 16 / 9;
}

.journal-card--related .journal-card__body {
  gap: 9px;
  padding: 14px 16px 16px;
}

.journal-card--related .journal-card__meta {
  gap: 7px;
  font-size: .72rem;
}

.journal-card--related h2 {
  font-size: 1.08rem;
  line-height: 1.18;
}

.journal-card--related p {
  display: -webkit-box;
  overflow: hidden;
  font-size: .92rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1023px) {
  .journal-article__layout {
    grid-template-columns: 1fr;
  }

  .journal-blogar-sidebar--article {
    position: static;
  }

  .journal-product-card {
    width: 100%;
    grid-template-columns: 128px minmax(0, 1fr);
  }

  .journal-grid,
  .journal-grid--related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-section--related .section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {

  .journal-grid,
  .journal-grid--related,
  .journal-photo-grid {
    grid-template-columns: 1fr;
  }

  .journal-section--related {
    padding: 34px 0 46px;
  }
}

/* journal practical refinement */

.journal-grid {
  align-items: stretch;
}

.journal-card {
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 420px;
}

.journal-card__image img {
  aspect-ratio: 5 / 4;
}

.journal-card__body {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  height: 100%;
  padding: 14px;
}

.journal-card__meta {
  gap: 7px;
  font-size: .7rem;
}

.journal-card h2 {
  display: -webkit-box;
  min-height: 2.34em;
  overflow: hidden;
  font-size: 1.08rem;
  line-height: 1.17;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.journal-card p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-3);
  font-size: .92rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.journal-card__chips {
  gap: 6px;
  min-height: 28px;
}

.journal-card__chips span,
.journal-card__chips a {
  min-height: 26px;
  padding: 4px 8px;
  font-size: .72rem;
}

.journal-card__footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 2px;
  color: var(--text-4);
  font-size: .78rem;
  font-weight: 800;
}

.journal-card__footer a {
  color: var(--leaf-dark);
  font-family: var(--font-display);
  text-decoration: none;
}

.journal-article__body h2,
.journal-article__body h3 {
  margin: 1.55em 0 .55em;
}

.journal-article__body h2 {
  font-size: 1.55rem;
}

.journal-article__body h3 {
  font-size: 1.18rem;
}

.journal-article__body ul,
.journal-article__body ol {
  gap: 7px;
  margin-bottom: 1.15em;
  padding-left: 1.15em;
}

.journal-article__body li {
  padding-left: 2px;
  line-height: 1.58;
}

.journal-article__body li::marker {
  color: var(--leaf-dark);
  font-size: .78em;
}

.journal-article__body ol li::marker {
  font-weight: 700;
  font-size: .94em;
}

.journal-checklist {
  padding: 16px;
}

.journal-checklist ul {
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

.journal-checklist li {
  position: relative;
  padding-left: 22px;
}

.journal-checklist li::before {
  position: absolute;
  top: .72em;
  left: 2px;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--leaf-dark);
  border-radius: 50%;
}

.journal-checklist li::marker {
  content: "";
}

@media (max-width: 767px) {

  .journal-card__image img {
    aspect-ratio: 16 / 11;
  }
}

@media (max-width: 479px) {

  .journal-card h2 {
    min-height: 0;
  }
}

/* journal mobile reading rhythm */

@media (max-width: 767px) {

  .journal-section {
    padding-top: 24px;
  }

  .journal-article__layout {
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 56px;
  }

  .journal-product-card {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 8px;
    margin-inline: auto;
    border-radius: var(--r-panel);
  }

  .journal-product-card__media {
    min-height: 176px;
  }

  .journal-product-card__media img,
  .journal-product-card__media span {
    height: 100%;
    aspect-ratio: 16 / 10;
  }

  .journal-product-card__body {
    gap: 10px;
    padding: 16px;
  }

  .journal-article__body {
    padding-top: 22px;
    border-top: 1px solid var(--border-2);
    font-size: 1.02rem;
    line-height: 1.78;
  }

  .journal-article__body > p {
    margin-bottom: 1.05em;
  }

  .journal-article__body > p + p {
    padding-top: 1.05em;
    border-top: 1px solid var(--border-2);
  }

  .journal-article__body > p strong:first-child {
    color: var(--text-1);
    font-family: var(--font-display);
  }

  .journal-article__body h2 {
    margin-top: 1.9em;
    padding-top: 18px;
    border-top: 1px solid var(--border-1);
    font-size: 1.42rem;
    line-height: 1.14;
  }

  .journal-article__body h3 {
    font-size: 1.16rem;
  }

  .journal-note,
  .journal-checklist,
  .journal-sources {
    margin: 24px 0;
  }
}

.journal-article__body .journal-product-card--inline {
  align-items: stretch;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  width: min(100%, 760px);
  max-width: 100%;
  margin: 28px auto;
}

.journal-article__body .journal-product-card--inline .journal-product-card__media {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.journal-article__body .journal-product-card--inline .journal-product-card__body {
  align-content: center;
  gap: 8px;
  padding: 18px 22px;
}

.journal-article__body .journal-product-card--inline h2 {
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1.16;
  border: 0;
}

.journal-article__body .journal-product-card--inline p {
  margin: 0;
  line-height: 1.4;
}

.journal-article--blogar .journal-article__body .journal-product-card--inline h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.18;
}

.journal-article--blogar .journal-article__body .journal-product-card--inline p {
  margin: 0;
  font-size: .75rem;
  line-height: 1.35;
}

.journal-article--blogar .journal-article__body .journal-product-card--inline small {
  margin: 0;
  font-size: .85rem;
  line-height: 1.42;
}

.journal-article__body .journal-product-card--inline .journal-product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
}

.journal-article__body .journal-product-card--inline h2 a {
  color: inherit;
  text-decoration: none;
}

.journal-article__body .journal-product-card--inline .btn {
  justify-self: start;
  min-width: min(100%, 240px);
  min-height: 44px;
  padding: 0 22px;
  color: #fff;
  font-size: .82rem;
  text-decoration: none;
}

@media (max-width: 767px) {
  .journal-article__body .journal-product-card--inline {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 420px);
    margin: 28px auto;
  }

  .journal-article__body .journal-product-card--inline .journal-product-card__media {
    min-height: 220px;
  }

  .journal-article__body .journal-product-card--inline .journal-product-card__body {
    align-content: start;
    padding: 16px;
  }

  .journal-article__body .journal-product-card--inline .btn {
    justify-self: stretch;
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .journal-article__body .journal-product-card--inline {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .journal-article__body .journal-product-card--inline .journal-product-card__media {
    min-height: 0;
  }
}

@media (max-width: 1023px) {
  .journal-blogar-meta a,
  .journal-card__chips a,
  .journal-product-card h2 a {
    position: relative;
  }

  .journal-blogar-meta a::after,
  .journal-card__chips a::after {
    position: absolute;
    inset: -8px;
    content: "";
    border-radius: inherit;
  }

  .journal-product-card h2 a::after {
    position: absolute;
    inset: -13px -8px;
    content: "";
  }
}

/* journal mobile compact filters */

/* journal implementation refinement */

.journal-reading-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--el-1);
}

.journal-reading-panel[hidden] {
  display: none;
}

.journal-reading-panel__meta,
.journal-reading-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.journal-reading-panel__meta span,
.journal-reading-panel__meta time,
.journal-reading-panel__chips span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 6px 10px;
  color: var(--leaf-dark);
  font-size: .82rem;
  font-weight: 800;
  background: rgba(15,109,75,.08);
  border-radius: var(--r-pill);
}

.journal-toc {
  display: grid;
  gap: 9px;
}

.journal-toc__title {
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 800;
}

.journal-toc ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal-toc a {
  display: flex;
  position: relative;
  width: 100%;
  min-height: 34px;
  align-items: center;
  padding: 4px 8px 4px 16px;
  color: var(--text-2);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.28;
  text-decoration: none;
  border-radius: var(--r-field);
  transition: color .16s var(--ease), background .16s var(--ease);
}

.journal-toc a::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: var(--r-pill);
  background: transparent;
  transform: translateY(-50%) scaleY(.62);
  transform-origin: center;
  transition: background .16s var(--ease), transform .16s var(--ease);
}

.journal-toc a:hover,
.journal-toc a:focus-visible {
  color: var(--leaf-dark);
  background: rgba(15,109,75,.045);
}

.journal-toc a:focus-visible {
  outline: 2px solid rgba(15,109,75,.16);
  outline-offset: 2px;
}

.journal-toc a.is-active,
.journal-toc a[aria-current="location"] {
  color: var(--leaf-dark);
  background: transparent;
}

.journal-toc a.is-active::before,
.journal-toc a[aria-current="location"]::before {
  background: var(--leaf-dark);
  transform: translateY(-50%) scaleY(1);
}

.journal-toc__item--level-3 {
  padding-left: 14px;
}

.journal-article__body h2[id],
.journal-article__body h3[id] {
  scroll-margin-top: 112px;
}

@media (max-width: 767px) {

  .journal-reading-panel {
    padding: 14px;
    border-radius: var(--r-panel);
  }

  .journal-toc a {
    min-height: 38px;
  }
}

@media (max-width: 479px) {

  .journal-product-card__media {
    min-height: 140px;
  }
}

/* journal hero slider: same rhythm as home hero. */

/* journal index navigation refinement */

/* journal sidebar navigation: one active language for rubrics, topics and article toc */

/* journal sticky sidebars stay active on tablet and desktop. */
body[data-page-type='journal'],
body[data-page-type='journal_article'] {
  overflow-x: clip;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .journal-article__layout {
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    gap: 24px;
  }
}

/* journal editorial layout */

.journal-filter-band {
  margin-bottom: clamp(22px, 3vw, 32px);
}

.journal-filter-band__inner {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(214,226,220,.78);
  border-radius: var(--r-panel);
  box-shadow: 0 14px 32px rgba(7,27,20,.05);
}

.journal-filter-row {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.journal-filter-row__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 800;
}

.journal-filter-row__head strong {
  color: var(--text-3);
  font-size: .78rem;
  font-weight: 800;
}

.journal-filter-row__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.journal-filter-chip {
  display: inline-flex;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  box-shadow: none;
  transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}

.journal-filter-chip:hover,
.journal-filter-chip:focus-visible {
  color: var(--leaf-dark);
  background: #fff;
  border-color: var(--border-1);
}

.journal-filter-chip:focus-visible {
  outline: 2px solid rgba(25,167,123,.2);
  outline-offset: 2px;
}

.journal-filter-chip.is-active,
.journal-filter-chip[aria-pressed='true'] {
  color: #fff;
  background: var(--leaf-dark);
  border-color: var(--leaf-dark);
}

.journal-filter-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.journal-filter-chip small {
  display: inline-flex;
  min-width: 26px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  color: var(--text-3);
  font-size: .72rem;
  font-weight: 800;
  background: rgba(15,109,75,.065);
  border-radius: var(--r-pill);
}

.journal-filter-chip.is-active small,
.journal-filter-chip[aria-pressed='true'] small {
  color: rgba(255,255,255,.94);
  background: rgba(255,255,255,.18);
}

.journal-filter-chip--topic {
  min-height: 44px;
  padding: 7px 12px;
  font-size: .82rem;
  background: rgba(15,109,75,.045);
}

.journal-results {
  min-width: 0;
}

.journal-grid:not(.journal-grid--related) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.journal-grid:not(.journal-grid--related) > .journal-card {
  min-height: 0;
}

.journal-grid:not(.journal-grid--related) > .journal-card--feature {
  grid-column: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}

.journal-grid:not(.journal-grid--related) > .journal-card--feature .journal-card__image {
  min-height: 0;
}

.journal-grid:not(.journal-grid--related) > .journal-card--feature .journal-card__image img {
  height: auto;
  min-height: 0;
  aspect-ratio: 5 / 4;
}

.journal-grid:not(.journal-grid--related) > .journal-card--feature .journal-card__body {
  align-content: stretch;
  gap: 10px;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  padding: 14px;
}

.journal-grid:not(.journal-grid--related) > .journal-card--feature h2 {
  min-height: 2.34em;
  font-size: 1.08rem;
  line-height: 1.17;
  -webkit-line-clamp: 2;
}

.journal-grid:not(.journal-grid--related) > .journal-card--feature p {
  font-size: .92rem;
  line-height: 1.45;
  -webkit-line-clamp: 2;
}

.journal-grid:not(.journal-grid--related) > .journal-card--feature .journal-card__chips {
  min-height: 0;
  align-items: flex-start;
}

.journal-grid:not(.journal-grid--related) > .journal-card--feature .journal-card__chips span,
.journal-grid:not(.journal-grid--related) > .journal-card--feature .journal-card__chips a {
  flex: 0 0 auto;
  height: auto;
}

.journal-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 780px) minmax(220px, 280px);
  gap: clamp(34px, 4vw, 64px);
  align-items: start;
  justify-content: start;
  padding-top: clamp(34px, 4vw, 54px);
  padding-bottom: 72px;
}

.journal-article__layout.has-no-toc {
  grid-template-columns: minmax(0, 780px);
}

.journal-article__body {
  max-width: 780px;
  min-width: 0;
  font-size: 1.06rem;
  line-height: 1.78;
}

.journal-reading-panel {
  padding: 16px;
  background: rgba(255,255,255,.76);
  border: 1px solid var(--border-2);
  border-radius: var(--r-card);
  box-shadow: none;
}

.journal-toc__title {
  font-size: .92rem;
}

.journal-toc a {
  min-height: 44px;
  color: var(--text-3);
  font-size: .84rem;
}

.journal-toc a:hover,
.journal-toc a:focus-visible,
.journal-toc a.is-active,
.journal-toc a[aria-current="location"] {
  color: var(--leaf-dark);
}

@media (max-width: 1279px) {
  .journal-grid:not(.journal-grid--related) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-article__layout {
    grid-template-columns: minmax(0, 740px) minmax(210px, 260px);
    gap: 32px;
  }
}

@media (max-width: 1023px) {
  .journal-filter-band__inner {
    border-radius: var(--r-card);
  }

  .journal-filter-row__items {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .journal-filter-row__items::-webkit-scrollbar {
    display: none;
  }

  .journal-filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card--feature {
    grid-column: 1 / -1;
  }

  .journal-article__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    justify-content: stretch;
    padding-top: 28px;
  }

  .journal-article__body {
    max-width: 780px;
  }

  .journal-article--blogar .journal-blogar-sidebar--article {
    display: contents;
  }

  .journal-article--blogar .journal-blogar-sidebar--article .journal-reading-panel {
    order: -1;
    margin-bottom: 4px;
  }

  .journal-article--blogar .journal-blogar-sidebar--article .journal-widget {
    order: 1;
  }

  .journal-reading-panel {
    padding: 14px;
  }

  .journal-toc {
    gap: 10px;
  }

  .journal-toc ol {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .journal-toc ol::-webkit-scrollbar {
    display: none;
  }

  .journal-toc__item {
    flex: 0 0 auto;
    max-width: min(320px, 82vw);
  }

  .journal-toc__item--level-3 {
    padding-left: 0;
  }

  .journal-toc a {
    min-height: 44px;
    padding: 8px 13px;
    background: rgba(15,109,75,.045);
    border: 1px solid var(--border-2);
    border-radius: var(--r-pill);
  }

  .journal-toc a::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .journal-filter-band__inner {
    gap: 12px;
    padding: 12px;
  }

  .journal-filter-row__head {
    font-size: .84rem;
  }

  .journal-filter-chip {
    min-height: 44px;
    padding-inline: 12px;
    font-size: .82rem;
  }

  .journal-filter-chip--topic {
    font-size: .78rem;
  }

  .journal-grid:not(.journal-grid--related) {
    grid-template-columns: 1fr;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card--feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .journal-grid:not(.journal-grid--related) > .journal-card--feature .journal-card__image img {
    min-height: 0;
    aspect-ratio: 16 / 11;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card--feature .journal-card__body {
    padding: 16px;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card--feature h2 {
    font-size: 1.16rem;
    line-height: 1.14;
    -webkit-line-clamp: 2;
  }

  .journal-article__layout {
    padding-top: 22px;
    padding-bottom: 56px;
  }
}

/* journal bento feed: varied widths without empty slots before load more */
@media (min-width: 1280px) {
  .journal-grid:not(.journal-grid--related) {
    grid-auto-flow: row;
    grid-auto-rows: 92px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .journal-grid:not(.journal-grid--related) > .journal-card {
    grid-column: span 4;
    grid-row: span 4;
    grid-template-rows: minmax(220px, 1fr) auto;
    height: 100%;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 1),
  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 2),
  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 3) {
    grid-column: span 6;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 1) {
    grid-row: span 6;
    grid-template-rows: minmax(360px, 1fr) auto;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 2),
  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 3) {
    grid-row: span 3;
    grid-template-columns: minmax(260px, .48fr) minmax(0, .52fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 7) {
    grid-column: span 5;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 8) {
    grid-column: span 3;
    grid-template-rows: minmax(210px, 1fr) auto;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 9) {
    grid-column: span 4;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 2) .journal-card__image img,
  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 3) .journal-card__image img {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 2) .journal-card__body,
  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 3) .journal-card__body {
    gap: 8px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding: 16px 18px;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 2) .journal-card__chips,
  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 3) .journal-card__chips {
    display: none;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 1) h2 {
    min-height: 0;
    font-size: clamp(1.28rem, 1.65vw, 1.58rem);
    line-height: 1.12;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card:nth-child(9n + 8) h2 {
    font-size: 1rem;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card .journal-card__image,
  .journal-grid:not(.journal-grid--related) > .journal-card .journal-card__image img {
    min-height: 0;
  }

  .journal-grid:not(.journal-grid--related) > .journal-card .journal-card__image img {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* journal reference widgets */

.journal-widget {
  min-width: 0;
  background: rgba(255,255,255,.84);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--el-1);
  display: grid;
  gap: 14px;
  padding: 16px;
}

.journal-widget__title {
  margin: 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: 0;
}

.journal-widget-list,
.journal-widget-links {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.journal-widget-post {
  display: grid;
  grid-template-columns: 28px 64px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.journal-widget-post__num {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--leaf-dark);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  background: rgba(15,109,75,.08);
  border-radius: var(--r-pill);
}

.journal-widget-post__media {
  display: block;
  overflow: hidden;
  background: var(--mint);
  border-radius: 10px;
}

.journal-widget-post__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.journal-widget-post__body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.journal-widget-post__body strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.journal-widget-post__body small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-3);
  font-size: .76rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-widget-post:hover .journal-widget-post__body strong,
.journal-widget-post:focus-visible .journal-widget-post__body strong {
  color: var(--leaf-dark);
}

.journal-widget-link {
  display: flex;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  color: var(--text-2);
  font-weight: 800;
  line-height: 1.18;
  text-decoration: none;
  background: transparent;
  border-radius: var(--r-field);
}

.journal-widget-link {
  padding: 7px 8px;
}

.journal-widget-link:hover,
.journal-widget-link:focus-visible,
.journal-widget-link.is-active,
.journal-widget-link[aria-pressed='true'] {
  color: var(--leaf-dark);
  background: rgba(15,109,75,.055);
}

.journal-widget-link span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.journal-widget-link small {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 25px;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  color: var(--text-3);
  font-size: .72rem;
  font-weight: 800;
  background: rgba(15,109,75,.065);
  border-radius: var(--r-pill);
}

.journal-widget--feed {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.journal-widget--feed p {
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: .88rem;
  line-height: 1.38;
}

@media (max-width: 1023px) {

  .journal-widget--feed {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .journal-widget {
    padding: 14px;
  }

  .journal-widget-post {
    grid-template-columns: 26px 58px minmax(0, 1fr);
    gap: 9px;
  }
}

/* journal blogar structure */
.journal-blogar {
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,250,247,.74) 48%, rgba(255,255,255,.98) 100%),
    var(--sand);
}

.journal-blogar a {
  text-decoration: none;
}

.journal-blogar-hero,
.journal-blogar-list-hero,
.journal-post-hero {
  overflow: clip;
  background:
    radial-gradient(circle at 84% 18%, rgba(241,210,164,.28) 0, rgba(241,210,164,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(243,248,244,.78) 100%);
}

.journal-blogar-hero {
  padding: 48px 0;
}

.journal-blogar-list-hero__inner,
.journal-post-hero__copy {
  min-width: 0;
}

.journal-blogar-list-hero h1,
.journal-post-hero h1 {
  max-width: 980px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 3.08rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.journal-blogar-list-hero p,
.journal-post-hero__copy > p {
  max-width: 720px;
  margin: 0;
  color: var(--text-2);
  font-size: 1.04rem;
  line-height: 1.62;
}

.journal-blogar-hero__grid {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.journal-blogar-feature,
.journal-blogar-side-card,
.journal-blogar-story,
.journal-post-row {
  min-width: 0;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(31,55,46,.12);
  border-radius: var(--r-card);
  box-shadow: 0 14px 38px rgba(7,27,20,.055);
}

.journal-blogar-feature {
  position: relative;
  display: grid;
  min-height: 420px;
  background: rgba(15,109,75,.08);
  border-color: var(--border-s);
  box-shadow: var(--el-4);
}

.journal-blogar-side-card {
  position: relative;
  min-height: 240px;
  background: rgba(15,109,75,.08);
  border-color: rgba(15,109,75,.16);
  box-shadow: 0 18px 42px rgba(7,27,20,.08);
}

.journal-blogar-feature__image,
.journal-blogar-side-card__image,
.journal-blogar-story__image,
.journal-post-row__image,
.journal-post-hero__cover {
  display: block;
  min-width: 0;
  overflow: hidden;
  background: var(--mint);
}

.journal-blogar-feature__image,
.journal-blogar-side-card__image {
  position: absolute;
  inset: 0;
}

.journal-blogar-feature::after,
.journal-blogar-side-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    radial-gradient(ellipse at 24% 90%, rgba(7,27,20,.52) 0%, rgba(7,27,20,.28) 36%, rgba(7,27,20,0) 72%),
    linear-gradient(180deg, rgba(7,27,20,.02) 0%, rgba(7,27,20,.12) 48%, rgba(7,27,20,.58) 100%),
    linear-gradient(135deg, rgba(216,248,237,.08) 0%, rgba(15,109,75,.1) 100%);
  pointer-events: none;
}

.journal-blogar-feature__image img,
.journal-blogar-side-card__image img,
.journal-blogar-story__image img,
.journal-post-row__image img,
.journal-post-hero__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journal-blogar-feature__image img,
.journal-blogar-side-card__image img {
  transition: transform .34s var(--ease), filter .34s var(--ease);
}

.journal-blogar-feature__image img {
  aspect-ratio: auto;
}

.journal-blogar-feature__body {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  align-content: end;
  align-self: end;
  max-width: 820px;
  padding: clamp(24px, 2.6vw, 36px);
  color: var(--text-inv);
  text-shadow: 0 2px 18px rgba(7,27,20,.62);
}

.journal-blogar-feature h2,
.journal-blogar-side-card h2,
.journal-blogar-story h2,
.journal-post-row h2 {
  margin: 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
}

.journal-blogar-feature h2 {
  color: var(--text-inv);
  font-size: 1.96rem;
  line-height: 1.08;
  text-wrap: balance;
}

.journal-blogar-feature h2 a,
.journal-blogar-side-card h2 a,
.journal-blogar-story h2 a,
.journal-post-row h2 a,
.journal-widget-post,
.journal-blogar-read {
  color: inherit;
}

.journal-blogar-feature p,
.journal-post-row p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.58;
}

.journal-blogar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--text-3);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
}

.journal-blogar-meta a,
.journal-blogar-meta span,
.journal-blogar-meta time {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  color: inherit;
}

.journal-blogar-meta a {
  padding: 0 10px;
  color: var(--leaf-dark);
  background: rgba(15,109,75,.08);
  border-radius: var(--r-pill);
}

.journal-blogar-read {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  color: var(--leaf-dark);
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 800;
  text-decoration: none;
}

.journal-blogar-story:hover h2 a,
.journal-blogar-story:focus-within h2 a,
.journal-post-row:hover h2 a,
.journal-post-row:focus-within h2 a,
.journal-blogar-read:hover,
.journal-blogar-read:focus-visible {
  color: var(--leaf-dark);
}

.journal-blogar-feature:hover .journal-blogar-feature__body,
.journal-blogar-feature:focus-within .journal-blogar-feature__body,
.journal-blogar-side-card:hover .journal-blogar-side-card__body,
.journal-blogar-side-card:focus-within .journal-blogar-side-card__body {
  color: var(--text-inv);
}

.journal-blogar-feature:hover .journal-blogar-feature__image img,
.journal-blogar-feature:focus-within .journal-blogar-feature__image img,
.journal-blogar-side-card:hover .journal-blogar-side-card__image img,
.journal-blogar-side-card:focus-within .journal-blogar-side-card__image img {
  filter: saturate(1.04) contrast(1.03);
  transform: scale(1.014);
}

.journal-blogar-feature:hover h2 a,
.journal-blogar-feature:focus-within h2 a,
.journal-blogar-side-card:hover h2 a,
.journal-blogar-side-card:focus-within h2 a {
  color: var(--text-inv);
  text-decoration: none;
}

.journal-blogar-hero__side,
.journal-blogar-story-grid,
.journal-post-list,
.journal-blogar-main,
.journal-blogar-sidebar {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.journal-blogar-side-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.journal-blogar-side-card__image img {
  aspect-ratio: 1;
}

.journal-blogar-side-card__body,
.journal-blogar-story__body,
.journal-post-row__body {
  display: grid;
  gap: 10px;
  align-content: center;
  min-width: 0;
  padding: 16px;
}

.journal-blogar-side-card__body {
  position: relative;
  z-index: 2;
  align-content: end;
  align-self: end;
  padding: 18px;
  color: var(--text-inv);
  text-shadow: 0 2px 16px rgba(7,27,20,.62);
}

.journal-blogar-side-card h2,
.journal-blogar-story h2 {
  font-size: 1rem;
  line-height: 1.16;
}

.journal-blogar-side-card h2 {
  color: var(--text-inv);
  text-wrap: balance;
}

.journal-blogar-feature .journal-blogar-meta,
.journal-blogar-side-card .journal-blogar-meta {
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 12px rgba(7,27,20,.34);
}

.journal-blogar-feature .journal-blogar-meta span,
.journal-blogar-feature .journal-blogar-meta time,
.journal-blogar-side-card .journal-blogar-meta span,
.journal-blogar-side-card .journal-blogar-meta time {
  min-height: 30px;
  padding: 0 10px;
  color: rgba(255,255,255,.92);
  background: rgba(7,27,20,.28);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.journal-blogar-feature .journal-blogar-meta__category,
.journal-blogar-side-card .journal-blogar-meta__category {
  min-height: 30px;
  padding: 0 12px;
  color: var(--leaf-dark);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,109,75,.22);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 22px rgba(7,27,20,.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-shadow: none;
}

.journal-blogar-controls {
  padding: 20px 0 0;
}

.journal-blogar-section {
  padding: 30px 0 72px;
}

.journal-blogar-layout {
  display: grid;
  gap: 28px;
  min-width: 0;
  align-items: start;
}

.journal-blogar-stories,
.journal-blogar-feed {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.journal-blogar-story-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.journal-blogar-story__image img {
  aspect-ratio: 4 / 3;
}

.journal-post-list {
  gap: 18px;
}

.journal-post-row {
  display: grid;
  grid-template-columns: minmax(260px, .42fr) minmax(0, .58fr);
}

.journal-post-row__image img {
  min-height: 250px;
  aspect-ratio: 16 / 11;
}

.journal-post-row h2 {
  font-size: 1.4rem;
  line-height: 1.12;
}

.journal-blogar-layout--list .journal-post-row__body {
  gap: 12px;
  padding: 22px;
}

.journal-blogar-layout--list .journal-post-row h2 {
  font-size: 1.46rem;
}

.journal-blogar-layout--list .journal-post-row__chips {
  display: none;
}

.journal-post-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.journal-post-row__chips span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 800;
  background: rgba(15,109,75,.055);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
}

.journal-blogar-list-hero {
  padding: 34px 0 28px;
}

.journal-blogar-list-hero__inner {
  display: grid;
  gap: 14px;
}

.journal-post-hero {
  padding: 0;
  color: var(--text-inv);
  background: var(--ink);
}

.journal-post-hero__inner {
  position: relative;
  display: grid;
  min-height: clamp(600px, 52vw, 760px);
  align-content: end;
  gap: 24px;
  isolation: isolate;
  padding-top: 116px;
  padding-bottom: 70px;
}

.journal-post-hero__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  justify-items: start;
  max-width: 900px;
  margin: 0;
  color: var(--text-inv);
  text-align: left;
}

.journal-post-hero__copy .journal-blogar-meta {
  justify-content: flex-start;
  color: rgba(255,255,255,.82);
}

.journal-post-hero__copy .journal-blogar-meta a {
  color: var(--ink);
  background: rgba(255,255,255,.82);
}

/* Author byline sits on the dark hero — light text + readable green role */
.journal-post-hero__copy .journal-author-chip {
  text-shadow: 0 2px 16px rgba(7, 27, 20, .45);
}

.journal-post-hero__copy .journal-author-chip__avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .3);
}

.journal-post-hero__copy .journal-author-chip__name {
  color: var(--text-inv);
}

.journal-post-hero__copy .journal-author-chip__role {
  color: var(--leaf);
}

.journal-post-hero .journal-crumbs {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.78);
}

.journal-post-hero .journal-crumbs a,
.journal-post-hero h1 {
  color: var(--text-inv);
}

.journal-post-hero h1 {
  text-shadow: 0 3px 28px rgba(7,27,20,.48);
}

.journal-post-hero .journal-post-hero__copy h1 {
  max-width: 900px;
  font-size: clamp(2.28rem, 3.8vw, 3.2rem);
  line-height: 1.04;
}

.journal-post-hero__copy > p {
  max-width: 720px;
  color: rgba(255,255,255,.84);
  font-size: 1.02rem;
  line-height: 1.66;
  text-shadow: 0 2px 18px rgba(7,27,20,.44);
}

.journal-post-hero__cover {
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.journal-post-hero__cover::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(7,27,20,.14) 0%, rgba(7,27,20,.08) 36%, rgba(7,27,20,.82) 100%),
    linear-gradient(90deg, rgba(7,27,20,.42) 0%, rgba(7,27,20,.12) 52%, rgba(7,27,20,.2) 100%);
  pointer-events: none;
}

.journal-post-hero__cover img {
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-position: center 42%;
}

.journal-article--blogar .journal-article__layout,
.journal-article--blogar .journal-article__layout.has-no-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  justify-content: stretch;
  padding-top: 34px;
  padding-bottom: 72px;
}

.journal-article--blogar .journal-article__body {
  width: 100%;
  max-width: 700px;
  min-width: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.journal-article--blogar .journal-article__body > p:first-of-type {
  color: var(--text-2);
  font-size: 1.04rem;
  line-height: 1.66;
}

.journal-article--blogar .journal-article__body h2 {
  margin-top: 2em;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.8vw, 1.85rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* --- Journal article: editorial styling (premium, marker-free) --- */

/* No decorative tick above section headings — clean typographic hierarchy. */
.journal-article--blogar .journal-article__body h2::before {
  content: none;
}

/* Lead paragraph: emphasized intro with a refined green accent (kept by request) */
.journal-article--blogar .journal-article__body > p:first-of-type {
  position: relative;
  margin-bottom: 1.6em;
  padding-left: 20px;
  border-left: 0;
  color: var(--text-1);
  font-size: 1.12rem;
  line-height: 1.65;
}

.journal-article--blogar .journal-article__body > p:first-of-type::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--leaf);
}

/* Key terms */
.journal-article__body strong {
  color: var(--ink);
  font-weight: 800;
}

.journal-article__body a:hover {
  color: var(--leaf);
}

/* Inline highlight */
.journal-article__body mark {
  padding: 0 .18em;
  border-radius: 4px;
  background: rgba(241, 210, 164, .55);
  color: inherit;
}

/* Pull-quote */
.journal-article__body blockquote {
  position: relative;
  margin: 2em 0;
  padding: 8px 0 8px 36px;
  border: 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: clamp(1.24rem, 1.7vw, 1.5rem);
  line-height: 1.42;
}

.journal-article__body blockquote::before {
  content: "«";
  position: absolute;
  top: -.22em;
  left: -4px;
  color: var(--leaf);
  opacity: .4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3em;
  line-height: 1;
}

.journal-article__body blockquote p:last-child {
  margin-bottom: 0;
}

/* Captions for plain figures (not the card photo blocks) */
.journal-article__body figure:not([class]) {
  margin: 28px 0;
}

.journal-article__body figure:not([class]) img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

.journal-article__body figure:not([class]) figcaption {
  margin-top: 10px;
  color: var(--text-3);
  font-size: .9rem;
  line-height: 1.45;
  text-align: center;
}

/* Decorative divider */
.journal-article__body hr {
  width: 100%;
  height: 0;
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--border-2);
}

/* Note → quiet, elevated callout (no accent bar, no icon badge) */
.journal-article__body .journal-note {
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(20, 120, 86, .055), rgba(20, 120, 86, .03));
  border: 1px solid rgba(15, 109, 75, .14);
  border-radius: 18px;
  box-shadow: var(--el-1);
  color: var(--text-1);
  line-height: 1.7;
}

.journal-article__body .journal-note::before {
  content: none;
}

.journal-article__body .journal-note strong {
  color: var(--leaf-dark);
  font-weight: 800;
}

/* Checklist → same elevated card as the note; keeps the green check badges */
.journal-article__body .journal-checklist {
  padding: 20px 24px;
  background: var(--surface-matte);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  box-shadow: var(--el-1);
}

.journal-article__body .journal-checklist li {
  padding-left: 28px;
}

.journal-article__body .journal-checklist li::before {
  top: .28em;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--leaf-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-radius: 50%;
}

.journal-blogar-sidebar--article {
  align-self: start;
}

.journal-widget {
  background: rgba(255,255,255,.94);
  border-color: var(--border-hairline);
}

.journal-blogar-sidebar {
  gap: 22px;
}

.journal-blogar-sidebar .journal-widget,
.journal-blogar-sidebar .journal-reading-panel {
  padding: 18px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(31,55,46,.12);
  border-radius: 0;
  box-shadow: none;
}

.journal-blogar-sidebar .journal-widget:first-child,
.journal-blogar-sidebar .journal-reading-panel:first-child {
  padding-top: 0;
  border-top: 0;
}

.journal-blogar-sidebar .journal-widget__title,
.journal-blogar-sidebar .journal-toc__title {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.journal-blogar-sidebar .journal-widget-post {
  grid-template-columns: 25px 58px minmax(0, 1fr);
  gap: 10px;
  min-height: 58px;
}

.journal-blogar-sidebar .journal-widget-post__num {
  width: 25px;
  min-width: 25px;
  height: 25px;
  min-height: 25px;
  color: var(--leaf-dark);
  background: rgba(15,109,75,.06);
  border: 1px solid rgba(15,109,75,.1);
}

.journal-blogar-sidebar .journal-widget-post__media {
  border-radius: 10px;
}

.journal-blogar-sidebar .journal-widget-post__body strong {
  font-size: .86rem;
}

.journal-widget--search {
  gap: 12px;
}

.journal-sidebar-search {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.journal-sidebar-search__field {
  position: relative;
  min-width: 0;
}

.journal-sidebar-search input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  color: var(--text-1);
  font: 800 .92rem var(--font-display);
  background: rgba(243,248,244,.8);
  border: 1px solid var(--border-2);
  border-radius: var(--r-field);
  outline: none;
}

.journal-sidebar-search__field.has-clear input {
  padding-right: 46px;
}

.journal-sidebar-search input:focus {
  border-color: var(--border-s);
  box-shadow: 0 0 0 3px rgba(25,167,123,.1);
}

.journal-sidebar-search__clear {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--leaf-dark);
  background: rgba(15,109,75,.08);
  border-radius: var(--r-pill);
  transform: translateY(-50%);
  transition: color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}

.journal-sidebar-search__clear:hover,
.journal-sidebar-search__clear:focus-visible {
  color: var(--text-inv);
  background: var(--leaf-dark);
  transform: translateY(-50%) scale(1.03);
}

.journal-sidebar-search__clear svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.journal-blogar-sidebar .journal-widget {
  box-shadow: none;
}

.journal-blogar-sidebar .journal-widget + .journal-widget,
.journal-blogar-sidebar .journal-reading-panel + .journal-widget {
  margin-top: 0;
}

@media (min-width: 768px) {
  .journal-blogar-hero__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .journal-blogar-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .journal-blogar-feature {
    min-height: 500px;
  }

  .journal-blogar-side-card {
    min-height: 241px;
  }

  .journal-blogar-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
    gap: 32px;
  }

  .journal-blogar-sidebar {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 112px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-gutter: stable;
  }

  .journal-article--blogar .journal-article__layout,
  .journal-article--blogar .journal-article__layout.has-no-toc {
    grid-template-columns: minmax(0, 700px) minmax(280px, 330px);
    justify-content: center;
  }
}

@media (min-width: 1280px) {
  .journal-blogar-layout {
    gap: 38px;
  }

  .journal-blogar-feature {
    min-height: 560px;
  }

  .journal-blogar-side-card {
    min-height: 271px;
  }

  .journal-blogar-list-hero h1,
.journal-post-hero h1 {
    font-size: 3.42rem;
  }
}

@media (max-width: 1023px) {
  .journal-blogar-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-widget--search,
  .journal-widget--feed {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .journal-blogar-hero,
  .journal-blogar-list-hero,
  .journal-post-hero {
    padding-top: 26px;
  }

  .journal-post-hero {
    padding-top: 0;
  }

  .journal-post-hero__inner {
    min-height: 540px;
    padding-top: 88px;
    padding-bottom: 34px;
  }

  .journal-blogar-list-hero h1,
.journal-post-hero h1 {
    font-size: 2.28rem;
    line-height: 1.04;
  }

  .journal-post-hero .journal-post-hero__copy h1 {
    font-size: 2.08rem;
    line-height: 1.06;
  }

  .journal-blogar-list-hero p,
.journal-post-hero__copy > p {
    font-size: .98rem;
  }

  .journal-blogar-feature__body {
    padding: 20px;
  }

  .journal-blogar-feature h2 {
    font-size: 1.56rem;
  }

  .journal-blogar-side-card__body {
    padding: 16px;
  }

  .journal-blogar-story-grid,
  .journal-blogar-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .journal-post-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .journal-blogar-layout--list .journal-post-row__body {
    padding: 18px;
  }

  .journal-post-row__image img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .journal-post-hero__cover {
    border-radius: 0;
  }

  .journal-post-hero__cover img {
    min-height: 0;
    aspect-ratio: auto;
    object-position: center center;
  }
}

@media (max-width: 479px) {
  .journal-blogar-feature,
  .journal-blogar-side-card {
    min-height: 300px;
  }

  .journal-blogar-list-hero h1,
.journal-post-hero h1 {
    font-size: 1.92rem;
  }

  .journal-post-hero__inner {
    min-height: 500px;
    padding-top: 82px;
  }

  .journal-post-hero .journal-post-hero__copy h1 {
    font-size: 1.84rem;
  }

  .logo {
    min-width: 44px;
    justify-content: center;
  }
}

/* ============================================================================
   JOURNAL INDEX v2 — редакционный магазинный layout (.jr система)
   Источник концепции: demo "Журнал и статья". Палитра/шрифты из app.css.
   Разметка: resources/views/journal/index.blade.php (классы .jr-*).
   Старые .journal-blogar-* индекс-стили ниже не используются на индексе
   (остаются для совместимости со статьёй до её редизайна).
   ============================================================================ */
.jr {
  --paper: #fbfaf6;
  --card: #ffffff;
  --hair: rgba(7,27,20,.09);
  --hair-2: rgba(7,27,20,.14);
  --r: 20px;
  --shadow: 0 1px 2px rgba(7,27,20,.04), 0 16px 36px rgba(7,27,20,.06);
  --shadow-sm: 0 1px 2px rgba(7,27,20,.04), 0 8px 20px rgba(7,27,20,.05);
  --text-1: rgba(7,27,20,.9);
  --text-2: rgba(7,27,20,.7);
  --text-3: rgba(7,27,20,.52);
  --text-4: rgba(7,27,20,.4);
  --font-display: "Onest", "Segoe UI", sans-serif;
  --font-text: "Manrope", "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  background: var(--paper);
  color: var(--ink, #071b14);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
}
.jr * { box-sizing: border-box; }
.jr-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* page intro + search */
.jr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding: clamp(30px, 4vw, 52px) 0 clamp(18px, 2vw, 26px); }
.jr-head__intro { min-width: 0; }
.jr-eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--leaf-dark, #0f6d4b); }
.jr-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.05rem, 4.2vw, 3.05rem); letter-spacing: -.03em; line-height: 1.05; margin: 14px 0 0; max-width: 18ch; color: var(--ink, #071b14); }
.jr-head p { margin: 15px 0 0; color: var(--text-2); font-size: clamp(1rem, 1.4vw, 1.1rem); max-width: 56ch; line-height: 1.55; }
.jr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-3); }
.jr-crumbs a { color: var(--leaf-dark, #0f6d4b); text-decoration: none; font-weight: 600; }
.jr-crumbs a:hover { text-decoration: underline; }
.jr-crumbs span { color: var(--text-4); }
.jr-head__search { position: relative; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hair-2); background: #fff; color: var(--text-3); min-width: 264px; flex: 0 0 auto; box-shadow: var(--shadow-sm); }
.jr-head__search svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jr-head__search input { border: 0; outline: 0; background: none; font: inherit; font-size: .9rem; width: 100%; color: var(--ink, #071b14); }
.jr-head__search input::placeholder { color: var(--text-3); }
.jr-head__search-clear { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--text-3); background: rgba(7,27,20,.05); flex: 0 0 auto; }
.jr-head__search-clear svg { width: 13px; height: 13px; stroke-width: 2.4; }
.jr-head__search-clear:hover { color: var(--ink, #071b14); background: rgba(7,27,20,.09); }

/* category bar */
.jr-cats { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 clamp(26px, 3vw, 38px); }
.jr-cat { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hair-2); background: #fff; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: .88rem; transition: border-color .16s, color .16s, background .16s; }
.jr-cat:hover { border-color: var(--leaf, #19a77b); color: var(--ink, #071b14); }
.jr-cat.is-active { background: var(--leaf-dark, #0f6d4b); border-color: var(--leaf-dark, #0f6d4b); color: #fff; }

/* featured hero */
.jr-hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; margin-bottom: clamp(38px, 5vw, 60px); }
.jr-feature { position: relative; border-radius: 26px; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; color: #fff; text-decoration: none; }
.jr-feature__img { position: absolute; inset: 0; }
.jr-feature__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.jr-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,27,20,0) 30%, rgba(7,27,20,.18) 52%, rgba(7,27,20,.86) 100%); }
.jr-feature__body { position: relative; z-index: 2; padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; }
.jr-tag { display: inline-flex; align-items: center; gap: 7px; align-self: start; height: 30px; padding: 0 13px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: .74rem; background: var(--sun, #f1d2a4); color: #5d3b12; }
.jr-feature h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.65rem, 2.6vw, 2.45rem); line-height: 1.07; letter-spacing: -.02em; margin: 0; max-width: 18ch; }
.jr-feature__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: .85rem; color: rgba(255,255,255,.85); }
.jr-feature__meta i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); }
.jr-hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.jr-side { position: relative; display: grid; grid-template-columns: 152px 1fr; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--hair); text-decoration: none; transition: box-shadow .2s, transform .2s; box-shadow: var(--shadow-sm); }
.jr-side:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.jr-side__img { overflow: hidden; min-height: 124px; }
.jr-side__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.jr-side__body { padding: 16px 18px; display: grid; gap: 7px; align-content: center; }
.jr-side__cat { font-family: var(--font-display); font-weight: 700; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leaf-dark, #0f6d4b); }
.jr-side__body h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.04rem; line-height: 1.18; margin: 0; color: var(--ink, #071b14); }
.jr-side__meta { font-size: .78rem; color: var(--text-3); }

/* main + sidebar */
.jr-layout { display: grid; grid-template-columns: minmax(0,1fr) 312px; gap: clamp(28px, 4vw, 56px); align-items: start; padding-bottom: 72px; }
.jr-main { min-width: 0; }
.jr-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.jr-section-head h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; margin: 0; color: var(--ink, #071b14); }
.jr-section-head a { color: var(--leaf-dark, #0f6d4b); text-decoration: none; font-weight: 700; font-size: .88rem; white-space: nowrap; }
.jr-section-head a:hover { text-decoration: underline; }

/* post feed (CSS-border dividers so load-more append stays clean) */
.jr-feed { display: grid; gap: 26px; }
.jr-post { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; text-decoration: none; }
.jr-post:not(:first-child) { border-top: 1px solid var(--hair); padding-top: 26px; }
.jr-post__img { aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; background: rgba(15,109,75,.06); }
.jr-post__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform .4s var(--ease, ease); }
.jr-post:hover .jr-post__img img { transform: scale(1.04); }
.jr-post__body { display: grid; gap: 10px; min-width: 0; }
.jr-post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: var(--text-3); }
.jr-post__meta b { color: var(--leaf-dark, #0f6d4b); font-weight: 700; }
.jr-post__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); }
.jr-post h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1.15; letter-spacing: -.015em; margin: 0; color: var(--ink, #071b14); transition: color .16s; }
.jr-post:hover h3 { color: var(--leaf-dark, #0f6d4b); }
.jr-post p { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.55; }
.jr-post__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.jr-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(15,109,75,.07); color: var(--text-2); font-size: .74rem; font-weight: 600; }

/* load more */
.jr-loadmore { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--hair); }
.jr-loadmore .load-more__meta { color: var(--text-3); font-size: .85rem; }

/* empty state */
.jr-empty { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 40px 28px; text-align: center; box-shadow: var(--shadow-sm); }
.jr-empty h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; margin: 0 0 8px; color: var(--ink, #071b14); }
.jr-empty p { margin: 0; color: var(--text-2); }

/* sidebar widgets */
.jr-aside { display: grid; gap: 18px; position: sticky; top: 84px; }
.jr-widget { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-sm); }
.jr-widget__title { font-family: var(--font-display); font-weight: 800; font-size: 1rem; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; color: var(--ink, #071b14); }
.jr-widget__title svg { width: 17px; height: 17px; fill: none; stroke: var(--leaf-dark, #0f6d4b); stroke-width: 1.8; }
.jr-pop { display: grid; gap: 14px; }
.jr-pop a { display: grid; grid-template-columns: 26px 56px 1fr; gap: 12px; align-items: center; text-decoration: none; }
.jr-pop__num { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: rgba(15,109,75,.32); }
.jr-pop__media { width: 56px; height: 56px; border-radius: 11px; overflow: hidden; background: rgba(15,109,75,.06); }
.jr-pop__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.jr-pop__body { min-width: 0; }
.jr-pop__body strong { display: block; font-size: .86rem; font-weight: 700; line-height: 1.25; color: var(--ink, #071b14); }
.jr-pop__body small { color: var(--text-3); font-size: .74rem; }
.jr-pop a:hover strong { color: var(--leaf-dark, #0f6d4b); }
.jr-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-tags a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hair-2); background: #fff; color: var(--text-2); text-decoration: none; font-size: .8rem; font-weight: 600; }
.jr-tags a:hover, .jr-tags a.is-active { border-color: var(--leaf, #19a77b); color: var(--leaf-dark, #0f6d4b); }
.jr-tags a.is-active { background: rgba(15,109,75,.07); }
.jr-tags small { margin-left: 5px; color: var(--text-4); }
.jr-widget--cta { background: linear-gradient(150deg, #0f6d4b, #0a5238); color: #fff; border: 0; }
.jr-widget--cta .jr-widget__title { color: #fff; }
.jr-widget--cta p { margin: 0 0 14px; font-size: .86rem; color: rgba(255,255,255,.85); line-height: 1.5; }
.jr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 12px; font-family: var(--font-display); font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; border: 0; }
.jr-btn--light { background: #fff; color: var(--leaf-dark, #0f6d4b); width: 100%; }
.jr-btn--light:hover { background: rgba(255,255,255,.92); }
.jr-btn--ghost { background: #fff; border: 1px solid var(--hair-2); color: var(--ink, #071b14); }
.jr-btn--ghost:hover { border-color: var(--leaf, #19a77b); color: var(--leaf-dark, #0f6d4b); }

/* responsive */
@media (max-width: 1023px) {
  .jr-head { flex-direction: column; gap: 18px; }
  .jr-head__search { width: 100%; min-width: 0; }
  .jr-hero { grid-template-columns: 1fr; }
  .jr-hero__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .jr-layout { grid-template-columns: 1fr; }
  .jr-aside { position: static; }
}
@media (max-width: 1023px) and (min-width: 681px) {
  .jr-post { grid-template-columns: 240px 1fr; gap: 20px; }
}
@media (max-width: 767px) {
  .jr-head h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); max-width: none; }
  .jr-cats { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 16px; -webkit-overflow-scrolling: touch; }
  .jr-cat { flex: 0 0 auto; }
  .jr-hero__side { grid-template-columns: 1fr; }
  .jr-feature { min-height: 380px; }
  .jr-feature h2 { font-size: 1.5rem; }
  .jr-feature__body { padding: 20px; }
  .jr-section-head h2 { font-size: 1.3rem; }
  .jr-post { grid-template-columns: 1fr; gap: 14px; }
  .jr-post h3 { font-size: 1.25rem; }
}
@media (max-width: 479px) {
  .jr-side { grid-template-columns: 110px 1fr; }
  .jr-side__body { padding: 12px 14px; }
  .jr-pop a { grid-template-columns: 20px 48px 1fr; }
}

/* ============================================================================
   JOURNAL ARTICLE v2 — иммерсивная статья (.jr-art-* система)
   Источник: demo "Журнал и статья". Сохранены hooks: schema.org itemprop,
   data-telegram-* (Instant View), data-journal-reading-panel + .journal-toc
   (scrollspy ставит .is-active). Разметка: resources/views/journal/show.blade.php
   ============================================================================ */

/* immersive hero */
.jr-art-hero { position: relative; color: #fff; overflow: hidden; }
.jr-art-hero__bg { position: absolute; inset: 0; margin: 0; }
.jr-art-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.jr-art-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,27,20,.42) 0%, rgba(7,27,20,.32) 38%, rgba(7,27,20,.85) 100%); }
.jr-art-hero__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: clamp(40px, 7vw, 92px) clamp(16px, 4vw, 40px) clamp(32px, 4vw, 50px); }
.jr-art-hero .jr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.8); margin-bottom: 22px; }
.jr-art-hero .jr-crumbs a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; }
.jr-art-hero .jr-crumbs a:hover { color: #fff; text-decoration: underline; }
.jr-art-hero .jr-crumbs span { color: rgba(255,255,255,.5); }
.jr-art-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-size: .85rem; color: rgba(255,255,255,.88); margin-bottom: 16px; }
.jr-art-hero__meta .jr-tag { background: var(--sun, #f1d2a4); color: #5d3b12; text-decoration: none; }
.jr-art-hero__meta i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); }
.jr-art-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.05rem, 4.4vw, 3.35rem); line-height: 1.05; letter-spacing: -.025em; margin: 0; max-width: 20ch; color: #fff; text-shadow: 0 2px 24px rgba(7,27,20,.4); }
.jr-art-hero__lead { margin: 18px 0 0; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; color: rgba(255,255,255,.9); max-width: 60ch; }
.jr-byline { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.jr-byline__avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--sun, #f1d2a4); color: #5d3b12; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; border: 2px solid rgba(255,255,255,.3); flex: 0 0 auto; }
.jr-byline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.jr-byline__text strong { display: block; font-weight: 700; font-size: .92rem; }
.jr-byline__text span { font-size: .78rem; color: rgba(255,255,255,.75); }

/* layout */
/* Body + TOC are a cohesive pair (no huge gap between text and the sidebar);
   the whole journal is a centered ~1200 editorial column. */
.jr-art-layout { display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: clamp(36px, 3.5vw, 56px); padding: clamp(38px, 5vw, 62px) clamp(16px, 4vw, 40px) 72px; align-items: start; }
.jr-art-layout.has-no-toc { grid-template-columns: minmax(0,1fr) 200px; }

/* article body typography */
.jr-art-body { max-width: 760px; min-width: 0; font-size: 1.08rem; line-height: 1.75; color: var(--text-1); }
.jr-art-body > p { margin: 0 0 1.35em; }
.jr-art-body > p:first-child::first-letter { font-family: var(--font-display); font-weight: 800; font-size: 3.4em; line-height: .82; float: left; margin: .04em .12em 0 0; color: var(--leaf-dark, #0f6d4b); }
.jr-art-body h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; margin: 1.8em 0 .6em; scroll-margin-top: 84px; color: var(--ink, #071b14); }
.jr-art-body h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; margin: 1.5em 0 .5em; scroll-margin-top: 84px; color: var(--ink, #071b14); }
.jr-art-body :where(ul, ol) { margin: 0 0 1.35em; padding-left: 1.3em; }
.jr-art-body :where(ul) { list-style: disc outside; }
.jr-art-body :where(ol) { list-style: decimal outside; }
.jr-art-body :where(li) { display: list-item; margin: 0 0 .5em; padding-left: 2px; }
.jr-art-body :where(li)::marker { color: var(--leaf, #19a77b); font-size: .78em; }
.jr-art-body :where(ol li)::marker { font-size: .94em; font-weight: 700; }
.jr-art-body :where(p, li, blockquote, figcaption) a { color: var(--leaf-dark, #0f6d4b); text-underline-offset: 3px; }
.jr-art-body > img, .jr-art-body > p img, .jr-art-body > figure img { display: block; width: 100%; height: auto; border-radius: 16px; margin: 1.6em 0; }
.jr-art-body > figure { margin: 1.8em 0; }
.jr-art-body figcaption { font-size: .85rem; color: var(--text-3); text-align: center; margin-top: 10px; }
.jr-art-body .journal-product-card { margin: 1.9em 0; }
.jr-art-body .journal-note {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  margin: 1.8em 0;
  padding: 20px 22px;
  color: var(--text-1);
  line-height: 1.7;
  background: rgba(216,248,237,.5);
  border: 1px solid rgba(25,167,123,.22);
  border-radius: 16px;
  box-shadow: none;
}
.jr-art-body .journal-note::before {
  display: grid;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  place-items: center;
  content: "i";
  color: var(--leaf-dark, #0f6d4b);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.jr-art-body .journal-note p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-2); }
.jr-art-body .journal-note strong { display: block; margin-bottom: 4px; color: var(--leaf-dark, #0f6d4b); font-family: var(--font-display); font-weight: 800; }
.jr-art-body .journal-checklist {
  margin: 1.35em 0 1.7em;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.jr-art-body .journal-checklist ul {
  display: block;
  margin: 0 0 1.35em;
  padding-left: 1.3em;
  list-style: disc outside;
}
.jr-art-body .journal-checklist li {
  position: static;
  display: list-item;
  margin: 0 0 .5em;
  padding-left: 2px;
  line-height: inherit;
}
.jr-art-body .journal-checklist li::before {
  content: none;
}
.jr-art-body .journal-checklist li::marker {
  content: normal;
  color: var(--leaf, #19a77b);
  font-size: .78em;
}
.jr-art-body .journal-sources {
  margin: 2.4em 0 0;
  padding: 18px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hair);
  border-radius: 0;
  box-shadow: none;
}
.jr-art-body .journal-sources h2 {
  margin: 0 0 12px;
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}
.jr-art-body .journal-sources ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.jr-art-body .journal-sources li {
  display: block;
  margin: 0;
  padding-left: 0;
  color: var(--text-3);
  font-size: .95rem;
  line-height: 1.5;
}
.jr-art-body .journal-sources li::marker { content: ""; }
.jr-art-body .journal-sources a {
  color: var(--text-2);
  text-decoration-color: rgba(15,109,75,.24);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.jr-art-body .journal-sources a:hover {
  color: var(--leaf-dark, #0f6d4b);
  text-decoration-color: currentColor;
}
/* callouts + pull-quotes (authored markup or <blockquote>) */
.jr-art-body .jr-callout { background: rgba(216,248,237,.5); border: 1px solid rgba(25,167,123,.22); border-radius: 16px; padding: 20px 22px; margin: 1.8em 0; display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
.jr-art-body .jr-callout svg,
.jr-art-body .jr-callout__icon {
  display: grid;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  place-items: center;
  color: var(--leaf-dark, #0f6d4b);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.jr-art-body .jr-callout__icon::before { content: "i"; }
.jr-art-body .jr-callout svg { fill: none; stroke: var(--leaf-dark, #0f6d4b); stroke-width: 1.7; border: 0; border-radius: 0; }
.jr-art-body .jr-callout strong { font-family: var(--font-display); display: block; margin-bottom: 4px; }
.jr-art-body .jr-callout p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-2); }
.jr-art-body .jr-pull, .jr-art-body blockquote { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.28; letter-spacing: -.02em; color: var(--leaf-dark, #0f6d4b); border-left: 4px solid var(--sun, #f1d2a4); padding: 4px 0 4px 24px; margin: 1.6em 0; }
.jr-art-body blockquote p { margin: 0; }

/* author bio */
.jr-art-author { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hair); }
.jr-art-author__avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--leaf-dark, #0f6d4b); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; }
.jr-art-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.jr-art-author__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.jr-art-author strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin: 3px 0; color: var(--ink, #071b14); }
.jr-art-author__role { display: block; font-size: .82rem; color: var(--leaf-dark, #0f6d4b); font-weight: 600; margin-bottom: 4px; }
.jr-art-author p { margin: 4px 0 0; font-size: .88rem; color: var(--text-2); line-height: 1.5; }

/* TOC + share aside (scrollspy keys off .journal-toc a.is-active) */
.jr-art-aside { position: sticky; top: 84px; display: grid; gap: 18px; }
.jr-art-aside .jr-toc { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-sm); }
.jr-art-aside .jr-toc__title { font-family: var(--font-display); font-weight: 800; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.jr-art-aside .jr-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jr-art-aside .jr-toc li { margin: 0; }
.jr-art-aside .jr-toc a { display: block; padding: 8px 12px 8px 14px; border-left: 2px solid var(--hair); color: var(--text-2); text-decoration: none; font-size: .88rem; line-height: 1.35; transition: color .16s, border-color .16s, background .16s; }
.jr-art-aside .jr-toc a:hover { color: var(--ink, #071b14); background: rgba(15,109,75,.04); }
.jr-art-aside .jr-toc a.is-active { color: var(--leaf-dark, #0f6d4b); border-color: var(--leaf-dark, #0f6d4b); font-weight: 600; }
.jr-art-aside .jr-toc .journal-toc__item--level-3 a { padding-left: 26px; font-size: .84rem; }
.jr-share { display: flex; gap: 8px; }
.jr-share__btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--hair-2); display: grid; place-items: center; color: var(--text-2); background: #fff; transition: border-color .16s, color .16s, background .16s; }
.jr-share__btn:hover { border-color: var(--leaf, #19a77b); color: var(--leaf-dark, #0f6d4b); }
.jr-share__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.jr-share__btn--vk svg { fill: currentColor; stroke: none; }
.jr-share__copy.is-copied { border-color: var(--leaf, #19a77b); color: #fff; background: var(--leaf-dark, #0f6d4b); }

/* related */
.jr-related { padding: clamp(40px, 5vw, 60px) clamp(16px, 4vw, 40px) 80px; border-top: 1px solid var(--hair); }
.jr-related .jr-wrap { padding: 0; }
.jr-related .jr-section-head { margin-bottom: 26px; }
.jr-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.jr-card { background: var(--card); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; text-decoration: none; display: grid; align-content: start; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.jr-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.jr-card__img { aspect-ratio: 16/10; overflow: hidden; background: rgba(15,109,75,.06); }
.jr-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform .4s var(--ease, ease); }
.jr-card:hover .jr-card__img img { transform: scale(1.04); }
.jr-card__body { padding: 18px 20px 20px; display: grid; gap: 9px; }
.jr-card__meta { display: flex; align-items: center; gap: 10px; font-size: .76rem; color: var(--text-3); }
.jr-card__meta b { color: var(--leaf-dark, #0f6d4b); font-weight: 700; }
.jr-card__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); }
.jr-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.16rem; line-height: 1.18; letter-spacing: -.01em; margin: 0; color: var(--ink, #071b14); }
.jr-card p { margin: 0; font-size: .88rem; color: var(--text-2); line-height: 1.5; }

/* article responsive */
@media (max-width: 1023px) {
  .jr-art-layout, .jr-art-layout.has-no-toc { grid-template-columns: 1fr; }
  .jr-art-aside { position: static; }
  .jr-art-aside .jr-toc { display: none; }   /* TOC дублирует заголовки на узком — прячем */
  .jr-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .jr-art-body { font-size: 1.03rem; }
  .jr-art-body > p:first-child::first-letter { font-size: 2.8em; }
  .jr-art-body .jr-pull, .jr-art-body blockquote { font-size: 1.25rem; padding-left: 18px; }
  .jr-art-author { grid-template-columns: 1fr; text-align: left; }
  .jr-related__grid { grid-template-columns: 1fr; }
}

/* ── article fixes (override pre-existing .journal-* article styles) ───────── */
/* TOC: kill old per-link border-radius + ::before bar so only the clean left
   border-line shows (matches the demo prototype). */
.jr-art-aside .jr-toc a { border-radius: 0; min-height: 0; }
.jr-art-aside .jr-toc a::before { content: none; }
/* In-article product card: span the full content column. The old full-width
   variant was scoped to .journal-article__body; the new body is .jr-art-body,
   so base .journal-product-card (width:min(100%,240px)) was making it narrow. */
.jr-art-body .journal-product-card {
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: stretch;
  margin: 2.6em 0 2.2em;
  border-radius: 18px;
}
/* The right column (body) drives the card height (img is absolute, so the portrait
   photo can't force an over-tall card). Photo fills the whole media column (cover),
   crop biased up so the crown isn't cut. */
.jr-art-body .journal-product-card__media { position: relative; align-self: stretch; width: 100%; max-width: 100%; min-width: 0; aspect-ratio: auto; overflow: hidden; }
.jr-art-body .journal-product-card__media img,
.jr-art-body .journal-product-card__media span { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 30%; }
/* Even spacing inside the card: kill inherited margins (the h2 was adding ~50px above
   the title while meta/desc/button stayed cramped) and let one gap drive the rhythm. */
.jr-art-body .journal-product-card__body { align-content: start; gap: 12px; padding: 22px 24px; }
.jr-art-body .journal-product-card__body > * { margin: 0; }
@media (max-width: 767px) {
  .jr-art-body .journal-product-card { grid-template-columns: 1fr; }
  /* stacked: no body to stretch against, so give the image a definite ratio */
  .jr-art-body .journal-product-card__media { aspect-ratio: 16 / 10; min-height: 0; }
}