/* ============================================================================
   PRINS & PRINS — JOURNAL (blog index + single article)
   Loaded AFTER home_v2.css so it inherits all brand tokens.
   White ground + brass-gold accents + Cormorant serif. Mobile-first.
   ============================================================================ */

body.page-journal {
  background: var(--pp-paper-v2, #FBFBF7);
  color: var(--pp-ink-v2, #1A211C);
}
/* The single-article reading page keeps its light ground.  The journal INDEX
   (this page, no .page-article) gets the deep emerald house ground. */
body.page-journal:not(.page-article) {
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(44, 82, 64, 0.40) 0%, rgba(31, 61, 46, 0) 55%),
    linear-gradient(180deg, #173023 0%, #1F3D2E 45%, #16301F 100%) !important;
  background-attachment: fixed !important;
  color: #ECEFE9;
}
body.page-journal:not(.page-article) main { padding-top: 0; }
/* The article page keeps its original top offset below the fixed chrome */
body.page-journal.page-article main { padding-top: 96px; }
@media (max-width: 768px) { body.page-journal.page-article main { padding-top: 80px; } }

/* ----------------------------------------------------------------------------
   1 · HERO BAND
   --------------------------------------------------------------------------- */
/* IMAGE-LED HERO — green-leather house journal cover, mirrors team / home */
.jr-hero-v2 {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 72vh, 780px);
  overflow: hidden;
  background: #16301F;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 124px clamp(24px, 6vw, 96px) clamp(48px, 6vw, 84px);
}

.jr-hero-v2-picture,
.jr-hero-v2-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
.jr-hero-v2-img {
  object-fit: cover;
  object-position: center 40%;
  filter: contrast(1.04) saturate(1.06);
  animation: jrHeroIn 1.6s cubic-bezier(0.22, 0.7, 0.18, 1) both;
}
@keyframes jrHeroIn {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
.jr-hero-v2-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 16, 11, 0.84) 0%, rgba(8, 16, 11, 0.46) 40%, rgba(8, 16, 11, 0.06) 72%, rgba(8, 16, 11, 0) 100%),
    linear-gradient(180deg, rgba(8, 16, 11, 0.45) 0%, rgba(8, 16, 11, 0) 28%, rgba(8, 16, 11, 0) 62%, rgba(8, 16, 11, 0.55) 100%);
}
.jr-hero-v2-particles {
  position: absolute; inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.jr-hero-v2-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.jr-hero-v2-eyebrow {
  display: inline-block;
  font: 600 0.72rem/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: #FFFFFF;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.jr-hero-v2-h {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: #FFFFFF;
  margin: 0 0 20px;
  text-shadow: 0 4px 36px rgba(0, 0, 0, 0.55);
  animation: jrHeroFloat 6.5s ease-in-out infinite, jrHeroFlash 4.4s ease-in-out infinite;
}
.jr-hero-v2-h em {
  font-style: italic;
  color: #E8C16A;
  text-shadow: 0 0 18px rgba(232, 193, 106, 0.45);
  animation: jrHeroEmFlash 2.6s ease-in-out infinite;
}
@keyframes jrHeroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes jrHeroFlash {
  0%, 100% { text-shadow: 0 4px 36px rgba(0,0,0,0.55), 0 0 0 rgba(255,255,255,0); }
  50%      { text-shadow: 0 4px 36px rgba(0,0,0,0.55), 0 0 28px rgba(255,255,255,0.5), 0 0 60px rgba(228,236,223,0.3); }
}
@keyframes jrHeroEmFlash {
  0%, 100% { color: #E8C16A; text-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 0 0 rgba(255,241,196,0); }
  50%      { color: #FFF1C4; text-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 0 22px rgba(255,241,196,0.9), 0 0 48px rgba(212,175,110,0.6); }
}
.jr-hero-v2-sub {
  font: 300 clamp(1rem, 1.18vw, 1.18rem)/1.65 "Inter", system-ui, sans-serif;
  color: #FFFFFF;
  max-width: 540px;
  margin: 0;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
/* PHONES. The hero used to be 78vh tall, which forced object-fit:cover to crop the
   760x424 landscape plate down to 30% of its width and magnify it 5.12x. A shorter box
   plus a dedicated portrait derivative (built by tools/gen_journal_hero_portrait.py)
   shows the whole composition instead of a sliced fragment of the crest. Measured
   upscale drops from 5.12x to 0.91x. The text is top aligned so it sits on the calm
   dark field above the book rather than across it.
   NOTE: this block MUST stay below the base .jr-hero-v2-* rules. Specificity is equal,
   so it only wins on source order. Do not move it back up next to .jr-hero-v2. */
@media (max-width: 760px) {
  .jr-hero-v2 {
    /* 66vh, down from 78vh. The 524px floor only bites on short phones (375x667 class),
       where it is what keeps the standfirst clear of the top of the photograph. It costs
       nothing in sharpness: the crop is width limited on every phone, so the upscale
       factor is identical at 480px and at 524px. */
    min-height: clamp(524px, 66vh, 600px);
    padding: 100px 22px 34px;
    align-items: flex-start;
  }
  /* anchor to the bottom. The portrait file is deliberately taller than the box, so the
     leftover crop is taken off the empty upper field and never off the book, the loupe
     or the diamonds. */
  .jr-hero-v2-img { object-position: 50% 100%; }

  /* mostly vertical scrim on phones. The desktop scrim is left weighted, which on a
     narrow portrait box just darkens one side unevenly. */
  .jr-hero-v2-scrim {
    background:
      linear-gradient(180deg, rgba(8, 16, 11, 0.60) 0%, rgba(8, 16, 11, 0.34) 32%, rgba(8, 16, 11, 0.10) 54%, rgba(8, 16, 11, 0) 72%, rgba(8, 16, 11, 0.34) 100%),
      linear-gradient(90deg, rgba(8, 16, 11, 0.40) 0%, rgba(8, 16, 11, 0.14) 48%, rgba(8, 16, 11, 0) 80%);
  }

  /* keeps the eyebrow on one line. The global html{zoom:1.1} in site.css leaves only
     311 CSS px of content width on a 390pt phone, and 0.40em tracking needed ~327 px. */
  .jr-hero-v2-eyebrow {
    font-size: 0.60rem;
    letter-spacing: 0.13em;
    padding-bottom: 11px;
    margin-bottom: 15px;
  }
  .jr-hero-v2-h { margin-bottom: 16px; }
  .jr-hero-v2-sub { font-size: 0.97rem; line-height: 1.6; }
}

/* KNOWN, NOT FIXED HERE: the global WhatsApp button (A.wa-btn, position:fixed,
   z-index 500) rides up into the hero copy on short phones (375x667 class) and covers
   the tail of the standfirst. It is animated, so its box moves between paints, and it is
   owned by the shared site stylesheet and js, not by this file. Narrowing the standfirst
   to dodge it only worsened the rag without clearing it. Raising the hero content above
   z-index 500 would make the button untappable. Left for whoever owns the shared files.
   Note this collision also happened at 390x844 before this change and no longer does,
   because the copy now sits higher in the hero. */

@media (prefers-reduced-motion: reduce) {
  .jr-hero-v2-img, .jr-hero-v2-h, .jr-hero-v2-h em { animation: none !important; }
}

/* ANIMATED MARQUEE BANNER — emerald strip, scrolling topics */
.jr-marquee {
  background: #16301F;
  overflow: hidden;
  padding: 20px 0;
  border-top: 1px solid rgba(232, 193, 106, 0.18);
  border-bottom: 1px solid rgba(232, 193, 106, 0.18);
}
.jr-marquee-track {
  display: flex;
  width: max-content;
  animation: jrMq 34s linear infinite;
}
@keyframes jrMq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .jr-marquee-track { animation: none; } }
.jr-marquee-inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.jr-mq {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0 30px;
  font: 600 0.74rem/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.jr-mq-dot {
  width: 5px; height: 5px;
  background: #E8C16A;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(232, 193, 106, 0.65);
}

/* ----------------------------------------------------------------------------
   2 · FILTER BAR (sticky)  — topic pills + search
   --------------------------------------------------------------------------- */
.jr-filter {
  position: sticky;
  top: 96px;
  z-index: 60;
  background: rgba(13, 26, 18, 0.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid rgba(232, 193, 106, 0.16);
  border-bottom: 1px solid rgba(232, 193, 106, 0.20);
  padding: 14px clamp(20px, 4vw, 56px);
}
@media (max-width: 768px) { .jr-filter { top: 80px; } }
.jr-filter-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.jr-pills {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}
.jr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(232, 193, 106, 0.42);
  color: #ECEFE9;
  font: 700 0.62rem/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  border-radius: 999px;
  white-space: nowrap;
}
.jr-pill:hover {
  background: rgba(232, 193, 106, 0.12);
  border-color: #E8C16A;
  color: #FFFFFF;
}
.jr-pill[aria-pressed="true"] {
  background: #E8C16A;
  border-color: #E8C16A;
  color: #16301F;
}
.jr-pill .jr-pill-count {
  font-weight: 500;
  opacity: 0.7;
  margin-left: 4px;
  font-size: 0.85em;
  letter-spacing: 0.1em;
}
.jr-search {
  position: relative;
  flex: 0 1 240px;
  min-width: 0;
}
.jr-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(232, 193, 106, 0.32);
  color: #FFFFFF;
  font: 400 0.86rem/1.3 "Inter", system-ui, sans-serif;
  letter-spacing: 0;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  border-radius: 0;
}
.jr-search input::placeholder { color: rgba(236, 239, 233, 0.55); }
.jr-search input:focus {
  outline: 0;
  border-color: #E8C16A;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 3px rgba(232, 193, 106, 0.22);
}
.jr-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #E8C16A;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   3 · FEATURED ARTICLE (top of grid)
   --------------------------------------------------------------------------- */
.jr-grid-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 56px) clamp(36px, 4vw, 56px);
}
.jr-featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 3.5vw, 48px);
  background: #FBFBF7;
  border: 1px solid rgba(232, 193, 106, 0.34);
  box-shadow:
    0 0 0 1px rgba(232, 193, 106, 0.10),
    0 44px 90px -44px rgba(0, 0, 0, 0.7);
  margin-bottom: clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}
