:root {
  --ink: #17211d;
  --muted: #66716b;


  --green: #225c45;
  --green-2: #2f7a5b;

  --amber: #a45c1f;
  --red: #a04538;

}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;

  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container {  margin: 0 auto; }
.narrow { width: min(760px, 100%); }


.section-muted {  border-block: 1px solid var(--line); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;

  backdrop-filter: blur(14px);
}
.header-inner {  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px;  letter-spacing: -0.03em;  }
.brand-mark { width: 18px; height: 18px; border-radius: 50% 50% 50% 8px; background: var(--green); transform: rotate(-38deg); display: inline-block; }
.nav { display: flex;  color: #49534e;   }
.nav a:hover, .active-link { color: var(--green); }

.eyebrow { margin: 0 0 12px; text-transform: uppercase;  font-weight: 800; color: var(--green);  }
.hero-grid { display: grid;   align-items: center; }
h1, h2, h3 { margin-top: 0; }
.hero h1, .page-title { font-family: Newsreader, Georgia, serif; font-weight: 700;  line-height: .97; font-size: clamp(3.35rem, 8vw, 6.8rem); margin: 0 0 24px; }
.hero h1 span { color: var(--green); }
.hero-copy, .page-lede {  color: var(--muted);  margin: 0 0 22px; }
.status-row { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: var(--muted); }


.why-card, .chart-card, .pipeline-card, .calculator-card, .newsletter-card, .notice-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.card-kicker { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;  }
.why-card h2 { font-family: Newsreader, Georgia, serif;  line-height: 1.05; letter-spacing: -.035em;  }
.why-card p { color: var(--muted); margin-top: 0; }
.accent { color: var(--amber); }

.signal {
  display: grid;

  align-items: center;


  border-bottom: 1px solid var(--line);

}

.signal > span {
  min-width: 0;
}

.signal strong {
  display: contents;
  font-size: .84rem;
  white-space: nowrap;
}

.signal-direction {
  text-align: right;

}

.signal-delta {
  text-align: right;


  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;

  opacity: 1;
}

/* Keep the direction colored, but make the numeric magnitude secondary. */


.signal strong.up .signal-delta,
.signal strong.down .signal-delta,
.signal strong.neutral .signal-delta { color: var(--muted); }
.up { color: var(--red); }
.down { color: var(--green-2); }
.neutral { color: #6d716e; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px;  }
.section-heading h2, .newsletter-card h2 { font-family: Newsreader, Georgia, serif; font-size: clamp(2.2rem, 4vw, 3.5rem);   margin-bottom: 0; }
.section-note {  margin: 0; color: var(--muted); text-align: right; }

.metric-grid { display: grid; gap: 16px; }
.metric-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card {  border: 1px solid var(--line);    display: flex; flex-direction: column; }
.metric-card.featured { border-color: #b9cabf; background: linear-gradient(180deg, #fff 0%, #f1f6f2 100%); }
.metric-label { color: var(--muted);    }
.metric-value { font-size: clamp(2rem, 3.5vw, 3.15rem); letter-spacing: -.055em;  line-height: 1;  }
.metric-value span {  color: var(--muted); letter-spacing: 0;   }
.metric-value.small { font-size: clamp(1.9rem, 3vw, 2.6rem); }

.metric-foot { margin-top: auto; padding-top: 18px; color: var(--muted);  }


.chart-card { margin-top: 18px;  }
.chart-header { display: flex; justify-content: space-between; align-items: start; gap: 24px; }
.chart-header h3 {  letter-spacing: -.04em; margin-bottom: 2px; }
.chart-header p { margin: 0; color: var(--muted);  }
.range-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 10px;  }
.range-btn { border: 0; background: transparent;  border-radius: 8px;  font-weight: 700; color: var(--muted); cursor: pointer; }

.chart-wrap { width: 100%; overflow: hidden;  }
#priceChart { width: 100%; height: auto; display: block; }
.chart-stats { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;  }
.chart-stats div { display: flex; flex-direction: column; gap: 2px; }
.chart-stats span { color: var(--muted);  }


.context-card { background: transparent; border-top: 1px solid #cfd6cf; padding: 24px 8px 0 0; }


.context-card p { color: var(--muted); margin: 0;  }

.pipeline-card { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 18px; align-items: stretch;  }
.pipeline-step { min-width: 0; }
.pipeline-number { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green);    }

.pipeline-value {   letter-spacing: -.035em;  }
.pipeline-step p { margin: 0; color: var(--muted);  }
.pipeline-arrow { align-self: center;   }


.ad-section { padding: 10px 0 0; }
.ad-placeholder { min-height: 120px; border: 1px dashed #bbc4bd; border-radius: 12px; display: grid; place-items: center; text-align: center; padding: 22px; color: var(--muted); }
.ad-placeholder span { font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.ad-placeholder strong { font-size: .95rem; color: #6c756f; }
.ad-placeholder small { font-size: .72rem; }


.newsletter-card { padding: 34px; display: grid; grid-template-columns: 1fr 390px; gap: 50px; align-items: center; background: #19382c; color: #fff; border-color: #19382c; }
.newsletter-card .eyebrow { color: #a8ccb9; }
.newsletter-card p { color: #c7d7cf; margin-bottom: 0; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form input { flex: 1; min-width: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); padding: 12px 13px; background: rgba(255,255,255,.08); color: #fff; outline: 0; }
.newsletter-form input::placeholder { color: #a9beb3; }
.newsletter-form button { border: 0; border-radius: 10px; background: #fff; color: #18362b; padding: 12px 16px;  cursor: pointer; }


.methodology-main { min-height: 70vh; }
.page-title { font-size: clamp(3.4rem, 7vw, 5.7rem); }
.prose h2 { font-family: Newsreader, Georgia, serif;  letter-spacing: -.025em; margin: 46px 0 12px; }
.prose p { color: #4f5b55; font-size: 1.03rem; }
.notice-box { margin-top: 42px; padding: 24px; box-shadow: none; background: var(--green-soft); border-color: #cfddd4; }
.notice-box p { margin-bottom: 0; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .metric-grid.four { grid-template-columns: repeat(2, 1fr); }
  .pipeline-card { grid-template-columns: 1fr 1fr; }
  .pipeline-arrow { display: none; }
  .calculator-card, .newsletter-card { grid-template-columns: 1fr; gap: 25px; }


}

@media (max-width: 700px) {
  .container { width: min(100% - 26px, 1160px); }
  .section { padding: 58px 0; }
  .nav { gap: 15px; font-size: .82rem; }
  .nav a:nth-child(2), .nav a:nth-child(3) { display: none; }
  .section-heading { align-items: start; flex-direction: column; }
  .section-note { text-align: left; }
  .metric-grid.four, .context-grid, .chart-stats, .pipeline-card { grid-template-columns: 1fr; }
  .metric-card { min-height: 145px; }
  .chart-card { padding: 22px 16px 18px; }
  .chart-header { flex-direction: column; }
  .chart-stats { gap: 13px; }
  .chart-stats div { flex-direction: row; justify-content: space-between; }
  .pipeline-step { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .newsletter-form { flex-direction: column; }
  .hero h1 { font-size: clamp(3.15rem, 18vw, 5rem); }
}

@media (max-width: 520px) {
  .signal {
    grid-template-columns: minmax(0, 1fr) 82px 64px;
    column-gap: 8px;
  }
  .signal-delta { font-size: .66rem; }
}


/* Live headline prices in the sticky header */
.market-ticker {
  border-top: 1px solid rgba(221, 226, 220, .85);
  border-bottom: 1px solid rgba(221, 226, 220, .95);

}

.market-ticker-inner {

  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.market-ticker-inner::-webkit-scrollbar {
  display: none;
}

.ticker-item {
  display: inline-flex;
  align-items: baseline;

  padding: 0 20px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ticker-label {
  color: var(--muted);


  letter-spacing: .015em;
}

.ticker-item strong {
  color: var(--ink);


}


.ticker-change.up { color: var(--red); }
.ticker-change.down { color: var(--green); }
.ticker-change.neutral { color: var(--muted); }

.ticker-divider {
  width: 1px;

  flex: 0 0 auto;
  background: var(--line);
}

@media (max-width: 760px) {
  .market-ticker-inner {
    width: 100%;
    justify-content: flex-start;
    padding-inline: 12px;
  }

  .ticker-item {
    padding-inline: 14px;
  }

  .ticker-item:first-child {
    padding-left: 0;
  }
}

.chart-card-leading {
  margin-top: 0;

}

@media (max-width: 760px) {
  .chart-card-leading {
    margin-bottom: 34px;
  }
}


.chart-series-tabs {
  display: flex;

  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;


  border-radius: 12px;

}

.series-btn {

  background: transparent;
  color: var(--muted);


  font: inherit;

  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.series-btn:hover {
  color: var(--ink);
}


@media (max-width: 620px) {
  .chart-series-tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chart-series-tabs::-webkit-scrollbar {
    display: none;
  }

  .series-btn {
    flex: 0 0 auto;
  }
}


.ticker-status {
  display: inline-flex;
  align-items: center;

  padding: 0 4px 0 20px;
  white-space: nowrap;
  color: var(--muted);


  letter-spacing: .005em;
}


@media (max-width: 760px) {
  .ticker-status {
    padding-left: 14px;
    padding-right: 14px;
  }
}


.context-grid-four .context-card {
  min-width: 0;
}


/* Reader-facing methodology page */
.prose h3 {
  margin: 28px 0 8px;
  color: var(--ink);


}

.prose ul {
  margin: 12px 0 22px;
  padding-left: 1.3rem;
  color: var(--muted);
}

.prose li {
  margin: 8px 0;
  line-height: 1.7;
}

.prose code {

  white-space: normal;
}

.nav .active-link {
  color: var(--ink);

}


/* Anchor links should clear the sticky nav + market ticker. */


/* Slightly tighter offset on smaller screens where the header is more compact. */
@media (max-width: 760px) {
  #prices,
  #supply,
  #explainer {
    scroll-margin-top: 106px;
  }
}


/* =========================================================
   Editorial refinement — v21
   Styling only. Data, content, and behavior are unchanged.
   ========================================================= */

:root {
  --paper: #f6f7f2;
  --card: #fcfdfb;
  --line: #d8ded7;
  --soft: #edf1ec;
  --green-soft: #e8f0eb;
  --shadow: 0 10px 32px rgba(27, 43, 34, .055);
  --shadow-raised: 0 16px 42px rgba(27, 43, 34, .065);
}

body {
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  width: min(1180px, calc(100% - 44px));
}

.section {
  padding: 66px 0;
}

.section-tight {
  padding: 44px 0 24px;
}

/* Header: quieter publication chrome */
.site-header {
  background: rgba(246, 247, 242, .94);
  box-shadow: 0 1px 0 rgba(216, 222, 215, .72);
}

.header-inner {
  min-height: 64px;
}

.brand {
  font-size: 1.02rem;
}

.nav {
  gap: 24px;

}

.nav a {
  position: relative;
  padding: 22px 0 20px;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  opacity: .45;
  transition: transform .16s ease;
}

.nav a:hover::after,
.nav .active-link::after {
  transform: scaleX(1);
}

/* Ticker: compact and subordinate to the actual page */
.market-ticker {
  background: rgba(252, 253, 251, .72);
}


.ticker-change,
.ticker-status {
  font-size: .67rem;
}

/* Hero: slightly tighter, more editorial */
.hero-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(330px, .6fr);
  gap: 48px;
}

.hero h1,
.page-title {
  letter-spacing: -.048em;
}

.hero-copy,
.page-lede {
  max-width: 680px;
  font-size: 1.10rem;

}

.eyebrow {

  font-size: .70rem;
  letter-spacing: .115em;
}

.why-card {
  padding: 27px 28px;
  border-radius: 16px;
  box-shadow: var(--shadow-raised);
}

.why-card h2 {
  font-size: 1.92rem;
  margin-bottom: 12px;
}


/* Bring the first data feature closer to the hero. */
#prices {
  padding-top: 36px;
}

.chart-card-leading {
  margin-bottom: 36px;
}

/* Shared surface language: thinner, flatter, less "app card". */
.why-card,
.chart-card,
.pipeline-card,
.calculator-card,
.notice-box {
  border-color: #d6dcd5;
  box-shadow: var(--shadow);
}

.chart-card,
.pipeline-card,
.calculator-card {
  border-radius: 16px;
}

.metric-card {
  border-color: #d6dcd5;
  border-radius: 12px;
  background: rgba(252, 253, 251, .86);
  padding: 20px;
  min-height: 168px;
  box-shadow: 0 1px 0 rgba(24, 39, 31, .015);
}

.compact .metric-card {
  min-height: 148px;
}

.metric-label {
  margin-bottom: 13px;

}

.metric-value {
  margin-bottom: 11px;
}


/* Section chapter treatment */
.section-muted {
  background: #edf1eb;
  border-color: #d7ddd6;
}

#explainer {
  background: #fafbf8;
  border-bottom: 1px solid rgba(216, 222, 215, .7);
}

.section-heading {
  margin-bottom: 24px;
}

.section-heading h2,
.newsletter-card h2 {
  letter-spacing: -.04em;
}

.section-note {
  max-width: 430px;


}

/* Chart: make it feel like the site's main reference tool */
.chart-card {
  padding: 24px 26px 20px;
  background: #fdfefc;
  box-shadow: var(--shadow-raised);
}

.chart-series-tabs {
  margin-bottom: 17px;
  padding: 0;
  gap: 5px;
  background: transparent;
}

.series-btn {
  border: 1px solid transparent;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: .75rem;
}

.series-btn.active {
  color: var(--green);
  background: var(--green-soft);
  border-color: #d8e5dc;
  box-shadow: none;
}

.range-tabs {
  border: 1px solid #e0e5df;
  background: #f1f3ef;
}

.range-btn {
  padding: 6px 10px;
  font-size: .75rem;
}

.range-btn.active {
  color: var(--green);
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 34, 27, .07);
}


.chart-wrap {
  margin-top: 3px;
}

.chart-stats {
  padding-top: 16px;
}


.chart-stats strong {

  letter-spacing: -.015em;
}

/* Educational context: editorial annotations rather than mini-cards */


.context-card {
  border-top-color: #cbd4cc;
  padding-top: 20px;
}


.context-card h3 {
  margin: 8px 0 7px;

}


/* Explainer and calculator: flatter, cleaner reference panels */
.pipeline-card {
  padding: 26px;
  box-shadow: 0 8px 28px rgba(27, 43, 34, .045);
}

.pipeline-number {
  margin-bottom: 14px;
}

.pipeline-value {

  margin: 4px 0 8px;
}


.pipeline-arrow {
  color: #9da69f;
  font-size: 1.25rem;
}


/* Newsletter remains the one deliberately strong surface. */
.newsletter-section {
  padding-top: 42px;
}

.newsletter-card {
  border-radius: 16px;
  box-shadow: none;
}

/* Footer: a clear end-cap rather than loose links floating below content. */
.site-footer {


  border-top-color: #d5dcd5;
}


/* Methodology: calmer reading measure */
.prose {
  max-width: 720px;
}

.prose p {
  line-height: 1.72;
}

.prose h2 {
  margin-top: 42px;
}

/* Desktop anchor position after slightly shorter chrome. */
#prices,
#supply,
#explainer {
  scroll-margin-top: 112px;
}

@media (max-width: 980px) {
  .hero-grid {
    gap: 26px;
  }
}

@media (max-width: 700px) {
  .container {
    width: min(100% - 28px, 1180px);
  }

  .section {
    padding: 54px 0;
  }

  .section-tight {
    padding-top: 34px;
  }

  #prices {
    padding-top: 28px;
  }

  .nav a {
    padding-block: 20px 18px;
  }

  .why-card {
    padding: 24px;
  }

  .chart-card {
    padding: 20px 15px 17px;
  }

  .metric-card {
    padding: 19px;
  }

  .pipeline-card,
  .calculator-card {
    padding: 23px 20px;
  }

  #prices,
  #supply,
  #explainer {
    scroll-margin-top: 100px;
  }
}


.market-ticker-inner {
  min-height: 47px;
}

.ticker-item {
  gap: 7px;
  padding-inline: 21px;
}


.ticker-item strong {


  letter-spacing: -.018em;
}


.ticker-status {
  font-size: .70rem;
  font-weight: 650;
}

.ticker-divider {
  height: 20px;
}

@media (max-width: 760px) {
  .market-ticker-inner {
    min-height: 45px;
  }

  .ticker-item {
    padding-inline: 16px;
  }

  .ticker-label {
    font-size: .73rem;
  }

  .ticker-item strong {
    font-size: .93rem;
  }

  .ticker-change {
    font-size: .72rem;
  }
}


.market-ticker {
  position: relative;
}

.ticker-status {
  gap: 5px;
}

.freshness-prefix {
  color: var(--muted);

}

.freshness-separator {
  color: #a1aaa4;
}

.freshness-item {
  appearance: none;
  border: 0;
  padding: 3px 2px;
  margin: -3px -2px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: help;
  border-radius: 5px;
}

.freshness-item strong {
  color: var(--ink);

}

.freshness-item:hover,
.freshness-item:focus-visible,
.freshness-item[aria-expanded="true"] {
  color: var(--ink);
  background: rgba(47, 122, 91, .065);
  outline: none;
}

.freshness-popover {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: max(18px, calc((100vw - 1180px) / 2 + 22px));
  width: min(410px, calc(100vw - 28px));
  padding: 11px 13px;
  border: 1px solid #d5dcd5;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 34px rgba(27, 43, 34, .12);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.48;
  white-space: normal;
}

.freshness-popover[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .ticker-status {
    padding-right: 18px;
  }

  .freshness-popover {
    right: 14px;
    font-size: .80rem;
  }
}


.trade-flow-copy .eyebrow {
  margin-bottom: 8px;
}


.trade-stat-direction {
  margin-bottom: 6px;
  color: var(--green);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}


.context-card p {
  max-width: 28ch;
  font-size: .84rem;
  line-height: 1.55;
}


.trade-section {
  background: #f8faf6;
  border-top: 1px solid #d7ddd6;
  border-bottom: 1px solid #d7ddd6;
}


.trade-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

}


.trade-metric-card .metric-value {
  margin-top: 7px;
}


.trade-context-grid .context-card {
  max-width: none;
}

.trade-context-grid .context-card p {
  max-width: 52ch;
}

/* Keep each major page chapter visually distinct. */
#supply {
  border-bottom: 0;
}

#trade {
  scroll-margin-top: 112px;
}

@media (max-width: 700px) {
  .trade-metric-grid,
  .trade-context-grid {
    grid-template-columns: 1fr;
  }

  #trade {
    scroll-margin-top: 100px;
  }
}


.trade-section {
  padding-top: 52px;
  padding-bottom: 50px;
}

.trade-section .section-heading {
  margin-bottom: 20px;
}

.trade-metric-grid {
  gap: 18px;
}


.trade-footnote {
  margin: 16px 0 0;
  max-width: 850px;
  color: var(--muted);


}

@media (max-width: 700px) {
  .trade-section {
    padding-top: 46px;
    padding-bottom: 44px;
  }
}


.trade-metric-card {

  padding: 20px;
}

.trade-metric-card .trade-stat-direction {
  margin-bottom: 7px;
  color: var(--green);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.trade-metric-card .metric-label {
  margin-bottom: 13px;
}

.trade-metric-card .metric-value {
  margin: 0 0 11px;
}

.trade-metric-card .metric-value span {
  display: inline;
  margin: 0;
  font-size: .76rem;
  font-weight: 700;
}

.trade-metric-card .metric-change {
  margin-top: 0;
  font-size: .82rem;
  font-weight: 700;
}


/* Five-item primary navigation */
.nav {
  align-items: center;
}

@media (max-width: 860px) {
  .nav {
    gap: 15px;
    font-size: .80rem;
  }
}

@media (max-width: 700px) {
  .header-inner {
    gap: 14px;
  }

  .nav {
    display: flex;
    max-width: calc(100vw - 128px);
    overflow-x: auto;
    gap: 14px;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav a,
  .nav a:nth-child(2),
  .nav a:nth-child(3) {
    display: block;
    flex: 0 0 auto;
  }
}

/* Newsletter: finished visual treatment, intentionally inactive for now */
.newsletter-signup {
  min-width: 0;
}

.newsletter-form input:disabled {
  opacity: 1;
  cursor: default;
  background: rgba(255,255,255,.07);
  color: #d6e1db;
}

.newsletter-form button:disabled {
  opacity: 1;
  cursor: default;
  background: #eef3f0;
  color: #365448;
}

.newsletter-note {
  display: block;
  margin-top: 8px;
  color: #9fb5aa;


}

/* Privacy page */
.privacy-updated {
  margin-top: 42px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .82rem !important;
}

/* The ticker is a site-wide feature, including secondary pages. */
.methodology-main + .site-footer {
  margin-top: 18px;
}

/* Trade direction is descriptive, not positive/negative. */
.trade-metric-card .metric-change.neutral {
  color: var(--muted);
}


.trade-metric-card {
  display: grid;
  grid-template-columns: minmax(210px, .78fr) minmax(0, 1.22fr);
  gap: 26px;
  align-items: center;
  min-height: 164px;
}

.trade-card-stat {
  min-width: 0;
}

.trade-card-explainer {
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid #d9dfd9;
}

.trade-card-explainer strong {
  display: block;

  color: var(--green);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.trade-card-explainer p {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: .81rem;
  line-height: 1.55;
}

/* Give the unit a deliberate visual gap from the number. */


@media (max-width: 980px) {
  .trade-metric-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .trade-card-explainer {
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid #d9dfd9;
  }

  .trade-card-explainer p {
    max-width: none;
  }
}


:root {
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Newsreader, Georgia, "Times New Roman", serif;

  --type-kicker: .70rem;
  --type-meta: .78rem;
  --type-small: .82rem;
  --type-copy: .86rem;
  --type-note: .95rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
}

body,
button,
input {
  font-family: var(--font-sans);
}

.hero h1,
.page-title,
.section-heading h2,
.newsletter-card h2,
.why-card h2,
.calculator-card h3,
.prose h2 {
  font-family: var(--font-serif);
}

/* Small uppercase labels share one visual language. */
.eyebrow,
.card-kicker,
.context-icon,
.trade-stat-direction,
.trade-card-explainer strong,
.ad-placeholder span {
  font-size: var(--type-kicker);
  font-weight: var(--weight-heavy);
  letter-spacing: .105em;
  line-height: 1.25;
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: 10px;
}

.card-kicker {
  margin-bottom: 9px;
}

/* Header/navigation */
.brand {
  font-weight: var(--weight-heavy);
}

.nav {
  font-size: .88rem;
  font-weight: var(--weight-semibold);
}

.nav .active-link {
  font-weight: var(--weight-heavy);
}

/* Ticker */
.ticker-label {
  font-size: .76rem;
  font-weight: var(--weight-bold);
}

.ticker-item strong {
  font-size: .98rem;
  font-weight: var(--weight-heavy);
}

.ticker-change {
  font-size: .75rem;
  font-weight: var(--weight-heavy);
}

.ticker-status,
.freshness-item {
  font-size: .70rem;
  font-weight: var(--weight-semibold);
}

.freshness-prefix {
  font-weight: var(--weight-bold);
}

.freshness-item strong {
  font-weight: var(--weight-heavy);
}

/* Section introductions */
.section-heading h2,
.newsletter-card h2 {
  line-height: 1;
}

.section-note {
  font-size: var(--type-note);
  line-height: 1.55;
}

.hero-copy,
.page-lede {
  line-height: 1.62;
}

/* Primary metric cards */
.metric-label {
  font-size: .83rem;
  font-weight: var(--weight-bold);
  line-height: 1.35;
}

.metric-value {
  font-weight: var(--weight-heavy);
  font-variant-numeric: tabular-nums;
}

.metric-value span {
  margin-left: .30em;
  font-size: .76rem;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}

.metric-change {
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.metric-foot {
  font-size: .76rem;
  line-height: 1.45;
}

/* "What it means" explanatory blocks */
.context-card h3 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  line-height: 1.35;
}

.context-card p,
.trade-card-explainer p {
  font-size: .84rem;
  line-height: 1.56;
}

.trade-card-explainer strong {
  margin-bottom: 6px;
}

.trade-footnote {
  font-size: var(--type-meta);
  line-height: 1.55;
}

/* Chart controls and statistics */
.chart-series-tabs,
.range-tabs {
  font-family: var(--font-sans);
}

.series-btn,
.range-btn {
  font-size: .75rem;
  font-weight: var(--weight-bold);
}

.chart-header h3 {
  font-family: var(--font-sans);
  font-size: 1.86rem;
  font-weight: var(--weight-heavy);
  line-height: 1.1;
}

.chart-header p {
  font-size: .86rem;
  line-height: 1.5;
}

.chart-stats span {
  font-size: .72rem;
  line-height: 1.35;
}

.chart-stats strong {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Price-chain explainer */
.pipeline-title {

  font-weight: var(--weight-heavy);

}

.pipeline-value {
  font-size: 1.48rem;
  font-weight: var(--weight-heavy);
  font-variant-numeric: tabular-nums;
}

.pipeline-step p {
  font-size: .84rem;
  line-height: 1.56;
}

.pipeline-number {
  font-size: var(--type-kicker);
  font-weight: var(--weight-heavy);
}

/* Calculator */


/* Weekly summary card */
.why-card p {
  font-size: .94rem;
  line-height: 1.56;
}

.signal {
  font-size: .88rem;
}


/* Newsletter */
.newsletter-card p {
  font-size: .95rem;
  line-height: 1.55;
}

.newsletter-form input,
.newsletter-form button {
  font-size: .88rem;
}

.newsletter-form button {
  font-weight: var(--weight-heavy);
}

.newsletter-note {
  font-size: .72rem;
  line-height: 1.4;
}

/* Secondary reading pages */
.prose {
  font-family: var(--font-sans);
}

.prose h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.08;
}

.prose h3 {
  font-family: var(--font-sans);
  font-size: 1.03rem;
  font-weight: var(--weight-bold);
  line-height: 1.35;
}

.prose p,
.prose li {
  font-size: 1rem;
  line-height: 1.7;
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .9em;
}

/* Footer */
.footer-grid p,
.footer-source,
.footer-links {
  font-size: var(--type-meta);
  line-height: 1.5;
}


/* Numeric content should align cleanly throughout the site. */
.metric-value,
.metric-change,
.pipeline-value,
.chart-stats strong,
.calc-result strong,
.ticker-item,
.signal-delta {
  font-variant-numeric: tabular-nums;
}

/* Mobile keeps the same hierarchy; only density changes. */
@media (max-width: 760px) {
  .ticker-label {
    font-size: .73rem;
  }

  .ticker-item strong {
    font-size: .93rem;
  }

  .ticker-change {
    font-size: .72rem;
  }

  .section-note {
    font-size: .92rem;
  }

  .prose p,
  .prose li {
    font-size: .97rem;
  }
}


.pipeline-subvalue {
  margin: -3px 0 9px;
  color: var(--green);
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

#explainer {
  padding-bottom: 58px;
}


@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  .narrow {
    width: calc(100% - 28px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* Sticky header: brand, then a dedicated scrollable nav row. */
  .header-inner {
    min-height: 0;
    padding-top: 11px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
  }

  .brand {
    align-self: flex-start;
    min-height: 34px;
    font-size: 1rem;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
  }

  .nav {
    width: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    font-size: .82rem;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav a,
  .nav a:nth-child(2),
  .nav a:nth-child(3) {
    display: block;
    flex: 0 0 auto;
    padding: 9px 0 11px;
  }

  .nav a::after {
    bottom: 5px;
  }

  /* Ticker remains prominent, but scrolls independently. */
  .market-ticker-inner {
    width: 100%;
    max-width: none;
    min-height: 45px;
    margin: 0;
    padding: 0 13px;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .ticker-item {
    flex: 0 0 auto;
    padding-inline: 13px;
    gap: 6px;
  }

  .ticker-item:first-child {
    padding-left: 0;
  }

  .ticker-divider {
    flex: 0 0 auto;
  }

  .ticker-status {
    flex: 0 0 auto;
    padding-right: 12px;
  }

  /* Hero must always be one clean column on phones. */
  .hero.section-tight {
    padding-top: 30px;
    padding-bottom: 24px;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
  }

  .hero-grid > * {
    min-width: 0;
    width: 100%;
  }

  .hero h1,
  .page-title {
    max-width: 100%;
    margin-bottom: 18px;
    font-size: clamp(2.85rem, 13vw, 4rem);
    line-height: .94;
    letter-spacing: -.048em;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero-copy,
  .page-lede {
    max-width: 34rem;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.55;
  }

  .why-card {
    width: 100%;
    padding: 22px 20px;
    border-radius: 14px;
  }

  .why-card h2 {
    font-size: 1.8rem;
    line-height: 1.04;
  }

  .why-card p {
    font-size: .91rem;
  }

  /* Weekly signals become two-column rows instead of three squeezed columns. */
  .signal {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 3px;
    padding: 12px 0;
  }

  .signal > span {
    grid-column: 1;
    grid-row: 1;
  }

  .signal-delta {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    font-size: .68rem;
  }

  .signal-direction {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    text-align: right;
  }

  /* General section rhythm. */
  .section {
    padding: 48px 0;
  }

  .section-tight {
    padding: 32px 0 20px;
  }

  #prices {
    padding-top: 26px;
  }

  .section-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
  }

  .section-heading h2,
  .newsletter-card h2 {
    font-size: clamp(2.15rem, 10.5vw, 3rem);
    line-height: .98;
  }

  .section-note {
    max-width: 34rem;
    text-align: left;
    font-size: .92rem;
  }

  /* Cards and explanatory grids become single-column. */
  .metric-grid.four,
  .context-grid,
  .trade-metric-grid,
  .trade-context-grid,
  .chart-stats,
  .pipeline-card,
  .newsletter-card,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .metric-grid,
  .context-grid,
  .trade-metric-grid {
    gap: 14px;
  }

  .metric-card,
  .compact .metric-card {
    min-height: 0;
    padding: 19px;
  }

  .metric-value {
    font-size: clamp(2.25rem, 12vw, 3rem);
  }

  .context-card {
    padding: 18px 0 2px;
  }

  .context-card p {
    max-width: none;
  }

  /* Chart controls stay usable without crushing the plot. */
  .chart-card {
    padding: 18px 14px 16px;
    border-radius: 14px;
  }

  .chart-card-leading {
    margin-bottom: 30px;
  }

  .chart-series-tabs {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .chart-series-tabs::-webkit-scrollbar {
    display: none;
  }

  .series-btn {
    flex: 0 0 auto;
  }

  .chart-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
  }

  .chart-header h3 {
    font-size: 1.55rem;
  }

  .range-tabs {
    align-self: flex-start;
  }

  .chart-wrap {
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  #priceChart {
    min-width: 560px;
  }

  .chart-stats {
    gap: 0;
    padding-top: 10px;
  }

  .chart-stats div {
    min-height: 42px;
    padding: 9px 0;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }

  .chart-stats div:last-child {
    border-bottom: 0;
  }

  /* Trade cards: explanation stacks under the number. */
  .trade-section {
    padding-top: 46px;
    padding-bottom: 44px;
  }

  .trade-metric-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    min-height: 0;
  }

  .trade-card-explainer {
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid #d9dfd9;
  }

  .trade-card-explainer p {
    max-width: none;
  }

  /* Price-chain explainer becomes a simple vertical sequence. */
  .pipeline-card {
    gap: 0;
    padding: 20px;
  }

  .pipeline-step {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }

  .pipeline-step:first-child {
    padding-top: 0;
  }

  .pipeline-step:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .pipeline-arrow {
    display: none;
  }

  .pipeline-number {
    margin-bottom: 10px;
  }

  .pipeline-value {
    font-size: 1.55rem;
  }

  .pipeline-step p {
    max-width: 36rem;
  }

  /* Newsletter and footer. */
  .newsletter-card {
    gap: 22px;
    padding: 22px 20px;
  }

  .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
    min-height: 46px;
  }

  .site-footer {
    margin-top: 28px;
    padding: 34px 0 38px;
  }


  .footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }


  /* Secondary pages. */
  .prose h2 {
    font-size: 1.75rem;
  }

  .prose p,
  .prose li {
    font-size: .96rem;
  }

  /* Header is taller on mobile, so anchors need more clearance. */
  #prices,
  #supply,
  #trade,
  #explainer {
    scroll-margin-top: 142px;
  }
}

@media (max-width: 430px) {
  .container,
  .narrow {
    width: calc(100% - 24px);
  }

  .hero h1,
  .page-title {
    font-size: clamp(2.65rem, 12.7vw, 3.45rem);
  }

  .why-card h2 {
    font-size: 1.65rem;
  }

  .ticker-label {
    font-size: .70rem;
  }

  .ticker-item strong {
    font-size: .90rem;
  }

  .ticker-change {
    font-size: .69rem;
  }

  .metric-value {
    font-size: 2.35rem;
  }

  .metric-value span {
    font-size: .72rem;
  }

  .section-heading h2,
  .newsletter-card h2 {
    font-size: 2.25rem;
  }

  .pipeline-card {
    padding: 18px;
  }
}


@media (max-width: 760px) {
  /* Current fuel/oil cards are simple enough to use a 2x2 grid. */
  #prices .metric-grid.four {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #prices .metric-grid.four .metric-card {
    min-height: 0;
    padding: 16px 15px 15px;
    border-radius: 12px;
  }

  #prices .metric-grid.four .metric-label {
    min-height: 2.35em;
    margin-bottom: 9px;
    font-size: .78rem;
    line-height: 1.18;
  }

  #prices .metric-grid.four .metric-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 8px;
    font-size: clamp(1.9rem, 8.8vw, 2.5rem);
    line-height: .98;
  }

  #prices .metric-grid.four .metric-value span {
    margin-left: .24em;
    font-size: .66rem;
    line-height: 1.2;
  }

  #prices .metric-grid.four .metric-change {
    min-height: 2.5em;
    margin-bottom: 12px;
    font-size: .72rem;
    line-height: 1.25;
  }

  #prices .metric-grid.four .metric-foot {
    margin-top: auto;
    font-size: .70rem;
    line-height: 1.25;
  }
}

