/* Commodities ------------------------------------------------------------- */
.hero { padding: 46px 0 22px; max-width: 820px; }
.hero .eyebrow { margin-bottom: 15px; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 5.5vw, 52px); line-height: 1.03; letter-spacing: -0.015em; margin: 0 0 16px; }
.hero h1 em { font-style: italic; color: var(--accent-2); }
.hero p { font-size: clamp(14px, 2vw, 17px); color: var(--muted); line-height: 1.6; margin: 0; max-width: 620px; }

.section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 38px 0 16px; flex-wrap: wrap; }
.section-h h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0; }
.section-h .sub { font-size: 12px; color: var(--faint); font-family: var(--mono); }

/* leaders / laggards strip */
.perf-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
@media (max-width: 640px) { .perf-strip { grid-template-columns: 1fr; } }
.perf-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.perf-card .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.perf-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.perf-row .bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: rgba(236,233,223,.07); overflow: hidden; margin-top: 3px; }
.perf-row .bar i { display: block; height: 100%; }
.perf-row .v { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* category grids */
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.cmd-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; transition: border-color .18s, transform .18s; }
.cmd-tile:hover { border-color: var(--line-2); transform: translateY(-2px); }
.cmd-tile .top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cmd-tile .nm { font-size: 14.5px; }
.cmd-tile .day { font-family: var(--mono); font-size: 12px; }
.cmd-tile .px { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 21px; margin: 8px 0 2px; }
.cmd-tile .spark { height: 40px; margin: 8px 0; }
.cmd-tile .rets { display: flex; gap: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.cmd-tile .rets b { font-weight: 400; }
.pos { color: var(--up); } .neg { color: var(--down); }

.cmd-tile { text-decoration: none; color: inherit; display: block; }