:root{
  color-scheme: light;
  /* limestone, basalt ink, and the three mineral pigments: hematite, quartz, azurite */
  --ground:#ECEDE8; --paper:#F7F7F3; --ink:#18212B; --muted:#56616C; --line:#CBCEC6;
  --hematite:#A33A24; --azurite:#2A5698; --pyrite:#A9862A;
  --s0:#D9CDB4; --s1:#BCA88A; --s2:#8E9A86; --s3:#B0623F; --s4:#6A7580; --s5:#8B819B; --s6:#4A5663; --s7:#394552;
  --display:"Big Shoulders Display","Oswald","Arial Narrow",sans-serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#101317; --paper:#171B20; --ink:#E7E8E2; --muted:#98A1AA; --line:#2B3139;
    --hematite:#D86A50; --azurite:#7FA3DE; --pyrite:#D1AE52;
    --s0:#5B5345; --s1:#4E4536; --s2:#3E4A40; --s3:#7A3F29; --s4:#343C45; --s5:#433D50; --s6:#262D35; --s7:#1D232A;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#101317; --paper:#171B20; --ink:#E7E8E2; --muted:#98A1AA; --line:#2B3139;
  --hematite:#D86A50; --azurite:#7FA3DE; --pyrite:#D1AE52;
  --s0:#5B5345; --s1:#4E4536; --s2:#3E4A40; --s3:#7A3F29; --s4:#343C45; --s5:#433D50; --s6:#262D35; --s7:#1D232A;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--azurite);outline-offset:3px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:.95;text-wrap:balance;margin:0;letter-spacing:.005em}
h2{font-size:clamp(40px,6vw,72px);text-transform:uppercase}
p{margin:0}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.mark{display:flex;flex-wrap:wrap;align-items:baseline;gap:0;min-width:0;text-decoration:none;font-family:var(--display);font-weight:900;font-size:clamp(20px,5.4vw,26px);letter-spacing:.04em;text-transform:uppercase;line-height:1}
.mark .dot{color:var(--hematite)}
.mark .tld{font-weight:500;color:var(--hematite);margin-left:.28em}
.nav{display:flex;gap:clamp(14px,2.4vw,28px);flex-wrap:wrap}
.nav a{text-decoration:none;font-size:15px;font-weight:500;color:var(--muted)}
.nav a:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,7vw,88px) 28px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.hero h1{font-size:clamp(50px,9vw,132px);overflow-wrap:break-word;text-transform:uppercase;font-weight:900;line-height:.86}
.hero h1 .red{color:var(--hematite)}
.hero h1 .blue{color:var(--azurite)}
.hero-side{display:grid;gap:22px;padding-bottom:8px}
.hero-side p.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5;max-width:34ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;font:600 15px/1 var(--body);text-decoration:none;border:1.5px solid var(--ink);border-radius:2px;cursor:pointer;background:transparent;color:var(--ink);transition:background .15s,color .15s}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--hematite);border-color:var(--hematite)}

/* ---------- cross-section ---------- */
.section-fig{margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.section-fig .canvas-box{position:relative;height:clamp(300px,38vw,470px)}
.section-fig canvas{display:block;width:100%;height:100%}
.section-fig figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:12px;color:var(--muted)}

/* ---------- elements ---------- */
.block{padding-block:clamp(64px,9vw,120px)}
.block-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:44px}
.block-head p{max-width:52ch;color:var(--muted)}
.elements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1.5px solid var(--ink);border-left:1px solid var(--line)}
.el{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 22px 22px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:6px;background:var(--paper)}
.el-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.el-sym{font-family:var(--display);font-weight:900;font-size:96px;line-height:.9;letter-spacing:-.01em}
.el-name{font-weight:600;font-size:18px}
.el-use{color:var(--muted);font-size:15px;line-height:1.45}
.reliance{margin-top:14px;display:grid;gap:6px}
.reliance-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.reliance-row b{color:var(--hematite);font-weight:500}
.bar{height:8px;background:var(--line);position:relative}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--hematite)}
.footnote{margin-top:18px;color:var(--muted);max-width:80ch}

/* ---------- refine band ---------- */
.band{background:var(--ink);color:var(--paper)}
.band .wrap{padding-block:clamp(56px,8vw,104px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.big-num{font-family:var(--display);font-weight:900;font-size:clamp(120px,20vw,260px);line-height:.8;color:var(--pyrite)}
.big-num sup{font-size:.35em;vertical-align:.95em;margin-left:4px}
.band h3{font-size:clamp(32px,4vw,52px);text-transform:uppercase;margin-bottom:18px}
.band p{max-width:56ch;opacity:.82}
.band .mono{opacity:.6;margin-top:18px;display:block}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:step;position:relative}
.step{padding:22px 20px 0 0;border-top:1.5px solid var(--ink);position:relative;display:grid;gap:10px;align-content:start}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em}
.step::after{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;background:var(--ground);border:1.5px solid var(--ink);border-radius:50%}
.step h3{font-size:34px;text-transform:uppercase}
.step p{font-size:15px;color:var(--muted);line-height:1.5}
.step.key::after{background:var(--hematite);border-color:var(--hematite)}
.step.key h3{color:var(--hematite)}