.jr-featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(232, 193, 106, 0.55) 18%,
    #E8C16A 38%, #FFF1C4 50%, #E8C16A 62%,
    rgba(232, 193, 106, 0.55) 82%, transparent 100%);
  box-shadow: 0 0 18px rgba(255, 241, 196, 0.7);
}
@media (max-width: 860px) { .jr-featured { grid-template-columns: 1fr; padding: 22px; } }

.jr-featured-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #F2F6EE 0%, #E4ECDF 100%);
}
.jr-featured-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.jr-featured:hover .jr-featured-img-wrap img { transform: scale(1.04); }

.jr-featured-body { padding: 8px 0; }
.jr-featured-eyebrow-row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.jr-featured-tag {
  display: inline-block;
  font: 800 0.62rem/1 "Inter", sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #1F3D2E;
  background: rgba(232, 193, 106, 0.18);
  border: 1px solid rgba(232, 193, 106, 0.45);
  padding: 6px 12px;
}
.jr-featured-meta {
  font: 500 0.70rem/1 "Inter", sans-serif;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #6D7F73;
}
.jr-featured-h {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1.08;
  color: #0F1A14;
  margin: 0 0 14px;
}
.jr-featured-h em { font-style: italic; }
.jr-featured-excerpt {
  font: 400 1rem/1.7 "Inter", sans-serif;
  color: #2D3D33;
  margin: 0 0 22px;
  max-width: 56ch;
}
.jr-featured-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 0.70rem/1 "Inter", sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #1F3D2E;
  text-decoration: none;
  border-bottom: 1px solid #1F3D2E;
  padding-bottom: 6px;
  transition: color 0.3s, border-color 0.3s, gap 0.3s;
}
.jr-featured-link:hover {
  color: #8C6B29;
  border-color: #E8C16A;
  gap: 16px;
}

