/* Visual treatment draft. Kept outside the deployed v10 source until approved. */
:root { --visual-accent: #c9ef82; }

/* Keep every story card readable; the illustration is atmosphere, not data. */
.news-card { position: relative; isolation: isolate; overflow: hidden; }
.news-card::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 57%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #10251d 1%, rgba(16, 37, 29, .25) 100%),
    url("market-bear.webp") center right / cover no-repeat;
  opacity: .13;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.news-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: 22px;
  top: 22px;
  border-top: 1px solid rgba(201, 239, 130, .24);
  border-right: 1px solid rgba(201, 239, 130, .24);
  pointer-events: none;
}
.news-card > * { position: relative; z-index: 1; }
.news-card .btn { margin-top: 8px; }

/* Forecast shelf: published cover and link only, never the paywalled analysis. */
.oil-forecast-card {
  display: grid;
  grid-template-columns: minmax(170px, 25%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 65px);
  margin-top: clamp(52px, 6vw, 100px);
  padding: clamp(20px, 3vw, 44px);
  border: 1px solid rgba(201, 239, 130, .3);
  background: linear-gradient(125deg, rgba(36, 64, 43, .84), rgba(8, 27, 17, .9));
  box-shadow: 0 24px 58px rgba(0, 0, 0, .25);
}
.oil-forecast-cover { display: block; max-width: 270px; box-shadow: 14px 16px 28px rgba(0, 0, 0, .43); }
.oil-forecast-cover img { display: block; width: 100%; height: auto; }
.oil-forecast-card h3 { font-size: clamp(27px, 2.8vw, 48px); line-height: 1.12; letter-spacing: -.045em; margin: .45em 0; text-wrap: balance; }
.oil-forecast-card p { color: #d9e4d6; font-size: clamp(16px, 1.1vw, 21px); line-height: 1.55; max-width: 55ch; }
.oil-forecast-card .oil-tier { color: #b5c9ad; font-size: clamp(13px, .9vw, 17px); margin: 1em 0 1.5em; }
.oil-forecast-card .eyebrow { color: var(--visual-accent); }

/* Interior pages share the same quiet editorial rhythm. */
.reader .intro-rule, .page .rule { box-shadow: 0 0 17px rgba(201, 239, 130, .25); }
.reader .contents, .reader .cta, .page .panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.reader .contents::before, .reader .cta::before, .page .panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: min(50%, 380px);
  opacity: .07;
  pointer-events: none;
  background: url("market-backdrop.webp") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
}
.reader .contents > *, .reader .cta > *, .page .panel > * { position: relative; z-index: 1; }

/* Visible keyboard focus and no decorative movement for reduced-motion readers. */
a:focus-visible, button:focus-visible { outline: 3px solid var(--visual-accent); outline-offset: 4px; }
@media (max-width: 760px) {
  .news-card::before { width: 85%; opacity: .075; }
  .news-card::after { width: 50px; height: 50px; right: 16px; top: 16px; }
  .reader .contents::before, .reader .cta::before, .page .panel::before { opacity: .045; }
  .oil-forecast-card { grid-template-columns: 1fr; gap: 26px; margin-top: 45px; }
  .oil-forecast-cover { width: min(66%, 250px); }
}
@media (prefers-reduced-motion: reduce) {
  .news-card, .news-card *, .reader .contents *, .reader .cta *, .page .panel * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}