/* Artwork layer: hero cross-section, supply-chain figure, strata rules,
   commodity glyphs and rock grain. All drawn in SVG, none of it fetched. */

/* ---------- page grain ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:multiply;
}
:root[data-theme="dark"] body::before{opacity:.05;mix-blend-mode:screen}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::before{opacity:.05;mix-blend-mode:screen}
}
/* Lift content above the grain. header.site is deliberately left alone:
   it is position:sticky, and setting position:relative here would break it. */
main,footer{position:relative;z-index:1}

/* ---------- strata divider ---------- */
.strata{
  height:16px;width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16' preserveAspectRatio='none' fill='none' stroke='%23808080' stroke-width='1'%3E%3Cpath d='M0 3q40 4 80 2t80-3 80 2' opacity='.55'/%3E%3Cpath d='M0 8q44 3 84 1t76-2 80 3' opacity='.4'/%3E%3Cpath d='M0 13q38 3 78 1t82-2 80 2' opacity='.28'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:240px 16px;
  opacity:.5;margin:0;border:0;
}

/* ---------- hero: text and cross-section side by side ---------- */
.herogrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(20px,4vw,56px);align-items:center}
@media (max-width:900px){ .herogrid{grid-template-columns:1fr;gap:26px} }
.heroart{margin:0;display:flex;flex-direction:column;gap:10px}
.heroart svg{width:100%;max-width:100%;height:auto;display:block}
.heroart figcaption{
  font-family:var(--f-display);font-size:.74rem;letter-spacing:.05em;line-height:1.6;
  color:var(--ink-3);text-align:center;max-width:34ch;margin-inline:auto;
}
@media (max-width:900px){ .heroart{max-width:430px;margin-inline:auto} }

/* ---------- supply-chain figure ---------- */
.chainfig{margin:0}
.chainfig svg{width:100%;height:auto;display:block;color:var(--ink-2);overflow:visible}
.chainfig text{font-family:var(--f-display);font-size:14.5px;fill:var(--ink);text-anchor:middle}
.chainfig .node rect{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.4}
.chainfig .node.hot rect{stroke:var(--copper);stroke-width:2}
.chainfig .node.hot text{fill:var(--copper)}
.chainfig .sub{font-family:var(--f-display);font-size:11.5px;fill:var(--ink-3);letter-spacing:.03em}
.chainfig .rowlab{font-family:var(--f-display);font-size:15px;font-weight:700;fill:var(--ink);text-anchor:start}
.chainfig .zone{font-family:var(--f-display);font-size:11px;letter-spacing:.14em;fill:var(--ink-3);text-anchor:start}
.chainfig .zone.hotlab{fill:var(--copper)}
.chainfig .note{font-family:var(--f-body);font-size:13px;fill:var(--ink-2);text-anchor:start;font-style:italic}
.chainfig .lab{font-family:var(--f-display);font-size:11.5px;letter-spacing:.05em;fill:var(--ink-3)}
.chainfig .lab.warn{fill:var(--copper)}
.chainfig .flow path{stroke:var(--ink-2);stroke-width:1.6;fill:none}
.chainfig .hotflow path{stroke:var(--copper);stroke-width:2;color:var(--copper)}
.chainfig figcaption{
  margin-top:12px;font-family:var(--f-display);font-size:.76rem;letter-spacing:.05em;
  color:var(--ink-3);line-height:1.6;
}
@media (max-width:620px){
  /* Below this width the diagram would shrink to illegibility, so it keeps its
     size and scrolls inside its own box instead. The caption says so, because a
     scrollable figure with no cue is a figure half the readers never finish. */
  .chainfig{overflow-x:auto}
  .chainfig svg{min-width:560px}
  .chainfig figcaption::before{
    content:"Scroll the diagram sideways to follow the whole chain. ";
    font-style:italic;color:var(--copper);
  }
}

/* ---------- commodity glyphs on directory cards ---------- */
.op .glyph{
  width:20px;height:20px;flex:0 0 auto;opacity:.75;
  background-repeat:no-repeat;background-position:center;background-size:20px 20px;
}
.op .top{align-items:center}
.op .idpair{display:flex;align-items:center;gap:9px;min-width:0}
.g-copper{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a6 6 0 1 1 12 0' /%3E%3Cpath d='M10 14v3'/%3E%3Cpath d='M6 17h8'/%3E%3C/svg%3E")}
.g-iron-steel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h12M4 16h12M10 4v12'/%3E%3C/svg%3E")}
.g-aluminum{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-6h8l3 6Z'/%3E%3Cpath d='M6 7h8'/%3E%3C/svg%3E")}
.g-battery-critical-metals{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='11' height='9' rx='1.5'/%3E%3Cpath d='M15 9v3'/%3E%3Cpath d='M7 10.5h4'/%3E%3C/svg%3E")}
.g-zinc-lead-moly{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15h7l1.5-4H5Z'/%3E%3Cpath d='M9 11h7l1.5-4H11Z'/%3E%3C/svg%3E")}
.g-industrial-minerals{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16l4-8 3 5 2.5-3L17 16Z'/%3E%3C/svg%3E")}
.g-uranium{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cellipse cx='10' cy='10' rx='7' ry='3'/%3E%3Cellipse cx='10' cy='10' rx='7' ry='3' transform='rotate(60 10 10)'/%3E%3Cellipse cx='10' cy='10' rx='7' ry='3' transform='rotate(120 10 10)'/%3E%3C/svg%3E")}
.g-precious-metals{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3l6 4-6 10-6-10Z'/%3E%3Cpath d='M4 7h12M10 3 7 7l3 10 3-10Z'/%3E%3C/svg%3E")}

/* ---------- era glyphs on the history timeline ---------- */
.era .glyph{
  position:absolute;left:-14px;top:2px;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--paper);border:1px solid var(--rule-strong);color:var(--copper);
}
.era.turn .glyph{border-color:var(--copper);background:var(--surface-2)}
.era .glyph svg{width:17px;height:17px}
.era::before{display:none}
.era{padding-left:clamp(30px,4.4vw,52px)}
@media (max-width:560px){
  .era .glyph{left:-13px;width:26px;height:26px}
  .era .glyph svg{width:15px;height:15px}
}

/* ---------- section breaks read as bedding planes in rock ---------- */
section{position:relative}
section:not(:last-of-type)::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:16px;
  pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16' preserveAspectRatio='none' fill='none' stroke='%23808080' stroke-width='1'%3E%3Cpath d='M0 3q40 4 80 2t80-3 80 2' opacity='.55'/%3E%3Cpath d='M0 8q44 3 84 1t76-2 80 3' opacity='.4'/%3E%3Cpath d='M0 13q38 3 78 1t82-2 80 2' opacity='.28'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:240px 16px;
}
.masthead{position:relative}
.masthead::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:16px;
  pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16' preserveAspectRatio='none' fill='none' stroke='%23808080' stroke-width='1'%3E%3Cpath d='M0 3q40 4 80 2t80-3 80 2' opacity='.55'/%3E%3Cpath d='M0 8q44 3 84 1t76-2 80 3' opacity='.4'/%3E%3Cpath d='M0 13q38 3 78 1t82-2 80 2' opacity='.28'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:240px 16px;
}