/* ----------------------------------------------------------------------------
   4 · ARTICLE GRID
   --------------------------------------------------------------------------- */
.jr-grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.jr-grid-h {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 400;
  color: #FBFBF7;
  margin: 0;
  letter-spacing: -0.005em;
}
.jr-grid-h em { font-style: italic; color: #E8C16A; }
.jr-result-count {
  font: 500 0.7rem/1 "Inter", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 239, 233, 0.66);
}

/* Denser grid — smaller cards mean each thumbnail is downscaled harder, so the
   soft WordPress images read sharper. */
.jr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
@media (max-width: 1140px) { .jr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .jr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .jr-grid { grid-template-columns: 1fr; } }

.jr-card {
  display: flex;
  flex-direction: column;
  background: #FBFBF7;
  border: 1px solid rgba(232, 193, 106, 0.28);
  border-top: 2px solid rgba(232, 193, 106, 0.9);
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              border-color 0.4s, box-shadow 0.4s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 46px -32px rgba(0, 0, 0, 0.6);
}
.jr-card:hover {
  transform: translateY(-5px);
  border-color: #E8C16A;
  box-shadow:
    0 0 0 1px rgba(232, 193, 106, 0.35),
    0 34px 64px -28px rgba(0, 0, 0, 0.66),
    0 0 26px rgba(232, 193, 106, 0.16);
}
.jr-card-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #F2F6EE 0%, #E4ECDF 100%);
  border-bottom: 1px solid rgba(232, 193, 106, 0.28);
}
.jr-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(1.05);
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.jr-card:hover .jr-card-img-wrap img { transform: scale(1.05); }