/* ---------- principles ---------- */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.principle{display:grid;gap:12px;align-content:start}
.principle h3{font-size:30px;text-transform:uppercase}
.principle p{color:var(--muted)}
.swatch{width:44px;height:44px;border-radius:50%}

/* ---------- contact ---------- */
.contact{background:var(--paper);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px)}
.contact h2{margin-bottom:22px}
.who{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.who li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding-block:18px;border-bottom:1px solid var(--line);align-items:baseline}
.who strong{font-weight:600;font-size:18px;display:block}
.who span{color:var(--muted);font-size:15px}
.who .mono{color:var(--muted);white-space:nowrap}
.email{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px}
.email code{font-family:var(--mono);font-size:clamp(15px,1.8vw,19px);padding:12px 14px;border:1px solid var(--line);background:var(--ground);user-select:all;overflow-wrap:anywhere}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px;color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero,.block-head,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .elements{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:minmax(0,1fr);gap:0}
  .step{padding:18px 0 24px 28px;border-top:0;border-left:1.5px solid var(--ink)}
  .step::after{top:22px;left:-6px}
  .principles{grid-template-columns:minmax(0,1fr)}
  .band .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:540px){
  .elements{grid-template-columns:minmax(0,1fr)}
  .el-sym{font-size:80px}
  .who li{grid-template-columns:minmax(0,1fr)}
}

/* ---------- linked element tiles ---------- */
a.el{text-decoration:none;color:inherit;transition:background .15s}
a.el:hover{background:var(--ground)}
a.el:hover .el-sym{color:var(--hematite)}

