/* Energy Metal News — site stylesheet. Design: "Forge" (Chris, 2026-08-09). The material is the palette: graphite ground, elevated steel surfaces, warm off-white ink and ONE accent family — molten copper cooling to brass and gold. Category labels sit on that cooling ramp (Metals Tech = ember, Battery Metals = copper, Lithium News = brass, Green Energy = gold), so colour encodes the section rather than decorating it. Signature: the heat rule — every section opens with a 2px bar that starts at its own heat stop and cools into the hairline. Industrial-modern news, not crypto-dark and not a trading terminal. Archivo (variable, width axis) display / Inter (variable) body / IBM Plex Mono data — no face shared with equity-insider (Saira/Spectral), biotech-insider, ANG or USANG. Same 1400px wrap + 408px rail as the family. Structural rules that must survive any restyle: minmax(0,1fr) on every grid track holding text, >=44px tap targets (pad the anchor, not the li), >=16px form inputs, never style .row/.col-*, overflow-wrap on headlines and .prose. */ :root{ /* ---- The Ticker -------------------------------------------------------- Amber phosphor (#FFB000 — the amber-CRT monochrome of a trading terminal) on charcoal, with TAPE PAPER ink rather than white. Structure and surface values are EMN's, which were designed for a dark ground; only the accent family and the typefaces are ours. */ /* ground + elevated surfaces */ --bg:#101114; --surf:#171A20; --surf-2:#1D2129; --deep:#0B0C0F; --hair:#2A2F36; --hair-lo:#22262C; /* ink */ --ink:#ECE7DC; --ink-2:#C9C4B8; --mut:#9AA0AA; /* the one accent family: amber phosphor */ --copper:#FFB000; --accent:#FFB000; --accent-hi:#FFC642; --ember:#FFB000; --brass:#E0AC46; --gold:#F0CE86; /* data only */ --up:#4ADE80; --down:#F87171; --heat:var(--accent); --disp:'Archivo Narrow','Arial Narrow',system-ui,sans-serif; --body:'Source Serif 4',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --wrap:1400px; --gut:24px; } /* category heat stops — one accent family, four temperatures, never a rainbow */ .c-metals-tech{--heat:var(--ember)} .c-battery-metals{--heat:var(--copper)} .c-lithium-news{--heat:var(--brass)} .c-green-energy{--heat:var(--gold)} /* ---------- tap targets ---------- Every standalone anchor must present a >=44px hit box (WCAG 2.5.5). Small utility links get it with symmetric padding cancelled by an equal negative margin, so the hit box grows while the ink stays exactly where the design puts it. Applied via this one placeholder-style rule list — do not solve it per-component. Exempt by the "Equivalent" clause: a headline anchor that sits beside an image anchor pointing at the SAME href which is already far taller than 44px (.card__h a next to .card__ph, .list__t a next to .list__i .ph, .rel__i h3 a next to its .ph). Also exempt: inline links inside running prose (.prose) and breadcrumbs (.crumb). */ .logo, .sect h1 a,.sect h2 a, .shead a, .trend__foot a, .tv-copy a,.tradingview-widget-copyright a, .bench__src, .foot .email{display:inline-block;padding:15px 0;margin:-15px 0} *{box-sizing:border-box} /* .fullbleed uses 50vw margins, and vw includes the scrollbar — so on a scrolling page the bleed overhangs the viewport by the scrollbar width (8px each side at 1280) and creates a horizontal scrollbar. clip (not hidden) kills the overflow without creating a scroll container, so position:sticky in the rail keeps working. BOTH selectors are load-bearing: root overflow propagates to the viewport and leaves itself effectively visible, so html alone measures 1273 !== 1265 — body is what actually clips its overflowing children, and it only keeps its own overflow because html is no longer `visible`. Family-wide fix. */ html,body{overflow-x:clip} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased; font-synthesis-weight:none;text-rendering:optimizeLegibility} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .skip{position:absolute;left:-9999px;top:0;background:var(--copper);color:var(--deep); padding:12px 18px;z-index:99;font-family:var(--disp);font-weight:700} .skip:focus{left:0} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} ::selection{background:var(--copper);color:var(--deep)} /* ---------- instrument block: commodity tape + masthead ---------- */ .tape{background:var(--deep);border-bottom:1px solid var(--hair-lo)} .tape__in{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none} .tape__in::-webkit-scrollbar{display:none} .tape__lbl{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.24em; color:var(--accent);padding:9px 18px 9px 0;border-right:1px solid var(--hair-lo);flex:0 0 auto} .tq{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:12px; font-variant-numeric:tabular-nums;padding:9px 18px;border-right:1px solid var(--hair-lo); white-space:nowrap;flex:0 0 auto} .tq__sym{font-weight:600;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)} .tq__val{color:var(--ink-2)} .tq__chg{font-size:11px} .tq--up .tq__chg{color:var(--up)} .tq--dn .tq__chg,.tq--down .tq__chg{color:var(--down)} /* Provenance stamp — the tape carries live delayed quotes, so it has to say so on the page. */ .tape__note{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mut); padding:9px 0 9px 18px;white-space:nowrap;flex:0 0 auto} .masthead{background:var(--bg)} .masthead__in{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px} .logo{display:flex;align-items:center;gap:12px;flex:0 0 auto} /* the mark is a cast ingot face: copper block, graphite letters */ .mark{display:grid;place-items:center;width:34px;height:34px;background:var(--copper); color:var(--deep);font-family:var(--disp);font-weight:900;font-stretch:88%;font-size:15px; letter-spacing:.01em;flex:0 0 auto} .wordmark{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:18px; letter-spacing:.19em;text-transform:uppercase;color:var(--ink);white-space:nowrap;line-height:1} .mnav{display:flex;gap:0;flex:1;overflow-x:auto;scrollbar-width:none} .mnav::-webkit-scrollbar{display:none} /* 44px tap targets live on the anchor (WCAG 2.5.8) */ .mnav a{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.01em; padding:14px 13px;color:var(--ink-2);white-space:nowrap;position:relative} .mnav a:hover{color:var(--ink)} .mnav a::after{content:"";position:absolute;left:13px;right:13px;bottom:8px;height:2px; background:var(--copper);transform:scaleX(0);transform-origin:left} .mnav a:hover::after{transform:scaleX(1)} .mnav a[aria-current]{color:var(--ink)} .mnav a[aria-current]::after{transform:scaleX(1)} @media (prefers-reduced-motion: no-preference){.mnav a::after{transition:transform .2s ease}} .msearch{display:flex;align-items:center;gap:8px;background:var(--surf-2); border:1px solid var(--hair);padding:5px 12px;flex:0 0 auto} .msearch input{background:none;border:0;color:var(--ink);font-family:var(--mono); font-size:16px;width:132px;outline:none;padding:5px 0} .msearch input::placeholder{color:var(--mut)} /* signature: the heat rule — copper cooling into graphite under the masthead */ .striperule{height:3px;background: linear-gradient(90deg,var(--ember) 0,var(--copper) 90px,var(--brass) 190px,var(--hair) 330px,var(--hair-lo) 100%)} /* ---------- shared bits ---------- */ .stripes{height:2px;background:linear-gradient(90deg,var(--heat) 0 54px,var(--hair-lo) 54px)} .sect{display:flex;align-items:center;gap:18px;margin:0 0 22px} .sect h2,.sect h1{font-family:var(--disp);font-weight:800;font-stretch:106%;font-size:15px; letter-spacing:.15em;text-transform:uppercase;margin:0;color:var(--ink)} .sect a:hover{color:var(--accent)} .sect .stripes{flex:1} .shead{display:flex;align-items:baseline;justify-content:space-between;gap:16px; border-top:2px solid var(--heat);padding-top:13px;margin:0 0 18px} .shead h1,.shead h2{font-family:var(--disp);font-weight:800;font-stretch:106%;font-size:15px; text-transform:uppercase;letter-spacing:.15em;margin:0;color:var(--ink)} .shead a{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--accent)} .shead a:hover{text-decoration:underline} .hub-h1{font-family:var(--disp);font-weight:800;font-size:30px !important; letter-spacing:-.015em !important;text-transform:none !important} .eyebrow,.kick{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--heat);display:inline-block} .eyebrow--mut{color:var(--mut)} .stamp{font-family:var(--mono);font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums} .meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-family:var(--mono); font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums} .meta__by{color:var(--ink-2)} .chip{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--brass);background:rgba(224,172,70,.12); border:1px solid rgba(224,172,70,.34);padding:2px 7px} .ph{background:var(--surf-2);overflow:hidden} .ph img{width:100%;height:auto} .hl{font-family:var(--disp);font-weight:700;line-height:1.24;letter-spacing:-.012em;margin:0; overflow-wrap:break-word} .hl a:hover,.list__t a:hover,.card__h a:hover{color:var(--accent)} .colhead{font-family:var(--disp);font-weight:800;font-stretch:106%;font-size:12px; letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin:0 0 14px; padding-bottom:10px;border-bottom:2px solid var(--heat)} /* ---------- page grid (article + listing pages): content | 408px rail ---------- */ .page{display:grid;grid-template-columns:minmax(0,1fr) 408px;gap:44px;padding:28px 0 44px} .page__main{min-width:0} /* ---------- homepage: the lead ---------- */ .top{display:grid;grid-template-columns:minmax(0,1fr) 408px;gap:44px;padding:28px 0 36px; border-bottom:1px solid var(--hair-lo)} /* the lead is a cast panel: elevated surface, copper edge, image poured in from the right */ .brief{display:grid;grid-template-columns:minmax(0,1fr) 45%;background:var(--surf); border-left:3px solid var(--copper);overflow:hidden;min-height:420px} .brief__txt{padding:34px 38px 30px;display:flex;flex-direction:column} .brief h1{font-family:var(--disp);font-weight:800;font-stretch:104%; font-size:clamp(29px,3.1vw,48px);line-height:1.05;letter-spacing:-.022em;margin:14px 0 0; color:var(--ink);text-wrap:balance;overflow-wrap:break-word} .brief:hover h1{text-decoration:underline;text-decoration-thickness:3px; text-decoration-color:var(--copper);text-underline-offset:7px} .brief__sum,.lead__sum{font-size:16.5px;line-height:1.55;color:var(--ink-2);margin:16px 0 0;max-width:54ch} .brief .meta{margin-top:auto;padding-top:20px} .brief__ph{position:relative;min-height:100%;background:var(--surf-2)} .brief__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .brief__ph::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,var(--surf) 0,rgba(29,32,36,0) 22%)} .subhero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:30px} /* cards */ .card__ph{background:var(--surf-2);overflow:hidden;display:block;aspect-ratio:16/10;margin-bottom:12px} .card__ph img{width:100%;height:100%;object-fit:cover} .card__h{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.26; margin:6px 0 0;letter-spacing:-.012em;overflow-wrap:break-word} .card__h a{display:block;min-height:44px} .card .meta{margin-top:9px} @media (prefers-reduced-motion: no-preference){ .card__ph img{transition:transform .45s ease} .card__ph:hover img{transform:scale(1.03)} } /* bands */ .band{padding:36px 0 10px} .band--intop{padding:38px 0 0} .band--wash{background:var(--surf);border-top:1px solid var(--hair-lo); border-bottom:1px solid var(--hair-lo);padding-bottom:36px;margin-top:28px} /* full-bleed band living inside .wrap: stretch to the viewport, re-center the content */ .fullbleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} .wrap-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .band--wash .card__ph,.band--wash .ph{background:var(--surf-2)} .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px} .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;row-gap:36px} .pf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;list-style:none;margin:0;padding:0} /* the row's top padding belongs to the anchor, so the tap target IS the headline row */ .pf li{padding:0 0 14px;border-bottom:1px solid var(--hair-lo)} .pf li>a{display:block;padding:14px 0 0;min-height:44px} .pf .row__t{font-size:16.5px} /* .row__t is build.mjs's own list-row title element — not a framework grid class */ .row__t{font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.34;display:block; letter-spacing:-.006em;overflow-wrap:break-word} .pf a:hover .row__t,.latest-rail a:hover .row__t,.mr a:hover .row__t{color:var(--accent)} .mr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 44px;list-style:none; margin:0;padding:0;counter-reset:mr} /* rank in its own column, title and meta stacked beside it — the row carries a title AND a dateline, so a single flex line squeezes the dateline into a three-line stack */ .mr li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 14px;align-items:start; padding:0 0 13px;border-bottom:1px solid var(--hair-lo);counter-increment:mr} .mr li::before{content:counter(mr,decimal-leading-zero);grid-column:1;grid-row:1 / span 2; font-family:var(--mono);font-weight:600;font-size:19px;color:var(--copper);line-height:1.35; padding-top:13px} .mr li>a{grid-column:2;display:block;padding:13px 0 0;min-height:44px} .mr li>.meta{grid-column:2;margin-top:5px} /* ---------- rail ---------- */ .rail>*+*{margin-top:30px} .mkt__panel{background:var(--surf);border:1px solid var(--hair-lo);padding:10px 8px 4px} /* TradingView emits an iframe; contain it so a slow-loading embed can never push the rail wider than its column (overflow-safe at 375px — the grid track is already minmax(0,1fr)). */ .tradingview-widget-container{width:100%;max-width:100%;overflow:hidden} .tradingview-widget-container__widget{width:100%;max-width:100%} .tradingview-widget-container iframe{max-width:100%} /* CLS: the embed loads async and TradingView then sets an inline height on the CONTAINER — 520px for Market Overview, 126px for Single Quote — so without a reservation every page reflowed by ~490px / ~126px when the iframe landed (SEO audit I2, 2026-08-14). Measured on the live site, not assumed: both widgets report the SAME height at 1280px and at 375px (the config's "height":"520" is fixed; only the WIDTH is responsive), so one value per widget is correct and a per-breakpoint override would be wrong. The reservation must sit on .tradingview-widget-container, NOT on __widget: the script REPLACES the __widget div with the iframe, so a min-height there would be destroyed on load. The smaller __widget value keeps the credit line near the bottom of the reserved box before the iframe arrives; it stays under the container value so the box can never overshoot and then shrink. */ .mkt__panel .tradingview-widget-container{min-height:520px} .mkt__panel .tradingview-widget-container__widget{min-height:474px} .tick .tradingview-widget-container{min-height:126px} .tick .tradingview-widget-container__widget{min-height:96px} .tv-copy,.tradingview-widget-copyright{font-family:var(--mono);font-size:10px; color:var(--mut);padding:6px 8px 8px} .tv-copy a,.tradingview-widget-copyright a{color:var(--mut)} .tv-copy a:hover,.tradingview-widget-copyright a:hover{color:var(--accent)} /* Lithium benchmark strip (2026-08-11) — a DASHED border on purpose, unlike every solid-bordered panel around it, so it never reads as another live quote: it is a periodically-updated benchmark with its own as-of date, sitting just under the TradingView Market Overview panel. */ .bench{margin:8px 8px 0;padding:9px 10px;background:var(--surf-2);border:1px dashed var(--hair-lo); display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 10px;font-family:var(--mono);font-size:10.5px} .bench__lbl{font-weight:600;letter-spacing:.05em;color:var(--ink-2)} .bench__type{color:var(--mut);font-weight:400} .bench__val{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .bench__date{color:var(--mut)} .bench__src{margin-left:auto;color:var(--mut)} .bench__src:hover{color:var(--accent)} .panel--dark{background:var(--surf);border:1px solid var(--hair-lo);overflow:hidden;padding:6px} .panel--dark iframe{display:block;width:100%;border:0} /* Trending — Eagle Eye data rendered natively on the panel */ .trend{background:var(--surf);border:1px solid var(--hair-lo);padding:16px 18px 10px} .trend__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px} .trend__brand{font-family:var(--disp);font-weight:800;font-stretch:106%;font-size:12px; letter-spacing:.18em;text-transform:uppercase;color:var(--ink)} .trend__live{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px; letter-spacing:.16em;color:var(--accent)} .trend__live i{width:7px;height:7px;border-radius:50%;background:var(--accent)} @media (prefers-reduced-motion: no-preference){ .trend__live i{animation:eepulse 2.4s infinite} @keyframes eepulse{0%,100%{opacity:1}50%{opacity:.3}} } .trend ol{list-style:none;margin:6px 0 0;padding:0} .trend li{display:grid;grid-template-columns:18px 58px minmax(0,1fr) auto auto;gap:10px; align-items:baseline;padding:9px 0;border-top:1px solid var(--hair-lo); font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums} .trend .n{color:var(--mut);font-size:11px} .trend .sym{font-weight:600;letter-spacing:.05em;color:var(--ink)} .trend .co{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} .trend .ment{color:var(--mut);font-size:11px;text-align:right;min-width:28px} .trend .s-bull{color:var(--up);font-weight:600;font-size:11px} .trend .s-bear{color:var(--down);font-weight:600;font-size:11px} .trend .s-neut{color:var(--ink-2);font-weight:600;font-size:11px} .trend__foot{display:flex;align-items:center;justify-content:space-between;gap:10px; border-top:1px solid var(--hair-lo);margin-top:2px;padding:10px 0 4px; font-family:var(--mono);font-size:10px;color:var(--mut)} .trend__foot a{color:var(--accent);font-weight:600} .trend__foot a:hover{text-decoration:underline} .trend__disc{font-family:var(--mono);font-size:9.5px;color:var(--mut);padding:4px 0 2px} .tick{background:var(--surf);border:1px solid var(--hair-lo);padding:8px 6px 2px} .latest-rail ul{list-style:none;margin:0;padding:0} .latest-rail li{padding:0 0 12px;border-bottom:1px solid var(--hair-lo)} .latest-rail li>a{display:block;padding:12px 0 0;min-height:44px} .latest-rail li:last-child{border-bottom:0} .latest-rail .meta{margin-top:6px} .sub{background:var(--surf);border:1px solid var(--hair-lo);border-top:2px solid var(--copper);padding:22px} .sub h3{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.01em; margin:0 0 6px;color:var(--ink)} .sub p{font-size:14.5px;color:var(--ink-2);margin:0 0 14px;line-height:1.5} .sub__f{display:flex;flex-direction:column;gap:10px;position:relative} .sub__f button{align-self:flex-start} .sub__f .stamp{position:absolute;left:-9999px} .sub input,.sub__f input{flex:1;border:1px solid var(--hair);padding:11px 13px; font-family:var(--body);font-size:16px;background:var(--surf-2);color:var(--ink);min-width:0} .sub input::placeholder{color:var(--mut)} .sub button{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--deep); background:var(--copper);border:0;padding:12px 22px;min-height:44px;cursor:pointer;letter-spacing:.02em} .sub button:hover{background:var(--accent-hi)} .sub small{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--mut)} /* ---------- lists (category / topic / archive / search) ---------- */ .latest ol,.latest ul{list-style:none;margin:0;padding:0} .list__i{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;padding:20px 0; border-bottom:1px solid var(--hair-lo);align-items:start} .list__i .ph{aspect-ratio:240/160} .list__i .ph img{width:100%;height:100%;object-fit:cover} .list__m{display:flex;gap:12px;align-items:center;margin:0 0 8px;font-family:var(--mono); font-size:11px;font-variant-numeric:tabular-nums} .list__m::after{content:"";flex:1;height:1px;background:var(--hair-lo);min-width:12px} .list__when{color:var(--mut)} .list__cat{color:var(--heat);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:10px} .list__t{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.24;margin:0; letter-spacing:-.015em;overflow-wrap:break-word} .s-snip{font-size:15px;color:var(--ink-2);margin:9px 0 0;line-height:1.55;max-width:76ch} .pager{display:flex;justify-content:space-between;align-items:center;gap:16px; padding:22px 0;font-family:var(--disp);font-weight:600;font-size:14px} .pager a{color:var(--accent);display:inline-block;padding:12px 0} .pager a:hover{text-decoration:underline} .pager span{color:var(--mut);font-family:var(--mono);font-size:12px} .yearlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .yearlist a{display:flex;flex-direction:column;gap:4px;border:1px solid var(--hair-lo); background:var(--surf);padding:18px 20px} .yearlist a:hover{border-color:var(--copper)} .yearlist__y{font-family:var(--disp);font-weight:800;font-size:19px;color:var(--ink)} .yearlist__n{font-family:var(--mono);font-size:11px;color:var(--mut)} .bigsearch{display:flex;gap:10px;margin:6px 0 0} .bigsearch input{flex:1;border:1px solid var(--hair);padding:13px 16px;background:var(--surf-2); color:var(--ink);font-family:var(--body);font-size:16px;min-width:0} .bigsearch input::placeholder{color:var(--mut)} .bigsearch button{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--deep); background:var(--copper);border:0;padding:13px 24px;min-height:46px;cursor:pointer} .bigsearch button:hover{background:var(--accent-hi)} /* ---------- article ---------- */ .crumb{font-family:var(--mono);font-size:11px;color:var(--mut);margin:0 0 16px} .crumb a:hover{color:var(--accent)} .crumb span{color:var(--hair)} .art__head{margin:0 0 22px} .art__h1{font-family:var(--disp);font-weight:800;font-stretch:104%;font-size:clamp(30px,3.3vw,46px); line-height:1.06;letter-spacing:-.024em;margin:12px 0 0;max-width:24ch;overflow-wrap:break-word} .art__standfirst{font-size:20px;line-height:1.5;color:var(--ink-2);margin:18px 0 0; max-width:60ch;font-weight:400} .art__meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;font-family:var(--mono); font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums;margin:20px 0 0; padding-bottom:18px;border-bottom:2px solid var(--heat)} .art__by{color:var(--ink);font-weight:600} .art__fig{margin:26px 0 0} .art__fig .ph img{width:100%;height:auto} .art__fig figcaption{font-family:var(--mono);font-size:10.5px;color:var(--mut); padding:9px 2px 0;border-top:1px solid var(--hair-lo);margin-top:9px} .archive-note{font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink-2); background:var(--surf);border-left:3px solid var(--hair);padding:14px 18px;margin:24px 0 0} /* 2026-08-13 (Chris): coloured panel dropped — plain body-text colour on the page ground, thin rule to set it apart, no fill. See build.mjs badge-removal note above LATEST_BOX. */ /* 2026-08-13 (Chris): "remove background color make it white text only" — no fill, no rule, plain white text. Restoring the separator is one line: border-left:3px solid var(--ink) plus padding-left:16px. */ .spon-note{font-family:var(--mono);font-size:12px;line-height:1.55;color:#FFF; background:none;border:0;padding:0;margin:24px 0 0} .prose{font-size:18px;line-height:1.75;max-width:68ch;color:var(--ink-2);margin-top:26px; overflow-wrap:break-word} .prose p{margin:0 0 1.2em} .prose h2{font-family:var(--disp);font-weight:700;font-size:25px;line-height:1.22;color:var(--ink); margin:1.7em 0 .5em;letter-spacing:-.018em;max-width:none;overflow-wrap:break-word} .prose h3{font-family:var(--disp);font-weight:600;font-size:20px;line-height:1.3;color:var(--ink); margin:1.6em 0 .5em;max-width:none} .prose a{color:var(--accent);text-decoration:underline; text-decoration-color:rgba(232,145,60,.45);text-underline-offset:3px} .prose a:hover{text-decoration-color:var(--accent)} .prose img{margin:1.5em 0;height:auto} .prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em} .prose li{margin:0 0 .5em} .prose blockquote{border-left:3px solid var(--copper);margin:1.5em 0;padding:2px 0 2px 20px; color:var(--ink);font-style:italic} .prose strong{color:var(--ink);font-weight:600} .prose .image-credit{font-family:var(--mono);font-style:normal;font-size:10.5px;color:var(--mut); border-top:1px solid var(--hair-lo);padding-top:9px} .prose .article-abstract{font-size:17px;color:var(--ink-2);background:var(--surf);padding:18px 22px} .prose--plain{margin-top:6px;font-size:17px} /* issuer boilerplate tail on wire/sponsored articles — the DISCLAIMER block and everything below it (Chris, 2026-08-15). Set as small print so paid boilerplate no longer reads as our editorial copy at the same 18px. Emitted by build.mjs issuerTail(); wire/sponsored only. ⚠️ ACCESSIBILITY/LEGAL FLOOR — this is a paid-content disclosure, so muted is allowed but hidden is not. Never add display:none, visibility:hidden, opacity:0, a collapsed height or user-select:none here, and never take the size below 12.5px or the colour below 4.5:1. Measured: --mut #9A948A on --bg #16181B = 5.91:1 (WCAG AA needs 4.5:1); size 12.5px, matching the site's established .foot__disclaim small print. Text stays fully selectable and copyable. The child rules exist because .prose h2/h3 set their own font-size and .prose strong/a set their own colour — without them the tail's headings would still shout at 25px. */ /* The creator's republication note at the top of a wire article. Same small-print treatment as the issuer tail below it (Chris, 2026-08-15) — it is provenance metadata, not the article, and at 18px it read as the opening paragraph. Same legibility floor: >=12.5px, --mut is 5.91:1 on --bg, never hidden or unselectable — it names the sponsored disclosure. */ .prose .editor-note{font-size:12.5px;line-height:1.6;color:var(--mut)} .prose .editor-note strong{color:var(--ink-2)} .prose .issuer-tail{font-size:12.5px;line-height:1.6;color:var(--mut); border-top:1px solid var(--hair-lo);margin-top:2.6em;padding-top:20px} .prose .issuer-tail p{margin:0 0 1em} .prose .issuer-tail h2,.prose .issuer-tail h3{font-family:var(--disp);font-weight:700; font-size:13px;line-height:1.35;color:var(--ink-2);margin:1.8em 0 .6em;letter-spacing:0} .prose .issuer-tail ul,.prose .issuer-tail ol{margin:0 0 1em} .prose .issuer-tail li{margin:0 0 .35em} .prose .issuer-tail strong,.prose .issuer-tail b{color:inherit;font-weight:600} .prose .issuer-tail a{color:var(--ink-2);text-decoration-color:rgba(200,194,184,.45)} .prose .issuer-tail a:hover{color:var(--ink);text-decoration-color:var(--ink)} .pull{border-top:2px solid var(--copper);border-bottom:1px solid var(--hair-lo);margin:1.9em 0;padding:20px 0} .pull p{font-family:var(--disp);font-weight:700;font-size:23px;line-height:1.32;margin:0; letter-spacing:-.018em;color:var(--ink)} .keynums{background:var(--surf);border:1px solid var(--hair-lo);padding:20px 24px;margin:1.5em 0} .keynums dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)} .keynums dd{font-family:var(--disp);font-weight:800;font-size:23px;margin:3px 0 14px; color:var(--ink);font-variant-numeric:tabular-nums} .keynums dd:last-child{margin-bottom:0} .art__foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:30px 0 0; padding-top:18px;border-top:1px solid var(--hair-lo)} .tag{font-family:var(--disp);font-weight:600;font-size:13px;background:var(--surf-2); border:1px solid var(--hair);padding:11px 16px;color:var(--ink-2);display:inline-block} .tag:hover{background:var(--copper);border-color:var(--copper);color:var(--deep)} .rel{margin-top:42px} .rel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px} .rel__i .ph{aspect-ratio:16/10;margin-bottom:11px} .rel__i .ph img{width:100%;height:100%;object-fit:cover} .rel__i h3{font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.3;margin:7px 0 0; letter-spacing:-.008em;overflow-wrap:break-word} .rel__i h3 a{display:block;min-height:44px} .rel__i h3 a:hover{color:var(--accent)} /* ---------- imageKind: title-card (consumer-guide rev 2, §4) ---------- Wire artwork is a 1200x630 title card with the headline, brand, ticker and date drawn INTO the image, so no crop is safe: usanewsgroup put one in a 230x153 (1.503) box with object-fit:cover, the 1.905 card scaled to 291px inside 230px, and 21% of the width — ~13% off each edge — was cut, rendering "ENERGY METAL NEWS" as "RGY METAL NEWS". THE CONTAINER is forced to 1200/630, not just the img. Every listing context sets its own aspect on the BOX (.card__ph 16/10, .list__i .ph 240/160 and 4/3 under 680px, .rel__i .ph 16/10) with two-class specificity, so an img-only override cannot fix the crop — the box is still the wrong shape. With the box at the art's native ratio nothing is cropped and cover/contain are equivalent; contain is used anyway so a card that is ever off-ratio letterboxes on the dark surface rather than losing words. !important is belt-and-braces: these compound selectors already out-specify each context's own rule, but this must not silently regress if a context rule is later made more specific. Never overlay text on a title card — .brief__ph's scrim is cancelled below for that reason. Category listings are the case that actually broke elsewhere: they render through listItem(), so `.list__i .ph.tcard` is the load-bearing selector here, including in the 4/3 mobile block. Today none of this is reached by real traffic: EMN renders wire art image-less (wire.mjs useImg, per Chris's CNG ruling — the cards carry another brand's masthead) and build.mjs's tcard() only fires when a row actually has artwork. It must still be correct, because the articles feed can ship title-card art at any time and the switch may be re-flipped. */ .card__ph.tcard, .brief__ph.tcard, .list__i .ph.tcard, .rel__i .ph.tcard, .art__fig .ph.tcard, .ph.tcard{aspect-ratio:1200/630 !important;background:var(--surf-2);overflow:hidden} .card__ph.tcard img, .brief__ph.tcard img, .list__i .ph.tcard img, .rel__i .ph.tcard img, .art__fig .ph.tcard img, .ph.tcard img{object-fit:contain !important;width:100%;height:100%;aspect-ratio:auto} /* .brief__ph is the one absolutely-positioned box: its min-height:100% stretches to the hero column and would override the ratio, and its ::after gradient is a text scrim over artwork that already contains its own text. Wire is barred from the hero by the hero rule, so this only ever applies to a title-card ARTICLE — but it has to be right when it does. */ .brief__ph.tcard{min-height:0;position:relative} .brief__ph.tcard img{position:absolute;inset:0} .brief__ph.tcard::after{content:none} /* ---------- footer ---------- */ .foot{background:var(--deep);color:var(--ink-2);margin-top:52px;border-top:1px solid var(--hair-lo)} .foot .wrap{padding:38px var(--gut) 44px} .foot__in{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:34px} .foot .wordmark{font-size:15px} /* the footer logo wants a 14px gap under its ink; the tap-target rule above already puts 15px of padding there, so the margin trims one pixel instead of adding a second gap. Keep this in the stylesheet — an inline style="margin-bottom" on the markup would win per-longhand over the tap-target rule's cancelling margin and reopen the 15px shift this replaced. */ .foot .logo{display:inline-flex;margin-bottom:-1px} .foot__ab{font-size:14.5px;line-height:1.55;margin:16px 0;max-width:38ch;color:var(--mut)} .foot h4{font-family:var(--disp);font-weight:800;font-stretch:106%;font-size:11px; letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:6px 0 8px} .foot ul{list-style:none;margin:0;padding:0} .foot li{margin:0} .foot a{font-family:var(--disp);font-size:13.5px;font-weight:600} /* 44px tap targets: pad the anchor, not the li (WCAG 2.5.8) */ .foot ul a{display:inline-block;padding:12px 0;min-height:44px} .foot nav a:hover,.foot ul a:hover{color:var(--ink)} .foot .email{color:var(--accent)} .foot__disclaim{font-size:12.5px;line-height:1.6;color:var(--mut);border-top:1px solid var(--hair-lo); margin:30px 0 0;padding-top:20px;max-width:110ch} .foot__legal{font-family:var(--mono);font-size:11px;color:var(--mut);margin-top:14px} /* ---------- responsive ---------- */ @media (max-width:1100px){ .top,.page{grid-template-columns:minmax(0,1fr);gap:36px} .subhero{grid-template-columns:repeat(3,minmax(0,1fr))} .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} .mr{grid-template-columns:minmax(0,1fr)} .foot__in{grid-template-columns:repeat(2,minmax(0,1fr))} .yearlist{grid-template-columns:repeat(2,minmax(0,1fr))} } .mnav .m-only{display:none} .navtoggle{display:none} .hamb{display:none} @media (max-width:680px){ .subhero,.grid3,.grid4,.pf,.rel__grid{grid-template-columns:minmax(0,1fr)} .grid3,.grid4,.subhero{gap:24px} /* masthead: logo + hamburger; the nav opens as a dropdown panel */ /* the row gap has to clear the logo's 7px hit-box protrusion, or the invisible tap areas of the logo and of whatever wraps below it (the open nav, or the hamburger at ~320px) intersect */ .masthead__in{flex-wrap:wrap;gap:16px;padding-top:11px;padding-bottom:11px} .msearch{display:none} .wordmark{font-size:14px;letter-spacing:.16em} .mark{width:30px;height:30px;font-size:13px} /* the masthead wraps here and the open nav sits one short row-gap below, so trim the logo's invisible hit box to exactly 44px (30px mark + 2x7) instead of the desktop 64px */ .logo{padding:7px 0;margin:-7px 0} .hamb{display:block;margin-left:auto;padding:11px 6px;cursor:pointer} .hamb i{display:block;width:21px;height:2px;background:var(--ink);margin:4px 0} @media (prefers-reduced-motion: no-preference){ .hamb i{transition:transform .18s ease,opacity .18s ease} } .navtoggle:checked ~ .hamb i:nth-child(1){transform:translateY(6px) rotate(45deg)} .navtoggle:checked ~ .hamb i:nth-child(2){opacity:0} .navtoggle:checked ~ .hamb i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .mnav{display:none;flex:1 1 100%;order:4;flex-direction:column;gap:0; margin:0;padding:0 0 4px;overflow:visible} .navtoggle:checked ~ .mnav{display:flex} .mnav a{padding:13px 2px;font-size:15px;border-top:1px solid var(--hair-lo)} .mnav a::after{display:none} .mnav .m-only{display:block} .brief{grid-template-columns:minmax(0,1fr);min-height:0} .brief__ph{min-height:200px;order:-1;position:relative} .brief__ph img{position:absolute} .brief__ph::after{background:linear-gradient(0deg,var(--surf) 0,rgba(29,32,36,0) 34%)} .brief__txt{padding:18px 18px 22px} .brief h1{font-size:26px;letter-spacing:-.018em} .brief__sum,.lead__sum{font-size:15px;margin-top:10px} .top{padding-top:18px;gap:32px} .band{padding:28px 0 6px} .sect h2,.sect h1,.shead h1,.shead h2{font-size:13.5px;letter-spacing:.13em} .hub-h1{font-size:24px !important} .art__h1{font-size:28px} .art__standfirst{font-size:17px} .prose{font-size:17px} .prose h2{font-size:21px} .pull p{font-size:19px} .list__i{grid-template-columns:104px minmax(0,1fr);gap:14px;padding:16px 0} .list__i .ph{aspect-ratio:4/3} .list__t{font-size:17px} .list__m::after{display:none} .s-snip{display:none} .mr li::before{font-size:16px;min-width:26px} .foot__in,.yearlist{grid-template-columns:minmax(0,1fr)} .foot .wrap{padding-top:28px} .rel{margin-top:32px} } .mtime{font-family:var(--mono);font-size:11px;color:var(--mut);flex:0 0 auto;letter-spacing:.08em} .railhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .railhead .colhead{margin-bottom:14px} /* signup confirmation dialog — replaces the trip to Mailchimp's own page in a new tab */ .mcm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px; background:rgba(16,18,21,.62)} .mcm[hidden]{display:none} .mcm__box{position:relative;background:var(--surf-2);max-width:420px;width:100%;padding:30px 30px 26px; border-top:3px solid var(--accent);box-shadow:0 18px 50px rgba(16,18,21,.35)} .mcm[data-state="err"] .mcm__box{border-top-color:var(--down)} .mcm[data-state="wait"] .mcm__box{border-top-color:var(--mut)} .mcm__t{font-family:var(--disp);font-weight:700;font-size:19px;margin:0 0 8px;color:var(--ink)} .mcm__msg{font-size:15.5px;line-height:1.5;color:var(--mut);margin:0} .mcm__x{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;background:none; font-family:var(--disp);font-size:24px;line-height:1;color:var(--mut);cursor:pointer} .mcm__x:hover{color:var(--ink)} @media (prefers-reduced-motion: no-preference){ .mcm__box{animation:mcmin .18s ease-out} @keyframes mcmin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} } /* --- Fly On Wall Street additions ---------------------------------------- */ /* Wordmark: pure type, no icon. "Wall Street" carries the amber. */ .wordmark em{font-style:normal;color:var(--accent)} /* Headline pure white; standfirst takes the colour the headline used to be. */ .art__h1{color:#fff} .art__standfirst{color:#ECE7DC} /* --- RAIL widgets (Market Overview) — LIGHT, per Chris 2026-08-14 ----------- Scoped to the rail. It must NOT reach the article quote box below, which is deliberately dark: a dark widget on a light wrapper is unreadable. */ .mkt__panel .tradingview-widget-container, .tick .tradingview-widget-container{ background:#DEE1E5; border:1px solid var(--hair); border-radius:3px; padding:6px; overflow:hidden; } .mkt__panel .tradingview-widget-copyright, .tick .tv-copy{ background:#DEE1E5; color:#5C6668; font-size:11px; text-align:center; padding:4px 0 2px; } .mkt__panel .tradingview-widget-copyright a, .tick .tv-copy a{color:#5C6668} /* --- ARTICLE quote box (symbol-info) — DARK ------------------------------- The widget runs colorTheme:"dark" with isTransparent:true, so it paints no background of its own and inherits whatever is behind it. THE WRAPPER MUST SUPPLY THE DARK CANVAS — dark + transparent over a light wrapper renders pale grey text on near-white: valid HTML, correct symbol, widget loads, and is simply unreadable. Only a screenshot catches that. */ .tv{ background:#131722; border:1px solid #2A2E39; border-radius:6px; margin:0 0 26px; padding:6px 8px 0; overflow:hidden; } .tv .tradingview-widget-container{background:transparent;border:0;padding:0} .tv .tv-copy{ background:transparent; font-family:var(--mono); font-size:9.5px; color:#8B94A3; padding:4px 12px 8px; text-align:left; } .tv .tv-copy a{color:#A9B2C0} /* Newsletter inputs. The base stylesheet sets background/colour for ".sub input, .sub__f input" but its ::placeholder rule covers ".sub input" ONLY — so in .sub__f (what this build emits) the placeholder fell back to the browser default: dark grey on a dark field, i.e. invisible. */ .sub input::placeholder, .sub__f input::placeholder, .mc-form input::placeholder{color:var(--mut);opacity:1} .sub__f input, .mc-form input{background:var(--surf-2);color:var(--ink);border:1px solid var(--hair)} .sub__f input:focus, .mc-form input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)} /* Title-card geometry (consumer-guide §4). Wire art is 1200x630 with the headline drawn INTO the image: its own ratio, never a photo thumbnail's box, or the sides get sliced. Never overlay text on one. ⚠ This build emits .ph--tc (a BEM modifier), not .ph.tc — an earlier rule targeted .ph.tc and therefore never matched anything, so the cards were silently rendering at the photo ratio. Both spellings are covered. */ .ph--tc, .ph.tc, .card__ph--tc, .brief__ph--tc, .rel__art--card{ aspect-ratio:1200/630 !important; background:#0d1526; overflow:hidden; } .ph--tc>img, .ph.tc>img, .card__ph--tc>img, .brief__ph--tc>img, .rel__art--card>img{ width:100%; height:100%; object-fit:cover; } /* Disclosure furniture — editor note, origin line, and the issuer's legal tail (forward-looking statements, compensation, legal notices) which build.mjs wraps in .spon-note. Small and light grey throughout. The descendant selector is load-bearing: the tail is full of , and , and without it those children keep the body size and colour and the block reads as a patchwork. */ .spon-note, .editor-note, .origin, .paid-disclosure, .spon-note *, .editor-note *, .origin *, .paid-disclosure *{ font-family:var(--mono) !important; font-size:11px !important; line-height:1.6 !important; font-weight:400 !important; color:#9AA0AA !important; max-width:78ch; } .spon-note a, .editor-note a, .origin a, .paid-disclosure a{ color:#B4BAC4 !important; text-decoration:underline; } .spon-note p, .editor-note p, .origin p, .paid-disclosure p{margin:0 0 10px} /* The prose rules are more specific than the plain class selectors, hence the !important above — this is the one place in the sheet that needs it. */ .prose h2{max-width:none} /* Single-quote widget sits in the article body, above Key Facts (Chris 2026-08-15), not in the rail. Constrained to the prose measure so it reads as part of the article rather than a floating panel. */ .art__quote{max-width:68ch;margin:0 0 26px}