.jr-card-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 18px 20px;
  flex: 1;
}
.jr-card-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.jr-card-tag {
  font: 800 0.55rem/1 "Inter", sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #1F3D2E;
  background: rgba(232, 193, 106, 0.18);
  border: 1px solid rgba(232, 193, 106, 0.40);
  padding: 5px 10px;
}
.jr-card-meta {
  font: 500 0.6rem/1 "Inter", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6D7F73;
}
.jr-card-h {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-size: 1.18rem;
  line-height: 1.2;
  font-weight: 400;
  color: #0F1A14;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jr-card-h em { font-style: italic; }
.jr-card-excerpt {
  font: 400 0.86rem/1.65 "Inter", sans-serif;
  color: #4A5450;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jr-card-cta {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 0.62rem/1 "Inter", sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #1F3D2E;
  border-top: 1px solid rgba(31, 61, 46, 0.10);
  transition: color 0.3s, gap 0.3s;
}
.jr-card-cta svg {
  transition: transform 0.3s;
}
.jr-card:hover .jr-card-cta { color: #8C6B29; gap: 12px; }
.jr-card:hover .jr-card-cta svg { transform: translateX(3px); }

/* Empty state */
.jr-empty {
  text-align: center;
  padding: 80px 24px;
  color: rgba(236, 239, 233, 0.78);
}
.jr-empty-mark {
  display: block;
  font-size: 1.6rem;
  color: #E8C16A;
  margin-bottom: 12px;
}
.jr-empty h3 {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 6px;
  color: #FBFBF7;
}
.jr-empty p { margin: 0; font-size: 0.92rem; line-height: 1.6; }

/* ----------------------------------------------------------------------------
   5 · PAGINATION
   --------------------------------------------------------------------------- */
.jr-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(40px, 5vw, 64px);
}
.jr-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid rgba(232, 193, 106, 0.42);
  background: transparent;
  color: #ECEFE9;
  font: 700 0.62rem/1 "Inter", sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.jr-pager-btn:hover:not(:disabled) {
  background: #E8C16A;
  border-color: #E8C16A;
  color: #16301F;
}
.jr-pager-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.jr-pager-info {
  font: 500 0.68rem/1 "Inter", sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(236, 239, 233, 0.82);
  white-space: nowrap;
}
.jr-pager-info em {
  font-style: normal;
  color: #E8C16A;
  font-weight: 800;
}

/* ----------------------------------------------------------------------------
   6 · CTA BAND (foot)
   --------------------------------------------------------------------------- */
.jr-cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(50, 92, 70, 0.55) 0%, transparent 70%),
    linear-gradient(180deg, #1F3D2E 0%, #173023 55%, #0E1F16 100%);
  color: #FBFBF7;
}
/* Cosmos starfield behind the CTA, same engine as the footer */
.jr-cta-band > .jr-cta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.jr-cta-band > .jr-cta-inner { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .jr-cta-band > .jr-cta-canvas { display: none !important; }
}
.jr-cta-inner {
  position: relative;
  max-width: 660px;
  margin: 0 auto;
  padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(20, 42, 30, 0.72) 0%, rgba(11, 25, 18, 0.72) 100%);
  border: 1px solid rgba(232, 193, 106, 0.26);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.85);
}
.jr-cta-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 30%, 220px);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #E8C16A 50%, transparent 100%);
  box-shadow: 0 0 14px rgba(232, 193, 106, 0.55);
}
.jr-cta-eyebrow {
  display: inline-block;
  font: 700 0.74rem/1 "Inter", sans-serif;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #E8C16A;
  margin-bottom: 14px;
}
.jr-cta-h {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  margin: 0 auto 18px;
  max-width: 700px;
}
.jr-cta-h em { font-style: italic; color: #E8C16A; }
.jr-cta-p {
  font: 400 0.98rem/1.65 "Inter", sans-serif;
  color: rgba(228, 236, 223, 0.88);
  margin: 0 auto 30px;
  max-width: 540px;
}
.jr-cta-actions {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.jr-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  font: 800 0.70rem/1 "Inter", sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.jr-cta-btn-primary {
  background: linear-gradient(180deg, #F0D284 0%, #E8C16A 55%, #B58A33 100%);
  color: #0F1A14;
  border: 1px solid #E8C16A;
  box-shadow:
    0 0 0 1px rgba(255, 241, 196, 0.4) inset,
    0 14px 32px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(232, 193, 106, 0.32);
}
.jr-cta-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 241, 196, 0.6) inset,
    0 18px 38px rgba(0, 0, 0, 0.5),
    0 0 36px rgba(232, 193, 106, 0.5);
}
.jr-cta-btn-ghost {
  background: transparent;
  border: 1px solid rgba(232, 193, 106, 0.55);
  color: #FBFBF7;
}
.jr-cta-btn-ghost:hover {
  background: #E8C16A;
  color: #0F1A14;
  border-color: #E8C16A;
}

/* The closing CTA flows straight into the unified footer LED beam (site.css). */

/* ============================================================================
   7 · SINGLE ARTICLE PAGE (article.html)
   ============================================================================ */

/* Reading progress bar — sticks under the appt strip */
.art-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 600;
  pointer-events: none;
}
.art-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #E8C16A 0%, #FFF1C4 50%, #E8C16A 100%);
  box-shadow: 0 0 8px rgba(255, 241, 196, 0.8), 0 0 18px rgba(232, 193, 106, 0.4);
  transition: width 0.08s linear;
}