@media (max-width: 390px) {
  #prices .metric-grid.four {
    gap: 9px;
  }

  #prices .metric-grid.four .metric-card {
    padding: 14px 12px;
  }

  #prices .metric-grid.four .metric-label {
    font-size: .73rem;
  }

  #prices .metric-grid.four .metric-value {
    font-size: clamp(1.68rem, 8.6vw, 2.15rem);
  }

  #prices .metric-grid.four .metric-value span {
    width: 100%;
    margin: 4px 0 0;
    font-size: .63rem;
  }

  #prices .metric-grid.four .metric-change {
    font-size: .68rem;
  }
}


@media (max-width: 760px) {
  /* The four headline supply metrics are compact enough for 2x2. */
  #supply .metric-grid.four {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #supply .metric-grid.four .metric-card {
    min-height: 0;
    padding: 16px 15px 15px;
    border-radius: 12px;
  }

  #supply .metric-grid.four .metric-label {
    min-height: 2.35em;
    margin-bottom: 9px;
    font-size: .78rem;
    line-height: 1.18;
  }

  #supply .metric-grid.four .metric-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: clamp(1.9rem, 8.8vw, 2.5rem);
    line-height: .98;
  }

  #supply .metric-grid.four .metric-value span {
    margin-left: .24em;
    font-size: .66rem;
    line-height: 1.2;
  }

  #supply .metric-grid.four .metric-change {
    min-height: 2.5em;
    margin-bottom: 0;
    font-size: .72rem;
    line-height: 1.25;
  }

  /* The four explanations also become a compact 2x2 reference grid. */
  #supply .context-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    margin-top: 18px;
  }

  #supply .context-card {
    min-width: 0;
    padding: 15px 0 14px;
    border-top: 1px solid #cbd4cc;
  }

  #supply .context-card:nth-child(-n/**/+2) {
    border-top: 1px solid #cbd4cc;
  }

  #supply .context-icon {
    margin-bottom: 7px;
    font-size: .66rem;
  }

  #supply .context-card h3 {
    margin: 0 0 7px;
    font-size: .91rem;
    line-height: 1.28;
  }

  #supply .context-card p {
    margin: 0;
    max-width: none;
    font-size: .76rem;
    line-height: 1.48;
  }
}

