:root {
  --bg: var(--bg-main, #030201);
  --text: var(--text-main, #f7efe3);
  --muted: var(--text-muted, #b8a891);
  --accent: var(--gold, #c99a2e);
  --accent-hot: var(--gold-soft, #d7b35b);
  --glow: rgba(201, 154, 46, .14);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--accent);
  font: 800 11px/1 var(--body, Inter, Arial, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.journal-hero { min-height: 70svh; display: grid; align-items: end; position: relative; overflow: hidden; background: #050607; }
.journal-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.55) saturate(.8) contrast(1.08); }
.journal-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.74) 68%,rgba(0,0,0,.9)),linear-gradient(180deg,rgba(0,0,0,.16),transparent 42%,var(--bg)); }
.journal-hero-content { position: relative; z-index: 2; padding: 160px 0 80px; }
.journal-hero h1 { max-width: 1000px; margin: 18px 0 22px; font-family: Manrope, Inter, Arial, sans-serif; font-size: clamp(66px,8vw,128px); line-height: .88; text-transform: uppercase; }
.journal-hero h1 span { color: transparent; -webkit-text-stroke: 1px var(--accent); }
.journal-hero p { max-width: 660px; margin: 0; color: #c8bbae; font-size: 17px; line-height: 1.65; }

.journal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 36px; }
.journal-card { display: grid; grid-template-columns: minmax(230px,.8fr) 1.2fr; min-height: 0; border: 1px solid rgba(201,154,46,.16); background: var(--surface); transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.journal-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 20px 48px rgba(0,0,0,.42),0 0 24px var(--glow); }
.journal-card-featured { grid-column: 1 / -1; min-height: 0; grid-template-columns: minmax(340px,.42fr) 1fr; }
.journal-card-image { aspect-ratio: 4 / 5; min-height: 0; position: relative; overflow: hidden; }
.journal-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 42%,rgba(0,0,0,.72)); }
.journal-card-image img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: brightness(.7) saturate(.82) contrast(1.1); transition: transform .8s ease,filter .4s ease; }
.journal-card:hover img { transform: scale(1.04); filter: brightness(.85) saturate(.95); }
.journal-card-image span { position: absolute; z-index: 2; left: 18px; bottom: 16px; color: var(--accent); font: 800 9px Manrope, Inter, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.journal-card-copy { display: grid; align-content: center; padding: clamp(24px,3.5vw,52px); }
.journal-card-copy h2 { margin: 0 0 18px; font-size: clamp(27px,3vw,46px); line-height: .98; text-transform: uppercase; }
.journal-card-copy p { margin: 0; color: var(--muted); line-height: 1.62; }
.journal-card-copy strong { margin-top: 30px; color: var(--accent-hot); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.article-hero { min-height: 78svh; display: grid; align-items: end; position: relative; overflow: hidden; }
.article-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.56) saturate(.84) contrast(1.1); }
.article-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.72) 74%),linear-gradient(180deg,rgba(0,0,0,.12),transparent 36%,var(--bg)); }
.article-heading { position: relative; z-index: 2; padding-bottom: 82px; }
.article-heading h1 { max-width: 1120px; margin: 22px 0; font-size: clamp(58px,7vw,112px); line-height: .9; text-transform: uppercase; }
.article-heading > p { max-width: 720px; margin: 0; color: #d3c6b8; font-size: 19px; line-height: 1.55; }
.article-body { display: grid; grid-template-columns: 220px minmax(0,760px); gap: clamp(40px,8vw,120px); justify-content: center; padding-top: 100px; padding-bottom: 120px; }
.article-body aside { display: flex; flex-direction: column; gap: 9px; position: sticky; top: 130px; height: fit-content; padding-left: 16px; border-left: 1px solid var(--accent); text-transform: uppercase; }
.article-body aside span,.article-body aside small { color: var(--accent); font: 800 9px Manrope, Inter, Arial, sans-serif; letter-spacing: .1em; }
.article-body aside strong { font-size: 13px; }
.article-prose p { margin: 0 0 30px; color: #bdb1a4; font-family: Manrope, Inter, Arial, sans-serif; font-size: 20px; line-height: 1.85; }
.article-prose .article-lead { color: var(--text); font-size: 26px; line-height: 1.65; }
.article-end { display: flex; justify-content: space-between; gap: 20px; margin-top: 64px; padding-top: 22px; border-top: 1px solid rgba(201,154,46,.26); color: var(--accent); font: 800 10px Manrope, Inter, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width:900px) {
  .journal-card,.journal-card-featured { grid-template-columns: 1fr; }
  .journal-card-image { min-height: 0; }
  .article-body { grid-template-columns: 1fr; }
  .article-body aside { position: static; }
}

@media (max-width:680px) {
  .journal-hero h1 { font-size: 58px; }
  .journal-grid { grid-template-columns: 1fr; }
  .journal-card-featured { grid-column: auto; }
  .journal-card-image { min-height: 0; }
  .article-hero { min-height: 82svh; }
  .article-heading h1 { font-size: 48px; }
  .article-heading > p { font-size: 16px; }
  .article-body { padding-top: 64px; padding-bottom: 80px; }
  .article-prose p { font-size: 18px; }
  .article-prose .article-lead { font-size: 21px; }
  .article-end { flex-direction: column; }
}

/* Black/gold journal polish for staging review. */
.journal-hero {
  background: #030404;
}

.journal-hero img,
.article-hero > img {
  filter: brightness(.48) saturate(.66) contrast(1.08);
}

.journal-hero::after,
.article-hero-overlay {
  background:
    radial-gradient(circle at 82% 12%, rgba(0,180,220,.055), transparent 28rem),
    linear-gradient(90deg, rgba(3,4,4,.12), rgba(3,4,4,.72) 68%, rgba(3,4,4,.94)),
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 42%, var(--bg));
}

.journal-hero h1,
.article-heading h1,
.journal-card-copy h2 {
  color: var(--text);
  text-shadow: none;
}

.journal-hero h1 span {
  color: var(--accent);
  -webkit-text-stroke: 0;
}

.journal-hero p,
.article-heading > p,
.article-prose p {
  color: rgba(246,242,234,.72);
}

.journal-card {
  border-color: rgba(246,242,234,.11);
  background:
    radial-gradient(circle at 84% 12%, rgba(0,180,220,.035), transparent 34%),
    linear-gradient(180deg, rgba(12,15,15,.94), rgba(5,6,6,.98));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.journal-card:hover {
  border-color: rgba(217,169,62,.48);
  box-shadow: inset 0 0 0 1px rgba(217,169,62,.08), 0 24px 70px rgba(0,0,0,.26), 0 0 26px rgba(217,169,62,.08);
}

.journal-card-image::after {
  background:
    radial-gradient(circle at 78% 18%, rgba(0,180,220,.06), transparent 38%),
    linear-gradient(180deg, transparent 30%, rgba(3,4,4,.84));
}

.journal-card-image span,
.journal-card-copy strong,
.article-body aside span,
.article-body aside small,
.article-end {
  color: var(--accent);
}

.article-body aside,
.article-end {
  border-color: rgba(217,169,62,.32);
}

.article-prose .article-lead {
  color: var(--text);
}

/* Mature journal refinement. */
.journal-hero img,
.article-hero > img {
  filter: brightness(.52) saturate(.62) contrast(1.04);
}

.journal-hero::after,
.article-hero-overlay {
  background:
    radial-gradient(circle at 82% 12%, rgba(64,151,165,.028), transparent 28rem),
    linear-gradient(90deg, rgba(4,5,5,.18), rgba(4,5,5,.72) 68%, rgba(4,5,5,.94)),
    linear-gradient(180deg, rgba(0,0,0,.14), transparent 42%, var(--bg));
}

.journal-hero h1 span {
  color: #c09a4b;
}

.journal-hero p,
.article-heading > p,
.article-prose p {
  color: rgba(241,238,231,.76);
  line-height: 1.8;
}

.journal-card {
  border-color: rgba(241,238,231,.09);
  background:
    radial-gradient(circle at 84% 12%, rgba(64,151,165,.022), transparent 34%),
    linear-gradient(180deg, rgba(12,14,14,.9), rgba(6,7,7,.98));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
}

.journal-card:hover {
  border-color: rgba(185,144,61,.32);
  box-shadow: inset 0 0 0 1px rgba(185,144,61,.045), 0 18px 54px rgba(0,0,0,.22);
}

.journal-card-image::after {
  background:
    radial-gradient(circle at 78% 18%, rgba(64,151,165,.035), transparent 38%),
    linear-gradient(180deg, transparent 30%, rgba(4,5,5,.82));
}

.journal-card-image span,
.journal-card-copy strong,
.article-body aside span,
.article-body aside small,
.article-end {
  color: #b9903d;
}

/* Staging-wide solid charcoal theme pass. */
:root {
  --bg: #0b0c0c;
  --surface: #111212;
  --surface-2: #161716;
  --text: #f1eee7;
  --muted: #b5afa5;
  --accent: #b8954a;
  --accent-hot: #d4b46b;
  --border: rgba(184, 149, 74, 0.24);
  --glow: rgba(184, 149, 74, 0.075);
}

html,
body {
  background: #0b0c0c !important;
}

body::before {
  opacity: 0.032 !important;
  mix-blend-mode: normal !important;
}

main,
section,
.journal-main,
.journal-hero,
.article-hero,
.article-body,
.journal-section,
.site-footer {
  background-color: #0b0c0c !important;
}

.site-header,
.nav-shell {
  background: rgba(11, 12, 12, 0.92) !important;
  border-color: rgba(184, 149, 74, 0.18) !important;
}

.journal-hero::after,
.article-hero-overlay {
  background:
    linear-gradient(90deg, rgba(11, 12, 12, 0.08), rgba(11, 12, 12, 0.72) 68%, rgba(11, 12, 12, 0.95)),
    linear-gradient(180deg, rgba(11, 12, 12, 0.04), transparent 42%, #0b0c0c) !important;
}

.journal-card,
.article-body aside,
.article-end,
.article-card {
  background: linear-gradient(180deg, rgba(19, 20, 20, 0.96), rgba(12, 13, 13, 0.98)) !important;
  border-color: rgba(184, 149, 74, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018) !important;
}

.journal-card:hover {
  border-color: rgba(212, 180, 107, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(212, 180, 107, 0.04),
    0 18px 44px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(184, 149, 74, 0.05) !important;
}

.journal-card-image::after {
  background: linear-gradient(180deg, transparent 32%, rgba(11, 12, 12, 0.86)) !important;
}

.journal-card-image span,
.journal-card-copy strong,
.article-body aside span,
.article-body aside small,
.article-end,
.eyebrow,
.section-kicker,
.meta {
  color: #d4b46b !important;
}