/* Hero — TEXT-LED editorial opening on the brand emerald ground.
   The cover photo (most are low-res WordPress thumbnails) is shown small and
   framed as a "plate" so the browser only ever DOWNSCALES it — it can never be
   upscaled into a blur the way the old full-bleed cover was. */
.art-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(72px, 9vw, 128px) clamp(20px, 5vw, 64px) clamp(130px, 17vw, 210px);
  min-height: clamp(420px, 50vh, 560px);
  background:
    linear-gradient(180deg, rgba(8, 18, 12, 0.62) 0%, rgba(8, 18, 12, 0.26) 38%, rgba(8, 18, 12, 0.30) 68%, rgba(8, 18, 12, 0.60) 100%),
    url('../assets/images/article_template.webp') center top / cover no-repeat #0E1F16;
  color: #FBFBF7;
}
/* hairline gold beam easing the emerald hero into the cream article body */
.art-hero::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: clamp(120px, 28%, 240px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #E8C16A, transparent);
  box-shadow: 0 0 14px rgba(232, 193, 106, 0.5);
}
.art-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  color: #FBFBF7;
}
.art-hero-tag {
  display: inline-block;
  font: 800 0.66rem/1 "Inter", sans-serif;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #0F1A14;
  background: #E8C16A;
  padding: 7px 14px;
  margin-bottom: 22px;
}
.art-hero-h1 {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.8vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0 0 22px;
  color: #FFFFFF;
  text-wrap: balance;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 6px 30px rgba(0, 0, 0, 0.55);
}
.art-hero-h1 em { font-style: italic; color: #E8C16A; }
.art-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  font: 500 0.72rem/1 "Inter", sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(228, 236, 223, 0.92);
}
.art-hero-meta-dot { color: #E8C16A; opacity: 0.7; }

/* Small framed cover plate — width follows the image (never wider than it is),
   capped at 460px. fit-content + max-width means tiny sources show at NATIVE
   size (crisp) and large sources downscale to fit (also crisp). Never upscaled. */
.art-hero-plate {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: min(100%, 460px);
  margin: clamp(30px, 4vw, 48px) auto 0;
  padding: 0;
  line-height: 0;
  background: #0E1F16;
  border: 1px solid rgba(232, 193, 106, 0.55);
  box-shadow:
    0 0 0 1px rgba(232, 193, 106, 0.12),
    0 38px 72px -38px rgba(0, 0, 0, 0.82);
}
.art-hero-plate[hidden] { display: none; }
.art-hero-img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.06);
}