@media (max-width: 390px) {
  #supply .metric-grid.four {
    gap: 9px;
  }

  #supply .metric-grid.four .metric-card {
    padding: 14px 12px;
  }

  #supply .metric-grid.four .metric-label {
    font-size: .73rem;
  }

  #supply .metric-grid.four .metric-value {
    font-size: clamp(1.68rem, 8.6vw, 2.15rem);
  }

  #supply .metric-grid.four .metric-value span {
    width: 100%;
    margin: 4px 0 0;
    font-size: .63rem;
  }

  #supply .metric-grid.four .metric-change {
    font-size: .68rem;
  }

  #supply .context-grid {
    gap: 0 11px;
  }

  #supply .context-card h3 {
    font-size: .86rem;
  }

  #supply .context-card p {
    font-size: .72rem;
  }
}


@media (max-width: 760px) {


  .supply-pair-block + .supply-pair-block {
    margin-top: 12px;
  }

  .supply-pair-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .supply-pair-cards .metric-card {
    min-height: 0;
    padding: 16px 15px 15px;
    border-radius: 12px;
  }

  .supply-pair-cards .metric-label {
    min-height: 2.35em;
    margin-bottom: 9px;
    font-size: .78rem;
    line-height: 1.18;
  }

  .supply-pair-cards .metric-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: clamp(1.9rem, 8.8vw, 2.5rem);
    line-height: .98;
  }

  .supply-pair-cards .metric-value span {
    margin-left: .24em;
    font-size: .66rem;
    line-height: 1.2;
  }

  .supply-pair-cards .metric-change {
    min-height: 2.5em;
    margin-bottom: 0;
    font-size: .72rem;
    line-height: 1.25;
  }

  .supply-pair-context {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    margin-top: 14px;
  }

  .supply-pair-context .context-card {
    min-width: 0;
    padding: 15px 0 14px;
    border-top: 1px solid #cbd4cc;
  }

  .supply-pair-context .context-icon {
    margin-bottom: 7px;
    font-size: .66rem;
  }

  .supply-pair-context .context-card h3 {
    margin: 0 0 7px;
    font-size: .91rem;
    line-height: 1.28;
  }

  .supply-pair-context .context-card p {
    margin: 0;
    max-width: none;
    font-size: .76rem;
    line-height: 1.48;
  }

  /* Turn off the prior v36 supply mobile layout for the desktop flow. */
  #supply .supply-desktop-flow .metric-grid.four,
  #supply .supply-desktop-flow .context-grid {
    display: none;
  }
}