/* ---------- mineral pages ---------- */
.crumbs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-block:18px 0;color:var(--muted)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.m-hero{padding-block:clamp(32px,6vw,72px) clamp(40px,6vw,72px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.tile{width:clamp(180px,22vw,260px);aspect-ratio:1;max-width:100%;border:1.5px solid var(--ink);background:var(--paper);padding:14px 16px;display:grid;grid-template-rows:auto 1fr auto;font-variant-numeric:tabular-nums}
.tile .el-top{font-size:14px}
.tile-sym{font-family:var(--display);font-weight:900;font-size:clamp(96px,12vw,150px);line-height:.85;align-self:center}
.tile-name{font-family:var(--mono);font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.m-hero h1{font-size:clamp(56px,9vw,128px);text-transform:uppercase;font-weight:900;line-height:.86}
.m-hero .lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5;max-width:46ch;margin-top:20px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.fact{padding:18px 18px 20px 0;border-bottom:1px solid var(--line);display:grid;gap:6px;align-content:start}
.fact dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fact dd{margin:0;font-weight:600;font-size:18px;line-height:1.35;font-variant-numeric:tabular-nums}
.facts dl{display:contents}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,6vw,88px)}
.prose{display:grid;gap:18px;max-width:62ch}
.prose p{color:var(--ink)}
.uses{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.uses li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.uses b{font-weight:600}.uses span{color:var(--muted);font-size:15.5px}
.control{display:grid;gap:22px}
.ctl{display:grid;gap:8px}
.ctl-row{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.ctl-row b{font-family:var(--mono);font-weight:500;color:var(--hematite);font-variant-numeric:tabular-nums}
.ctl .bar{height:12px}
.ctl small{color:var(--muted);font-family:var(--mono);font-size:12px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:1.5px solid var(--ink)}
.timeline li{position:relative;padding:0 0 22px 24px;display:grid;gap:4px}
.timeline li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--hematite)}
.timeline time{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.06em}
.districts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1.5px solid var(--ink);border-left:1px solid var(--line)}
.district{padding:18px 20px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);display:grid;gap:6px;align-content:start}
.district h3{font-size:28px;text-transform:uppercase}
.district .mono{color:var(--muted)}
.district p{color:var(--muted);font-size:15.5px;line-height:1.5}
.pager{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1.5px solid var(--ink);border-left:1px solid var(--line)}
.pager a{display:grid;gap:2px;padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;background:var(--paper)}
.pager a b{font-family:var(--display);font-weight:900;font-size:40px;line-height:1}
.pager a span{font-size:13px;color:var(--muted)}
.pager a:hover b,.pager a[aria-current="page"] b{color:var(--hematite)}
.pager a[aria-current="page"]{background:var(--ground)}
.note{color:var(--muted);max-width:80ch}
@media (max-width:900px){
  .m-hero,.two-col{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .districts{grid-template-columns:minmax(0,1fr)}
  .pager{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:540px){
  .uses li{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* ---------- teaser (gates) ---------- */
:root{--malachite:#2E7D4F}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--malachite:#5DBB84}}
:root[data-theme="dark"]{--malachite:#5DBB84}
.hero h1 .gate{color:var(--hematite)}
.dates{display:grid;gap:0;border-top:1.5px solid var(--ink)}
.dates div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding-block:12px;border-bottom:1px solid var(--line);align-items:baseline}
.dates time{font-family:var(--display);font-weight:900;font-size:34px;line-height:1;color:var(--hematite);text-transform:uppercase}
.dates span{font-size:15px;color:var(--muted);line-height:1.4}
.dates b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--ink);grid-column:2}
.gate-fig{margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.gate-fig .chart{padding-block:18px 6px}
.gate-fig svg{display:block;width:100%;height:auto;overflow:visible}
.gate-fig svg text{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.gate-fig figcaption{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding-block:12px;color:var(--muted)}
.key{display:flex;gap:6px 18px;flex-wrap:wrap}
.key span{display:inline-flex;align-items:center;gap:8px}
.key i{display:inline-block;width:22px;border-top:2.5px solid}
.gap-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.gap-list div{padding:14px 14px 0 0;display:grid;gap:2px}
.gap-list b{font-family:var(--display);font-weight:900;font-size:44px;line-height:1;color:var(--pyrite)}
.gap-list span{font-size:14px;opacity:.75}
.ptable{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0;border-top:1.5px solid var(--ink);border-left:1px solid var(--line)}
.pt{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 14px 14px;background:var(--paper);display:grid;gap:4px;text-decoration:none;color:inherit;transition:background .15s}
.pt:hover{background:var(--ground)}
.pt:hover .pt-sym{color:var(--hematite)}
.pt-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pt-sym{font-family:var(--display);font-weight:900;font-size:58px;line-height:.9}
.pt-name{font-weight:600;font-size:15px;line-height:1.25}
.pt-gate{display:grid;gap:4px;margin-top:8px}
.pt-gate .reliance-row b{color:var(--hematite)}
.pt-gate .bar{height:6px}
.pt-gap{font-family:var(--mono);font-size:12px;color:var(--muted)}
.pt-gap b{color:var(--ink);font-weight:500}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps.three .step{padding-right:clamp(16px,3vw,40px)}
.steps.three .step p{font-size:16px}
.stat{font-family:var(--display);font-weight:900;font-size:56px;line-height:1;color:var(--ink)}
@media (max-width:900px){.steps.three{grid-template-columns:minmax(0,1fr)}}
.px-legend{display:flex;gap:8px 22px;flex-wrap:wrap;color:var(--muted);margin-bottom:8px}
.px-legend span{display:inline-flex;align-items:center;gap:8px}
.px-legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
.px-h{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:34px 0 10px;padding-top:14px;border-top:1.5px solid var(--ink)}
#prices svg{display:block;width:100%;height:auto;overflow:visible}
#prices svg text{font-family:var(--mono);font-size:11px;fill:var(--muted)}
#prices svg text.px-name{font-family:var(--body);font-size:14px;fill:var(--ink)}
#prices svg text.px-ratio{font-family:var(--mono);font-size:12.5px;fill:var(--ink)}
.px-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.px-card{padding:12px 14px 6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);min-width:0}
.px-card-hd{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:4px}
.px-card-hd b{font-weight:600;font-size:14.5px}
.px-card-hd .mono{color:var(--muted);font-size:11.5px;white-space:nowrap}
.px-tip{position:fixed;z-index:20;pointer-events:none;background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:8px 10px;font:13px/1.45 var(--body);max-width:320px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.px-tip b{font-family:var(--mono);font-weight:500}

/* ---------- arsenal band ---------- */
.arsenal{background:#0B0D10;color:#E7E8E2}
.arsenal .wrap{padding-block:clamp(64px,9vw,120px);display:grid;gap:28px}
.arsenal .eyebrow{color:#98A1AA}
.ars-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:12px}
.ars-head p{max-width:52ch;color:#B9C0C7}
.ars-fig{margin:0}
.ars-fig img{display:block;width:100%;height:auto;max-width:100%}
.ars-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.ars-note{display:grid;gap:16px}
.ars-note p{max-width:40ch;color:#B9C0C7;font-size:18px}
.ars-note a{color:#D1AE52}
/* ---------- chains ---------- */
.chains{display:grid;gap:18px}
.chain{display:grid;grid-template-columns:150px minmax(0,1fr) 260px;gap:18px;align-items:center;padding:18px 0;border-top:1.5px solid var(--ink)}
.chain-lab{color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.chain-note{color:var(--muted)}
.chain ol{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;align-items:center}
.chain li{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(20px,2.4vw,30px);padding:12px 10px;text-align:center;position:relative}
.chain.cn li{background:var(--hematite);color:var(--paper)}
.chain.cn li+li{border-left:3px solid var(--paper)}
.chain.west li{background:var(--paper);border:1.5px solid var(--ink)}
.chain.west li+li{margin-left:-1.5px}
.chain.west li.gap{background:transparent;border:1.5px dashed var(--muted);color:var(--muted)}
@media (max-width:900px){
  .ars-head,.ars-row{grid-template-columns:minmax(0,1fr)}
  .chain{grid-template-columns:minmax(0,1fr);gap:10px}
  .chain li{font-size:18px;padding:10px 4px}
}