/* Body */
.art-body-wrap {
  background: #FBFBF7;
  padding: clamp(50px, 7vw, 96px) clamp(20px, 5vw, 64px);
}
.art-body {
  max-width: 740px;
  margin: 0 auto;
  font: 400 17px/1.78 "Inter", system-ui, sans-serif;
  color: #1A211C;
  letter-spacing: 0.005em;
}
.art-body > *:first-child { margin-top: 0; }
.art-body p {
  margin: 0 0 22px;
  text-wrap: pretty;
}
.art-body strong { font-weight: 600; color: #0F1A14; }
.art-body em { font-style: italic; }
.art-body a {
  color: #1F3D2E;
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 61, 46, 0.4);
  transition: color 0.3s, border-color 0.3s;
}
.art-body a:hover {
  color: #8C6B29;
  border-bottom-color: #E8C16A;
}
.art-body h2 {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1.15;
  margin: 48px 0 18px;
  color: #0F1A14;
  letter-spacing: -0.005em;
}
.art-body h2 em { font-style: italic; color: #1F3D2E; }
.art-body h2 strong { font-weight: inherit; }   /* WordPress wraps headings in <strong> — neutralise */
.art-body h3 {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.25;
  margin: 36px 0 14px;
  color: #0F1A14;
}
.art-body ul, .art-body ol {
  padding-left: 22px;
  margin: 0 0 22px;
}
.art-body li {
  margin-bottom: 8px;
  line-height: 1.72;
}
.art-body blockquote {
  margin: 32px 0;
  padding: 18px 22px;
  border-left: 3px solid #E8C16A;
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.4;
  color: #1F3D2E;
}
/* Body images are mostly remote WordPress thumbnails (often ~300px wide).
   width:auto + a small max-width means they render at native size or smaller,
   never blown up — so they read as crisp, intentional inset plates rather than
   the stretched, blurry full-width images they were before. */
.art-body img {
  display: block;
  width: auto;
  max-width: min(100%, 480px);
  height: auto;
  margin: 36px auto;
  background: #F2F6EE;
  border: 1px solid rgba(232, 193, 106, 0.45);
  box-shadow:
    0 0 0 1px rgba(232, 193, 106, 0.10),
    0 22px 48px -30px rgba(15, 26, 20, 0.4);
  filter: contrast(1.03) saturate(1.04);
}
.art-body figure {
  margin: 36px auto;
  width: fit-content;
  max-width: min(100%, 480px);
}
.art-body figure img { margin: 0 auto; }
.art-body figcaption {
  font: 500 0.78rem/1.5 "Inter", sans-serif;
  letter-spacing: 0.02em;
  color: #6D7F73;
  text-align: center;
  margin-top: 10px;
  font-style: italic;
  font-family: var(--serif, "Cormorant Garamond", serif);
}

/* End-of-article block */
.art-end {
  max-width: 740px;
  margin: 56px auto 0;
  padding-top: 36px;
  border-top: 1px solid rgba(31, 61, 46, 0.18);
  text-align: center;
}
.art-end-author {
  font: 700 0.66rem/1 "Inter", sans-serif;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #1F3D2E;
  margin-bottom: 22px;
}
.art-end-author em {
  font-style: normal;
  color: #6D7F73;
  font-weight: 500;
  margin-left: 6px;
}
.art-end-actions {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Related strip */
.art-related {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 56px);
}
.art-related-head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.art-related-eyebrow {
  display: inline-block;
  font: 700 0.66rem/1 "Inter", sans-serif;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #1F3D2E;
  margin-bottom: 14px;
}
.art-related-h {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.1;
  color: #0F1A14;
  margin: 0;
}
.art-related-h em { font-style: italic; color: #1F3D2E; }

/* Not-found state */
.art-missing {
  padding: 120px 24px;
  text-align: center;
  color: #4A5450;
  max-width: 560px;
  margin: 0 auto;
}
.art-missing h2 {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: 2rem;
  color: #0F1A14;
  margin: 0 0 12px;
}
.art-missing p { font-size: 1rem; line-height: 1.7; margin: 0 0 24px; }


/* ============================================================================
   8 · MUSEUM "FROM THE JOURNAL" STRIPS (museum-journal.js targets)
   Dark brass-framed glass so the strip belongs on the black museum ground
   instead of reading as a white box pasted on top.
   ============================================================================ */
.mus-related {
  margin: clamp(56px, 7vw, 92px) auto 0;
  max-width: 1280px;
  padding: clamp(34px, 4vw, 48px) clamp(20px, 4vw, 40px) 0;
  position: relative;
  border-top: 1px solid rgba(232, 193, 106, 0.22);
}
.mus-related-head {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.mus-related-eyebrow {
  display: inline-block;
  font: 600 0.66rem/1 "Inter", sans-serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #E8C16A;
  margin-bottom: 14px;
}
.mus-related-rule {
  display: block;
  height: 1px;
  width: 60px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent 0%, #C9A55C 50%, transparent 100%);
}
.mus-related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}
@media (max-width: 900px) { .mus-related-list { grid-template-columns: 1fr; gap: 14px; } }
.mus-related-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(28, 33, 35, 0.66) 0%, rgba(16, 19, 22, 0.66) 100%);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(232, 193, 106, 0.18);
  text-decoration: none;
  color: inherit;
  position: relative;
  isolation: isolate;
  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.8);
  transition: border-color 0.4s, transform 0.4s cubic-bezier(0.22, 0.7, 0.18, 1),
              box-shadow 0.4s, background 0.4s;
}
.mus-related-card:hover {
  border-color: rgba(232, 193, 106, 0.6);
  background: linear-gradient(180deg, rgba(36, 42, 44, 0.74) 0%, rgba(20, 24, 27, 0.74) 100%);
  transform: translateY(-3px);
  box-shadow:
    0 32px 60px -30px rgba(0, 0, 0, 0.85),
    0 0 22px rgba(232, 193, 106, 0.14);
}
.mus-related-thumb {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  object-fit: cover;
  background: #0F1316;
  border: 1px solid rgba(232, 193, 106, 0.28);
}
.mus-related-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mus-related-title {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: 1.04rem;
  line-height: 1.22;
  color: #F4F1E8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mus-related-arrow {
  font: 600 0.58rem/1 "Inter", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E8C16A;
}