@media (max-width: 390px) {
  .supply-pair-cards {
    gap: 9px;
  }

  .supply-pair-cards .metric-card {
    padding: 14px 12px;
  }

  .supply-pair-cards .metric-label {
    font-size: .73rem;
  }

  .supply-pair-cards .metric-value {
    font-size: clamp(1.68rem, 8.6vw, 2.15rem);
  }

  .supply-pair-cards .metric-value span {
    width: 100%;
    margin: 4px 0 0;
    font-size: .63rem;
  }

  .supply-pair-cards .metric-change {
    font-size: .68rem;
  }

  .supply-pair-context {
    gap: 0 11px;
  }

  .supply-pair-context .context-card h3 {
    font-size: .86rem;
  }

  .supply-pair-context .context-card p {
    font-size: .72rem;
  }
}


/* Desktop: preserve the familiar 4-card / 4-explanation layout. */
.supply-pairs-layout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.supply-pair-block,
.supply-pair-cards,
.supply-pair-context {
  display: contents;
}

.supply-card-1 { grid-column: 1; grid-row: 1; }
.supply-card-2 { grid-column: 2; grid-row: 1; }
.supply-card-3 { grid-column: 3; grid-row: 1; }
.supply-card-4 { grid-column: 4; grid-row: 1; }

.supply-context-1 { grid-column: 1; grid-row: 2; }
.supply-context-2 { grid-column: 2; grid-row: 2; }
.supply-context-3 { grid-column: 3; grid-row: 2; }
.supply-context-4 { grid-column: 4; grid-row: 2; }

.supply-context {
  margin-top: 2px;
}

/* Mobile: card pair, matching text pair, then the next card pair. */
@media (max-width: 760px) {
  .supply-pairs-layout {
    display: block;
  }

  .supply-pair-block {
    display: block;
  }

  .supply-pair-block + .supply-pair-block {
    margin-top: 12px;
  }

  .supply-pair-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .supply-pair-context {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    margin-top: 14px;
  }

  #supply .supply-card {
    min-height: 0;
    padding: 16px 15px 15px;
    border-radius: 12px;
  }

  #supply .supply-card .metric-label {
    min-height: 2.35em;
    margin-bottom: 9px;
    font-size: .78rem;
    line-height: 1.18;
  }

  #supply .supply-card .metric-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: clamp(1.9rem, 8.8vw, 2.5rem);
    line-height: .98;
  }

  #supply .supply-card .metric-value span {
    margin-left: .24em;
    font-size: .66rem;
    line-height: 1.2;
  }

  #supply .supply-card .metric-change {
    min-height: 2.5em;
    margin-bottom: 0;
    font-size: .72rem;
    line-height: 1.25;
  }

  #supply .supply-context {
    min-width: 0;
    margin-top: 0;
    padding: 15px 0 14px;
    border-top: 1px solid #cbd4cc;
  }

  #supply .supply-context .context-icon {
    margin-bottom: 7px;
    font-size: .66rem;
  }

  #supply .supply-context h3 {
    margin: 0 0 7px;
    font-size: .91rem;
    line-height: 1.28;
  }

  #supply .supply-context p {
    margin: 0;
    max-width: none;
    font-size: .76rem;
    line-height: 1.48;
  }
}

@media (max-width: 390px) {
  .supply-pair-cards {
    gap: 9px;
  }

  .supply-pair-context {
    gap: 0 11px;
  }

  #supply .supply-card {
    padding: 14px 12px;
  }

  #supply .supply-card .metric-label {
    font-size: .73rem;
  }

  #supply .supply-card .metric-value {
    font-size: clamp(1.68rem, 8.6vw, 2.15rem);
  }

  #supply .supply-card .metric-value span {
    width: 100%;
    margin: 4px 0 0;
    font-size: .63rem;
  }

  #supply .supply-card .metric-change {
    font-size: .68rem;
  }

  #supply .supply-context h3 {
    font-size: .86rem;
  }

  #supply .supply-context p {
    font-size: .72rem;
  }
}


@media (max-width: 760px) {
  #supply .supply-card,
  #supply .supply-context {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #supply .supply-pair-cards,
  #supply .supply-pair-context {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  #supply .supply-pair-block {
    width: 100%;
    max-width: none;
  }
}


@media (max-width: 700px) {
  .trade-metric-card {
    display: grid;
    grid-template-columns: minmax(128px, 0.92fr) minmax(0, 1.08fr);
    gap: 14px;
    align-items: start;
    padding: 16px 16px;
    min-height: 0;
  }

  .trade-card-stat {
    min-width: 0;
  }

  .trade-metric-card .trade-stat-direction {
    margin-bottom: 6px;
    font-size: .65rem;
  }

  .trade-metric-card .metric-label {
    margin-bottom: 10px;
    font-size: 0.82rem;
  }

  .trade-metric-card .metric-value {
    margin: 0 0 8px;
    font-size: clamp(2.25rem, 10vw, 3.25rem);
    line-height: 0.95;
  }

  .trade-metric-card .metric-value span {
    margin-left: .22em;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .trade-metric-card .metric-change {
    font-size: .74rem;
    line-height: 1.35;
  }

  .trade-card-explainer {
    padding: 0 0 0 14px;
    border-top: 0;
    border-left: 1px solid #d9dfd9;
    align-self: stretch;
  }

  .trade-card-explainer strong {
    margin-bottom: 4px;
    font-size: .64rem;
    letter-spacing: .08em;
  }

  .trade-card-explainer p {
    max-width: none;
    font-size: .76rem;
    line-height: 1.45;
  }

  .trade-footnote {
    margin-top: 14px;
    font-size: .75rem;
    line-height: 1.5;
  }
}

@media (max-width: 390px) {
  .trade-metric-card {
    grid-template-columns: minmax(118px, 0.9fr) minmax(0, 1.1fr);
    gap: 12px;
    padding: 14px 14px;
  }

  .trade-metric-card .metric-value {
    font-size: clamp(2rem, 9.6vw, 3rem);
  }

  .trade-metric-card .metric-value span {
    font-size: .64rem;
  }

  .trade-card-explainer {
    padding-left: 12px;
  }

  .trade-card-explainer p {
    font-size: .73rem;
    line-height: 1.42;
  }
}


.site-footer {
  margin-top: 42px;
  padding: 0;
  background: #edf1eb;
  border-top: 1px solid #d5dcd5;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 24px;
}

.footer-identity {
  min-width: 0;
}

.footer-brand {
  margin-bottom: 5px;
}

.footer-identity p {
  margin: 0;
  color: var(--muted);
  font-size: .80rem;
  line-height: 1.45;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 20px;
  font-size: .80rem;
  font-weight: var(--weight-semibold, 600);
  line-height: 1.35;
}

.footer-links a {
  white-space: nowrap;
}

.footer-links a:hover {
  color: var(--green);
}

.footer-meta {
  padding-top: 13px;
  padding-bottom: 18px;
  border-top: 1px solid #d5dcd5;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}

@media (max-width: 700px) {
  .site-footer {
    margin-top: 28px;
  }

  .footer-main {
    display: block;
    padding-top: 24px;
    padding-bottom: 18px;
  }

  .footer-brand {
    margin-bottom: 4px;
  }

  .footer-identity p {
    max-width: 29rem;
    font-size: .78rem;
  }

  .footer-links {
    justify-content: flex-start;
    gap: 7px 16px;
    margin-top: 16px;
    font-size: .78rem;
  }

  .footer-meta {
    padding-top: 11px;
    padding-bottom: 14px;
    font-size: .70rem;
  }
}

@media (max-width: 390px) {
  .footer-links {
    gap: 7px 13px;
    font-size: .75rem;
  }
}


@media (max-width: 700px) {
  .footer-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px 16px !important;
    margin-top: 14px;
    font-size: .76rem;
  }

  .footer-links a {
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .footer-main {
    padding-top: 22px;
    padding-bottom: 15px;
  }

  .footer-meta {
    padding-top: 10px;
    padding-bottom: 12px;
  }
}

@media (max-width: 390px) {
  .footer-links {
    gap: 7px 12px !important;
    font-size: .73rem;
  }
}


@media (max-width: 760px) {
  .market-ticker-inner {
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
  }

  .market-ticker-inner::-webkit-scrollbar {
    display: none;
  }
}


/* Shared rhythm for all data cards. */
.metric-card .metric-label {
  margin-bottom: 10px;
  line-height: 1.25;
}

.metric-card .metric-value {
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums lining-nums;
}

.metric-card .metric-value span {
  margin-left: .28em;
  vertical-align: baseline;
  white-space: nowrap;
}

.metric-card .metric-change {
  margin: 0;
  line-height: 1.3;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.metric-card .metric-foot {
  line-height: 1.35;
}

/* Price cards: slash units stay attached to the price on one line. */
#prices .metric-grid.four .metric-value {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  column-gap: .22em;
  white-space: nowrap;
}

#prices .metric-grid.four .metric-value span {
  margin-left: 0;
  flex: 0 0 auto;
}

/* Supply cards: use one rule for word units; percent remains a symbol. */
#supply .supply-card .metric-value {
  font-variant-numeric: tabular-nums lining-nums;
}

#refinery-value span {
  margin-left: .12em;
}

/* Trade cards use the same unit/change rhythm without changing their text. */
.trade-metric-card .metric-value {
  font-variant-numeric: tabular-nums lining-nums;
}

.trade-metric-card .metric-value span {
  margin-left: .28em;
}

.trade-metric-card .metric-change {
  white-space: nowrap;
}

/* Phone-specific presentation standards. */
@media (max-width: 760px) {
  /* Current prices: retain 2x2 layout, but keep every slash unit on the same line. */
  #prices .metric-grid.four .metric-value {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    column-gap: .20em;
    font-size: clamp(1.72rem, 8.1vw, 2.18rem);
    line-height: .98;
  }

  #prices .metric-grid.four .metric-value span {
    width: auto;
    margin: 0;
    font-size: .64rem;
    line-height: 1;
    white-space: nowrap;
  }

  #prices .metric-grid.four .metric-change {
    min-height: 0;
    margin-bottom: 10px;
    font-size: .69rem;
    line-height: 1.25;
    white-space: normal;
  }

  /* Supply: all word-based units use a consistent second line. */
  #production-value span,
  #crude-stocks-value span,
  #gas-stocks-value span {
    display: block;
    width: auto;
    margin: 4px 0 0;
    font-size: .66rem;
    line-height: 1.15;
  }

  /* Percent remains attached to the numeric value. */
  #refinery-value {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    column-gap: .12em;
  }

  #refinery-value span {
    display: inline-block;
    width: auto;
    margin: 0;
    font-size: .68rem;
    line-height: 1;
  }

  #supply .supply-card .metric-change {
    min-height: 0;
    font-size: .70rem;
    line-height: 1.25;
    white-space: normal;
  }

  /* Trade: preserve the v44/v41 horizontal card, simply normalize spacing. */
  .trade-metric-card .metric-value {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    column-gap: .20em;
    margin-bottom: 8px;
  }

  .trade-metric-card .metric-value span {
    margin: 0;
    font-size: .64rem;
    white-space: nowrap;
  }

  .trade-metric-card .metric-change {
    font-size: .72rem;
    line-height: 1.25;
    white-space: nowrap;
  }

  /* Comfortable tap targets without altering visible wording. */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
  }

  input {
    font-size: 16px;
  }
}

@media (max-width: 390px) {
  #prices .metric-grid.four .metric-value {
    font-size: clamp(1.56rem, 7.9vw, 1.95rem);
  }

  #prices .metric-grid.four .metric-value span {
    font-size: .60rem;
  }

  #prices .metric-grid.four .metric-change,
  #supply .supply-card .metric-change {
    font-size: .65rem;
  }

  .trade-metric-card .metric-value span {
    font-size: .60rem;
  }
}


.signal-list {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.signal {
  grid-template-columns: minmax(0, 1fr) 96px 88px;
  column-gap: 12px;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid #e1e5e0;
  border-radius: 10px;
  background: rgba(246, 248, 244, .62);
}

.signal > span {
  color: var(--ink);
  font-size: 1rem;
  font-weight: var(--weight-heavy);
  line-height: 1.25;
  letter-spacing: -.012em;
}

.signal-delta {
  align-self: center;
  color: var(--muted);
  font-size: .76rem;
  font-weight: var(--weight-bold);
  line-height: 1.25;
}

.signal-direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: end;
  min-width: 78px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1;
  font-weight: var(--weight-heavy);
}

.signal strong.up .signal-direction {
  color: var(--green);
  background: rgba(31, 109, 79, .08);
  border-color: rgba(31, 109, 79, .14);
}

.signal strong.down .signal-direction {
  color: var(--red);
  background: rgba(161, 64, 51, .07);
  border-color: rgba(161, 64, 51, .12);
}

.signal strong.neutral .signal-direction {
  color: var(--muted);
  background: rgba(109, 119, 111, .07);
  border-color: rgba(109, 119, 111, .12);
}

@media (max-width: 760px) {
  .signal-list {
    gap: 7px;
    padding-top: 9px;
  }

  .signal {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 5px;
    min-height: 0;
    padding: 11px 12px;
  }

  .signal > span {
    grid-column: 1;
    grid-row: 1;
    font-size: .95rem;
  }

  .signal-delta {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    text-align: left;
    font-size: .72rem;
  }

  .signal-direction {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    min-width: 72px;
    padding: 6px 8px;
    font-size: .74rem;
  }
}