/* ============================================================================
   JOURNAL ENHANCEMENTS — clear button, instant dropdown, sort, highlight,
   active multi-select pills
   ============================================================================ */

/* Active topic pill (multi-select) */
.jr-pill.is-active,
.jr-pill[aria-pressed="true"] {
  background: #E8C16A;
  border-color: #E8C16A;
  color: #14181A;
}
.jr-pill.is-active .jr-pill-count,
.jr-pill[aria-pressed="true"] .jr-pill-count {
  background: rgba(20, 24, 26, 0.18);
  color: #14181A;
}

/* Search field needs room for the clear button + anchored dropdown */
.jr-search { flex: 0 1 280px; }
.jr-search input { padding-right: 36px; }

.jr-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  background: rgba(232, 193, 106, 0.16);
  border: 1px solid rgba(232, 193, 106, 0.40);
  color: #E8C16A;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.jr-search-clear:hover {
  background: #E8C16A;
  color: #14181A;
  transform: translateY(-50%) rotate(90deg);
}

/* Instant results dropdown */
.jr-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #15211B;
  border: 1px solid rgba(232, 193, 106, 0.34);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  animation: jrSuggestIn 0.2s ease-out;
}
@keyframes jrSuggestIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jr-suggest-item {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 193, 106, 0.10);
  transition: background 0.18s;
}
.jr-suggest-item:last-of-type { border-bottom: 0; }
.jr-suggest-item:hover,
.jr-suggest-item.is-active { background: rgba(232, 193, 106, 0.12); }
.jr-suggest-thumb {
  width: 46px; height: 46px;
  overflow: hidden;
  background: #0F1A14;
  border: 1px solid rgba(232, 193, 106, 0.20);
  flex-shrink: 0;
}
.jr-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-suggest-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.jr-suggest-title {
  font: 400 0.92rem/1.3 "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  color: #F4F1E8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jr-suggest-tag {
  font: 600 0.56rem/1 "Inter", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C9A55C;
}
.jr-suggest-arrow { color: #E8C16A; opacity: 0; transition: opacity 0.2s, transform 0.2s; }
.jr-suggest-item:hover .jr-suggest-arrow,
.jr-suggest-item.is-active .jr-suggest-arrow { opacity: 1; transform: translateX(3px); }
.jr-suggest-empty {
  padding: 18px 16px;
  font: 400 0.9rem/1.4 "Inter", sans-serif;
  color: rgba(236, 239, 233, 0.6);
}
.jr-suggest-all {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: rgba(232, 193, 106, 0.10);
  border: 0;
  border-top: 1px solid rgba(232, 193, 106, 0.22);
  color: #E8C16A;
  font: 600 0.64rem/1 "Inter", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}
.jr-suggest-all:hover { background: rgba(232, 193, 106, 0.20); }

/* Matched-term highlight in grid cards + dropdown */
.jr-mark {
  background: rgba(232, 193, 106, 0.30);
  color: inherit;
  padding: 0 1px;
  border-radius: 1px;
  box-shadow: inset 0 -2px 0 rgba(232, 193, 106, 0.6);
}

/* Grid head tools: count + sort */
.jr-grid-tools {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.jr-sort { display: inline-flex; align-items: center; gap: 10px; }
.jr-sort-label {
  font: 600 0.62rem/1 "Inter", sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(236, 239, 233, 0.55);
}
.jr-sort-field { position: relative; display: inline-flex; align-items: center; }
.jr-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(232, 193, 106, 0.32);
  color: #F4F1E8;
  font: 500 0.78rem/1 "Inter", sans-serif;
  letter-spacing: 0.02em;
  padding: 9px 32px 9px 14px;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 0.2s, background 0.2s;
}
.jr-sort-select:hover { border-color: rgba(232, 193, 106, 0.55); }
.jr-sort-select:focus { outline: 0; border-color: #E8C16A; box-shadow: 0 0 0 3px rgba(232, 193, 106, 0.2); }
.jr-sort-select option { background: #15211B; color: #F4F1E8; }
.jr-sort-chev {
  position: absolute;
  right: 11px;
  pointer-events: none;
  color: #E8C16A;
}

@media (max-width: 600px) {
  .jr-grid-tools { width: 100%; justify-content: space-between; }
  .jr-search { flex: 1 1 100%; }
}

/* ============================================================================
   9 · JOURNAL INDEX GRID — staggered reveal + deeper lift on the emerald ground
   Scoped to the index (not the article-page related grid) so the set reads as
   a crafted editorial collection rather than a block of identical cards.
   ============================================================================ */
body.page-journal:not(.page-article) .jr-card {
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.72);
  animation: jrCardIn 0.55s cubic-bezier(0.22, 0.7, 0.18, 1) backwards;
}
body.page-journal:not(.page-article) .jr-card:nth-child(3n+2) { animation-delay: 0.07s; }
body.page-journal:not(.page-article) .jr-card:nth-child(3n)   { animation-delay: 0.14s; }
@keyframes jrCardIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-journal:not(.page-article) .jr-card { animation: none; }
}