@media (min-width: 761px) {
  .signal-list {
    display: block;
    margin-top: 22px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
  }

  .signal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 4px;
    min-height: 0;
    padding: 15px 2px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }

  .signal:last-child {
    border-bottom: 0;
  }

  .signal > span {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.02rem;
    font-weight: var(--weight-heavy);
    line-height: 1.2;
    letter-spacing: -.012em;
  }

  .signal-delta {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    color: var(--muted);
    font-size: .76rem;
    font-weight: var(--weight-bold);
    line-height: 1.25;
  }

  .signal-direction {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    font-size: .84rem;
    font-weight: var(--weight-heavy);
    line-height: 1.1;
  }

  .signal strong.up .signal-direction,
  .signal strong.down .signal-direction,
  .signal strong.neutral .signal-direction {
    border-color: transparent;
  }
}


@media (min-width: 1100px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr);
    gap: 44px;
  }

  .why-card {
    width: 100%;
    max-width: none;
  }
}


#why-heading #why-direction {
  display: block;
}

#why-heading #why-direction::after {
  content: ".";
}


@media (max-width: 760px) {
  .chart-wrap {
    width: 100%;
    margin-top: 10px;
    overflow: hidden !important;
    scrollbar-width: none;
  }

  .chart-wrap::-webkit-scrollbar {
    display: none;
  }

  #priceChart {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    height: auto;
  }

  /* Four summary statistics in a compact 2x2 grid. */
  .chart-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-top: 8px;
    padding-top: 0 !important;
    border-top: 1px solid var(--line);
  }

  .chart-stats div {
    min-height: 0 !important;
    padding: 13px 12px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    justify-content: flex-start !important;
    gap: 4px;
    border-bottom: 1px solid var(--line);
  }

  .chart-stats div:nth-child(odd) {
    padding-left: 0 !important;
    border-right: 1px solid var(--line);
  }

  .chart-stats div:nth-child(even) {
    padding-right: 0 !important;
  }

  .chart-stats div:nth-last-child(-n/**/+2) {
    border-bottom: 0;
  }

  .chart-stats span {
    font-size: .72rem;
    line-height: 1.25;
    color: var(--muted);
  }

  .chart-stats strong {
    font-size: 1.05rem;
    line-height: 1.1;
    font-weight: 800;
  }
}

@media (max-width: 390px) {
  .chart-stats div {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }

  .chart-stats span {
    font-size: .69rem;
  }

  .chart-stats strong {
    font-size: 1rem;
  }
}


@media (max-width: 760px) {
  .chart-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-top: 10px;
    padding: 0 !important;
    border-top: 1px solid var(--line);
  }

  .chart-stats div {
    min-height: 0 !important;
    padding: 11px 10px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    justify-content: flex-start !important;
    gap: 3px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .chart-stats div:nth-child(odd) {
    padding-left: 0 !important;
    padding-right: 14px !important;
    border-right: 1px solid var(--line) !important;
  }

  .chart-stats div:nth-child(even) {
    padding-left: 14px !important;
    padding-right: 0 !important;
  }

  .chart-stats div:nth-child(n/**/+3) {
    border-top: 1px solid var(--line) !important;
  }

  .chart-stats span {
    font-size: .70rem;
    line-height: 1.2;
    color: var(--muted);
  }

  .chart-stats strong {
    font-size: 1.08rem;
    line-height: 1.08;
    font-weight: 800;
    color: var(--ink);
  }
}

@media (max-width: 390px) {
  .chart-stats div {
    padding-top: 10px !important;
    padding-bottom: 9px !important;
  }

  .chart-stats span {
    font-size: .67rem;
  }

  .chart-stats strong {
    font-size: 1.02rem;
  }
}


@media (max-width: 760px) {
  .chart-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-top: 8px;
    padding: 8px 0 0 !important;
    border-top: 1px solid var(--line);
  }

  .chart-stats div,
  .chart-stats div:nth-child(odd),
  .chart-stats div:nth-child(even),
  .chart-stats div:nth-child(n/**/+3) {
    min-width: 0;
    min-height: 0 !important;
    padding: 0 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    justify-content: flex-start !important;
    gap: 2px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .chart-stats div:first-child {
    padding-left: 0 !important;
  }

  .chart-stats div:last-child {
    padding-right: 0 !important;
  }

  .chart-stats span {
    font-size: .56rem;
    line-height: 1.15;
    color: var(--muted);
    white-space: normal;
  }

  .chart-stats strong {
    font-size: .82rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .chart-stats {
    padding-top: 7px !important;
  }

  .chart-stats div,
  .chart-stats div:nth-child(odd),
  .chart-stats div:nth-child(even),
  .chart-stats div:nth-child(n/**/+3) {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .chart-stats div:first-child {
    padding-left: 0 !important;
  }

  .chart-stats div:last-child {
    padding-right: 0 !important;
  }

  .chart-stats span {
    font-size: .53rem;
  }

  .chart-stats strong {
    font-size: .78rem;
  }
}


/* Shared numbered badge treatment */
.context-icon,
.pipeline-number {
  width: 2.05rem;
  height: 2.05rem;
  min-width: 2.05rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
  margin: 0;
  vertical-align: middle;
}

/* Supply explanations */
#supply .supply-context,
.context-card {
  display: grid;
  grid-template-columns: 2.05rem minmax(0, 1fr);
  column-gap: .7rem;
  align-items: start;
}

#supply .supply-context .context-icon,
.context-card .context-icon {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

#supply .supply-context h3,
.context-card h3 {
  grid-column: 2;
  grid-row: 1;
  margin: .05rem 0 0;
  align-self: center;
}

#supply .supply-context p,
.context-card p {
  grid-column: 1 / -1;
  margin: .75rem 0 0;
}

/* Price-chain explainer */
.pipeline-step {
  display: grid;
  grid-template-columns: 2.05rem minmax(0, 1fr);
  column-gap: .75rem;
  align-items: start;
}

.pipeline-number {
  grid-column: 1;
  grid-row: 1;
}

.pipeline-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: .05rem 0 0;
  font-size: 1rem;
  line-height: 1.25;
}

.pipeline-value,
.pipeline-subvalue,
.pipeline-step p {
  grid-column: 1 / -1;
}

.pipeline-value {
  margin-top: .95rem;
}

.pipeline-subvalue {
  margin-top: .35rem;
}

.pipeline-step p {
  margin-top: .75rem;
}

/* Keep the desktop rhythm compact and aligned */
@media (min-width: 761px) {
  #supply .supply-context h3 {
    font-size: .98rem;
    line-height: 1.28;
  }

  #supply .supply-context p {
    font-size: .84rem;
    line-height: 1.56;
  }

  .pipeline-step p {
    font-size: .79rem;
    line-height: 1.58;
  }
}

/* Mobile tuning */
@media (max-width: 760px) {
  #supply .supply-context,
  .pipeline-step {
    grid-template-columns: 1.95rem minmax(0, 1fr);
    column-gap: .65rem;
  }

  #supply .supply-context .context-icon,
  .pipeline-number {
    width: 1.95rem;
    height: 1.95rem;
    min-width: 1.95rem;
    font-size: .74rem;
  }

  #supply .supply-context h3 {
    margin-top: .04rem;
  }

  .pipeline-title {
    font-size: .96rem;
    margin-top: .02rem;
  }

  .pipeline-value {
    margin-top: .9rem;
  }

  .pipeline-step p {
    margin-top: .68rem;
  }
}

@media (max-width: 390px) {
  #supply .supply-context,
  .pipeline-step {
    column-gap: .58rem;
  }

  #supply .supply-context .context-icon,
  .pipeline-number {
    width: 1.85rem;
    height: 1.85rem;
    min-width: 1.85rem;
    font-size: .71rem;
  }

  .pipeline-title {
    font-size: .92rem;
  }
}


@supports not (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(247, 248, 244, 0.98);
  }
}


/* Give paired supply headings a consistent header block so the
   number badges, titles, and body-copy starts line up cleanly. */


#supply .supply-context .context-icon {
  align-self: center;
  justify-self: start;
}


/* Keep each two-column pair geometrically consistent. */
#supply .supply-pair-context {
  align-items: stretch;
}

@media (max-width: 760px) {
  #supply .supply-context {
    grid-template-rows: 3.6rem auto;
  }

  #supply .supply-context h3 {
    min-height: 3.6rem;
    margin: 0;
  }

  #supply .supply-context .context-icon {
    align-self: center;
  }

  #supply .supply-context p {
    margin-top: .52rem;
  }
}

@media (max-width: 390px) {
  #supply .supply-context {
    grid-template-rows: 3.8rem auto;
  }

  #supply .supply-context h3 {
    min-height: 3.8rem;
  }
}


/* Supply explanations no longer show numbered badges. */
#supply .supply-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 3.15rem auto;
  align-content: start;
}

#supply .supply-context h3 {
  grid-column: 1;
  grid-row: 1;
  min-height: 3.15rem;
  margin: 0;
  display: flex;
  align-items: center;
}

#supply .supply-context p {
  grid-column: 1;
  grid-row: 2;
  margin-top: .62rem;
}

/* Pipeline keeps 01–04 badges from v59. Make arrows unmistakable on desktop. */
@media (min-width: 761px) {
  #explainer .pipeline-arrow {
    display: grid !important;
    place-items: center;
    align-self: center;
    justify-self: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid rgba(31, 107, 77, .18);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
  }
}

@media (max-width: 760px) {
  #supply .supply-context {
    grid-template-rows: 3.6rem auto;
  }

  #supply .supply-context h3 {
    min-height: 3.6rem;
    margin: 0;
  }

  #supply .supply-context p {
    margin-top: .52rem;
  }

  /* Keep the existing mobile explainer behavior. */
  #explainer .pipeline-arrow {
    display: none !important;
  }
}

@media (max-width: 390px) {
  #supply .supply-context {
    grid-template-rows: 3.8rem auto;
  }

  #supply .supply-context h3 {
    min-height: 3.8rem;
  }
}


/* Remove accumulated grid positioning from the individual steps. */
#explainer .pipeline-card {
  align-items: start;
}

#explainer .pipeline-step {
  display: block;
  align-self: start;
  min-width: 0;
  margin: 0;
  padding-top: 0;
}

/* One fixed header row owns both the badge and title. */
#explainer .pipeline-heading {
  display: flex;
  align-items: center;
  gap: .72rem;
  height: 2.05rem;
  min-height: 2.05rem;
  margin: 0;
  padding: 0;
}

#explainer .pipeline-heading .pipeline-number {
  flex: 0 0 2.05rem;
  width: 2.05rem;
  height: 2.05rem;
  min-width: 2.05rem;
  margin: 0;
  grid-column: auto;
  grid-row: auto;
}

#explainer .pipeline-heading .pipeline-title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  height: 2.05rem;
  min-height: 2.05rem;
  margin: 0;
  padding: 0;
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  font-size: 1rem;
  line-height: 1.15;
}

/* Every primary value begins at the same offset below the header. */
#explainer .pipeline-value {
  display: block;
  margin: .78rem 0 0;
  grid-column: auto;
}

#explainer .pipeline-subvalue {
  display: block;
  margin: .35rem 0 0;
  grid-column: auto;
}

#explainer .pipeline-step p {
  display: block;
  margin: .72rem 0 0;
  grid-column: auto;
}

@media (max-width: 760px) {
  #explainer .pipeline-step {
    display: block;
  }

  #explainer .pipeline-heading {
    gap: .65rem;
    height: 1.95rem;
    min-height: 1.95rem;
  }

  #explainer .pipeline-heading .pipeline-number {
    flex-basis: 1.95rem;
    width: 1.95rem;
    height: 1.95rem;
    min-width: 1.95rem;
  }

  #explainer .pipeline-heading .pipeline-title {
    height: 1.95rem;
    min-height: 1.95rem;
    font-size: .96rem;
  }

  #explainer .pipeline-value {
    margin-top: .72rem;
  }
}

@media (max-width: 390px) {
  #explainer .pipeline-heading {
    gap: .58rem;
    height: 1.85rem;
    min-height: 1.85rem;
  }

  #explainer .pipeline-heading .pipeline-number {
    flex-basis: 1.85rem;
    width: 1.85rem;
    height: 1.85rem;
    min-width: 1.85rem;
  }

  #explainer .pipeline-heading .pipeline-title {
    height: 1.85rem;
    min-height: 1.85rem;
    font-size: .92rem;
  }
}


@media (min-width: 761px) {
  #explainer .pipeline-arrow {
    position: relative;
    display: block !important;
    align-self: start;
    justify-self: stretch;
    width: 3.2rem;
    height: 1.4rem;
    margin-top: 4.6rem;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  /* horizontal connector */
  #explainer .pipeline-arrow::before {
    content: "";
    position: absolute;
    left: .15rem;
    right: .65rem;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: rgba(31, 107, 77, .48);
    border-radius: 2px;
  }

  /* arrow head */
  #explainer .pipeline-arrow::after {
    content: "";
    position: absolute;
    right: .16rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    border-top: 2px solid var(--green);
    border-right: 2px solid var(--green);
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center;
  }
}

@media (max-width: 760px) {
  #explainer .pipeline-arrow {
    display: none !important;
  }
}


@media (min-width: 761px) {
  #explainer .pipeline-arrow {
    position: static;
    display: grid !important;
    place-items: center;
    align-self: start;
    justify-self: center;
    width: 2rem;
    height: 2.05rem;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--green) !important;
    font-size: 1.55rem !important;
    font-weight: 800;
    line-height: 1;
  }

  #explainer .pipeline-arrow::before,
  #explainer .pipeline-arrow::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 760px) {
  #explainer .pipeline-arrow {
    display: none !important;
  }
}


@media (min-width: 761px) {
  #explainer .pipeline-arrow {
    position: static;
    display: grid !important;
    place-items: center;
    align-self: start;
    justify-self: center;
    width: 2.2rem;
    height: 1.8rem;
    margin: 4.45rem 0 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--green) !important;
    font-size: 1.55rem !important;
    font-weight: 700;
    line-height: 1;
  }

  #explainer .pipeline-arrow::before,
  #explainer .pipeline-arrow::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 760px) {
  #explainer .pipeline-arrow {
    display: none !important;
  }
}


/* v70: weekly summary headline emphasis */
.why-card .price-direction {
  color: var(--red);
}


/* v74: spot vs futures explainer */
.price-explainer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  margin-top: 18px;
}

.price-explainer-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 24px 24px 22px;
}

.price-explainer-label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: #eef3ef;
  color: var(--green);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.price-explainer-card h3 {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing: -.03em;
}

.price-explainer-card p {
  margin: 0 0 14px;
  color: var(--muted);
}

.price-explainer-points {
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
}

.price-explainer-points li + li {
  margin-top: 8px;
}

.price-explainer-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1;
  color: var(--green);
  opacity: .9;
}

.price-explainer-note {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  color: var(--muted);
}

.price-explainer-note strong {
  color: var(--ink);
}

@media (max-width: 860px) {
  .price-explainer {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .price-explainer-symbol {
    order: 2;
    transform: rotate(90deg);
    font-size: 2.6rem;
  }

  .price-explainer-card {
    padding: 20px 18px 18px;
  }
}


/* v75: compact spot-vs-futures explainer to match the editorial card system */
#spot-vs-futures {
  padding: 48px 0;
}

#spot-vs-futures .price-explainer {
  gap: 16px;
  margin-top: 14px;
}

#spot-vs-futures .price-explainer-card {
  border-radius: 14px;
  padding: 18px 20px 17px;
}

#spot-vs-futures .price-explainer-label {
  display: block;
  margin: 0 0 7px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--type-kicker);
  font-weight: var(--weight-heavy);
  letter-spacing: .105em;
  line-height: 1.25;
}

#spot-vs-futures .price-explainer-card h3 {
  margin: 0 0 7px;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  letter-spacing: 0;
}

#spot-vs-futures .price-explainer-card p {
  margin: 0 0 10px;
  font-size: .84rem;
  line-height: 1.56;
}

#spot-vs-futures .price-explainer-points {
  padding-left: 18px;
  font-size: .78rem;
  line-height: 1.5;
}

#spot-vs-futures .price-explainer-points li + li {
  margin-top: 4px;
}

#spot-vs-futures .price-explainer-symbol {
  width: 34px;
  font-size: 2.65rem;
}

#spot-vs-futures .price-explainer-note {
  margin-top: 13px;
  padding-top: 12px;
  font-size: .84rem;
  line-height: 1.55;
}

@media (max-width: 860px) {
  #spot-vs-futures {
    padding: 42px 0;
  }

  #spot-vs-futures .price-explainer {
    gap: 10px;
  }

  #spot-vs-futures .price-explainer-card {
    padding: 16px 16px 15px;
    border-radius: 12px;
  }

  #spot-vs-futures .price-explainer-symbol {
    width: auto;
    min-height: 30px;
    font-size: 2.1rem;
    transform: none;
  }

  #spot-vs-futures .price-explainer-card h3 {
    font-size: .98rem;
  }

  #spot-vs-futures .price-explainer-card p {
    font-size: .80rem;
  }

  #spot-vs-futures .price-explainer-points {
    font-size: .75rem;
  }
}


/* v76: define Spot vs. Futures as its own chapter */
#spot-vs-futures {
  background: #fafbf8;
  border-top: 1px solid #d7ddd6;
  border-bottom: 1px solid #d7ddd6;
}


/* v81: ticker price explainers */
.ticker-info-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: help;
  border-radius: 6px;
}

.ticker-info-item:hover,
.ticker-info-item:focus-visible,
.ticker-info-item[aria-expanded="true"] {
  background: rgba(47, 122, 91, .065);
  outline: none;
}

.ticker-info-item:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(47, 122, 91, .22);
}

/* JS sets left dynamically so the same popover can follow any ticker item. */
.ticker-popover {
  right: auto;
  left: 14px;
  width: min(420px, calc(100vw - 28px));
}

@media (max-width: 760px) {
  .ticker-info-item {
    flex: 0 0 auto;
  }

  .ticker-popover {
    right: auto;
    left: 14px;
    width: min(400px, calc(100vw - 28px));
  }
}


/* v83: Latest release-cadence explainer */
.freshness-overview {
  font-weight: 700;
}


/* v84: fix Spot vs. Futures mobile card order */
@media (max-width: 860px) {
  #spot-vs-futures .price-explainer-card,
  #spot-vs-futures .price-explainer-symbol {
    order: initial !important;
  }

  #spot-vs-futures .price-explainer-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: -2px 0;
    transform: none !important;
  }
}


/* v85: tighten mobile gas-price pipeline spacing */
@media (max-width: 760px) {
  #explainer .pipeline-step {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  #explainer .pipeline-step + .pipeline-step {
    margin-top: 0;
    border-top: 1px solid var(--line);
  }

  #explainer .pipeline-heading {
    margin-bottom: 10px;
  }

  #explainer .pipeline-step .pipeline-value,
  #explainer .pipeline-step .metric-value {
    margin-top: 0 !important;
    margin-bottom: 12px;
  }

  #explainer .pipeline-step p {
    margin-top: 0;
  }
}


/* =========================================================
   Fuel Numbers brand integration — production v2
   ========================================================= */
:root {
  --ink: #0F2433;
  --muted: #627078;
  --sage: #5B8F7A;
  --green: #477866;
  --green-2: #5B8F7A;
  --paper: #FAF9F6;
  --card: #fffefa;
  --line: #D8DDDF;
  --soft: #F0F2F0;
  --green-soft: #E9F0EC;
  --shadow: 0 10px 32px rgba(15, 36, 51, .055);
  --shadow-raised: 0 16px 42px rgba(15, 36, 51, .075);
}

body { background: var(--paper); color: var(--ink); }
.site-header {
  background: rgba(250, 249, 246, .955);
  box-shadow: 0 1px 0 rgba(199, 205, 209, .72);
}

.brand { gap: 0; letter-spacing: 0; line-height: 1; }
.brand-logo {
  display: block;
  width: auto;
  height: 30px;
  max-width: min(250px, 52vw);
  object-fit: contain;
}
.footer-brand .brand-logo { height: 25px; max-width: 215px; }

.hero-brandline {
  margin: 0 0 13px;
  color: var(--ink);
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.2;
}

.hero h1 span { color: var(--sage); }
.nav a:hover, .active-link, .footer-links a:hover { color: var(--green); }
.newsletter-card {
  background: #0F2433;
  border-color: #0F2433;
}
.newsletter-card .eyebrow { color: #A7C6B8; }
.newsletter-card p { color: #D3DCDA; }
.newsletter-form button { color: #0F2433; }
.market-ticker { border-color: rgba(199, 205, 209, .75); }

@media (max-width: 760px) {
  .brand-logo { height: 29px; max-width: 230px; }
  .footer-brand .brand-logo { height: 24px; }
}

@media (max-width: 390px) {
  .brand-logo { height: 27px; max-width: 205px; }
}


/* Crisp live wordmark paired with the generated standalone bar mark. */
.brand { gap: 9px; }
.brand-mark-img {
  display: block;
  width: auto;
  height: 30px;
  object-fit: contain;
  flex: 0 0 auto;
}
.brand-word {
  display: inline-flex;
  align-items: baseline;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.43rem;
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1;
  white-space: nowrap;
}
.brand-fuel { color: #0F2433; }
.brand-numbers { color: #5B8F7A; }
.footer-brand .brand-mark-img { height: 25px; }
.footer-brand .brand-word { font-size: 1.18rem; }

@media (max-width: 760px) {
  .brand-mark-img { height: 28px; }
  .brand-word { font-size: 1.34rem; }
  .footer-brand .brand-mark-img { height: 23px; }
  .footer-brand .brand-word { font-size: 1.12rem; }
}


/* =========================================================
   Fuel Numbers black + red brand theme — production v3
   ========================================================= */
:root {
  --ink: #111111;
  --muted: #6B6B6B;
  --sage: #D62828;
  --green: #B71824;
  --green-2: #D62828;
  --paper: #F8F7F4;
  --card: #FFFFFF;
  --line: #DAD9D5;
  --soft: #F0EFEC;
  --green-soft: #F9E9EA;
  --shadow: 0 10px 32px rgba(17, 17, 17, .055);
  --shadow-raised: 0 16px 42px rgba(17, 17, 17, .075);
}

body { background: var(--paper); color: var(--ink); }
.site-header {
  background: rgba(248, 247, 244, .96);
  box-shadow: 0 1px 0 rgba(17,17,17,.12);
}
.brand-fuel { color: #111111; }
.brand-numbers { color: #D62828; }
.hero h1 span { color: #D62828; }
.nav a:hover, .active-link, .footer-links a:hover { color: #B71824; }
.newsletter-card { background: #111111; border-color: #111111; }
.newsletter-card .eyebrow { color: #F16A72; }
.newsletter-card p { color: #D7D7D7; }
.newsletter-form button { color: #111111; }
.market-ticker { border-color: rgba(17,17,17,.14); }
.hero-brandline { color: #111111; }
::selection { background: #F3B9BD; color: #111111; }


/* =========================================================
   Fuel Numbers black + red palette correction — production v4
   Keeps the v85/v2 editorial layout; removes sage as a brand color.
   ========================================================= */
:root {
  --ink: #0F1720;
  --muted: #64717B;
  --paper: #FAF9F6;
  --card: #FFF;
  --line: #D9DDDF;
  --soft: #F1F2F1;

  /* Legacy variable names remain because the existing UI uses them.
     They now point to the Fuel Numbers red palette. */
  --sage: #D51F26;
  --green: #D51F26;
  --green-2: #C91C23;
  --green-soft: #FBEDEE;
  --red: #D51F26;
  --amber: #D51F26;

  --shadow: 0 10px 32px rgba(15, 23, 32, .05);
  --shadow-raised: 0 16px 42px rgba(15, 23, 32, .07);
}

body {
  background: var(--paper);
  color: var(--ink);
}

.site-header {
  background: rgba(250, 249, 246, .965);
  box-shadow: 0 1px 0 rgba(15, 23, 32, .13);
}

/* Brand */
.brand-fuel { color: #0F1720; }
.brand-numbers { color: #D51F26; }
.brand-mark-img { filter: none; }

/* Navigation and editorial accents */
.nav a:hover,
.nav a:focus-visible,
.active-link,
.footer-links a:hover,
.footer-links a:focus-visible,
.eyebrow,
.trade-flow-copy .eyebrow {
  color: #D51F26;
}

.hero-brandline { color: #0F1720; }
.hero h1 span { color: #D51F26; }

/* Neutralize residual sage-tinted surfaces. */
.why-card,
.chart-card,
.pipeline-card,
.calculator-card,
.notice-box,
.metric-card,
.context-card,
.trade-flow-card {
  border-color: var(--line);
}

.metric-card.featured {
  border-color: var(--line);
  background: #FFF;
}

.notice-box {
  background: #F7F7F5;
  border-color: var(--line);
}

/* Tabs / controls: red active state, neutral inactive state. */
.series-btn.active,
.range-btn.active {
  color: #C91C23;
  background: #FBEDEE;
  box-shadow: inset 0 0 0 1px #F0C6C9;
}

.series-btn:hover,
.range-btn:hover {
  color: #C91C23;
}

.chart-series-tabs,
.range-tabs {
  border-color: #D9DDDF;
  background: #F2F2F0;
}

/* Small numbered/explainer accents. */
.pipeline-number,
#explainer .pipeline-heading .pipeline-number {
  background: #FBEDEE;
  color: #C91C23;
  border-color: #F0C6C9;
}

/* Market-direction semantics: rising prices are red; falling/lower is neutral charcoal.
   This prevents green from functioning as a second brand color. */
.up,
.ticker-change.up,
.signal strong.up .signal-direction,
.signal strong.up .signal-delta,
.price-direction.up,
.metric-change.up {
  color: #C91C23;
}

.down,
.ticker-change.down,
.signal strong.down .signal-direction,
.signal strong.down .signal-delta,
.price-direction.down,
.metric-change.down {
  color: #39434A;
}

.neutral,
.ticker-change.neutral {
  color: var(--muted);
}

/* Weekly-change card: use red only for the directional emphasis. */
.why-card .price-direction,
.why-card .price-direction.up {
  color: #C91C23;
}
.why-card .price-direction.down,
.why-card .price-direction.neutral {
  color: #39434A;
}

/* Ticker / separators / cards stay neutral. */
.market-ticker {
  border-color: rgba(15, 23, 32, .14);
  background: rgba(255, 255, 255, .48);
}
.ticker-divider { background: #D9DDDF; }

/* Footer and newsletter keep the darker black/red identity. */
.newsletter-card {
  background: #101317;
  border-color: #101317;
}
.newsletter-card .eyebrow { color: #FF6A70; }
.newsletter-card p,
.newsletter-note { color: #D6D9DB; }
.newsletter-form button { color: #101317; }
.footer-brand .brand-fuel { color: #0F1720; }
.footer-brand .brand-numbers { color: #D51F26; }

/* Focus and selection treatment. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline-color: #D51F26;
}
::selection {
  background: #F3B7BA;
  color: #0F1720;
}

/* =========================================================
   Fuel Numbers production v6 — surface + responsive layout QA
   Normalizes card surfaces and tightens desktop/mobile alignment.
   ========================================================= */

/* All primary information cards use the same true-white surface. */
.why-card,
.chart-card,
.metric-card,
.trade-metric-card,
.price-explainer-card,
.pipeline-card,
.calculator-card,
.notice-box,
.trade-flow-card {
  background: #fff;
  border-color: var(--line);
}

.metric-card.featured {
  background: #fff;
  border-color: var(--line);
}

/* Remove the remaining sage tint from chapter backgrounds. */
.section-muted,
#spot-vs-futures,
.trade-section {
  background: #f4f4f1;
  border-color: var(--line);
}

/* Keep small inset rows neutral as well. */
.signal {
  background: #fff;
  border-color: #e1e2e0;
}

/* Section-heading geometry: predictable left title / right note alignment. */
.section-heading {
  align-items: flex-end;
}

.section-heading > div {
  min-width: 0;
  flex: 1 1 auto;
}

.section-note {
  flex: 0 1 430px;
  max-width: 430px;
}

/* Equal-height card rows and consistent internal rhythm. */
.metric-grid.four {
  align-items: stretch;
}

.metric-grid.four > .metric-card,
.supply-pairs-layout .supply-card,
.trade-metric-grid > .trade-metric-card {
  height: 100%;
}

#prices .metric-grid.four .metric-card {
  background: #fff;
}

#prices .metric-grid.four .metric-change {
  min-height: 2.45em;
}

/* Supply cards: align numbers/units cleanly and keep changes at a common baseline. */
#supply .supply-card {
  background: #fff;
}

#supply .supply-card .metric-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .28em;
}

#supply .supply-card .metric-value span {
  margin-left: 0;
}

#supply .supply-card .metric-change {
  margin-top: auto;
  padding-top: 4px;
}

#refinery-value {
  flex-wrap: nowrap !important;
  column-gap: 0 !important;
}

#refinery-value span {
  margin-left: 0 !important;
}

/* Supply explanations align as a clean second row on desktop. */
#supply .supply-context {
  height: 100%;
}

/* Trade cards use the same surface and divider language as the rest of the page. */
.trade-metric-card {
  background: #fff;
}

.trade-card-explainer {
  border-color: var(--line);
}

/* Prevent long headings/notes from forcing horizontal overflow. */
.section-heading h2,
.section-note,
.metric-label,
.metric-value,
.metric-change,
.context-card,
.trade-card-stat,
.trade-card-explainer {
  min-width: 0;
}

@media (max-width: 980px) {
  .section-heading {
    gap: 22px;
  }

  .section-note {
    flex-basis: 360px;
    max-width: 360px;
  }
}

@media (max-width: 760px) {
  /* Chapter headings become one left-aligned block. */
  .section-heading {
    align-items: flex-start;
    gap: 9px;
  }

  .section-heading > div,
  .section-note {
    width: 100%;
    max-width: none;
    flex: 0 1 auto;
  }

  .section-note {
    text-align: left;
  }

  /* Keep the 2x2 headline price grid aligned. */
  #prices .metric-grid.four {
    align-items: stretch;
  }

  #prices .metric-grid.four .metric-card {
    height: 100%;
  }

  #prices .metric-grid.four .metric-change {
    min-height: 2.5em;
  }

  /* Supply cards remain compact pairs; word units use a deliberate second line. */
  #supply .supply-card {
    height: 100%;
  }

  #production-value,
  #crude-stocks-value,
  #gas-stocks-value {
    display: block !important;
  }

  #production-value span,
  #crude-stocks-value span,
  #gas-stocks-value span {
    display: block;
    margin: 5px 0 0 !important;
  }

  #supply .supply-card .metric-change {
    margin-top: 0;
    padding-top: 0;
  }

  /* A horizontal trade card is too tight on a phone; stack stat + explanation. */
  .trade-metric-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .trade-card-explainer {
    padding: 13px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .trade-card-explainer p {
    max-width: none;
  }
}

@media (max-width: 520px) {
  /* Full-width explanation text is much easier to read than two narrow columns. */
  .supply-pair-context {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  #supply .supply-context {
    min-height: 0;
    grid-template-rows: auto auto;
    padding: 14px 0 15px;
  }

  #supply .supply-context h3 {
    min-height: 0;
  }

  #supply .supply-context p {
    margin-top: 6px;
  }
}

@media (max-width: 340px) {
  /* Very narrow phones fall back to a single column rather than squeezing cards. */
  #prices .metric-grid.four,
  .supply-pair-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}