/* Minaira Resources: shared design tokens, typography, nav, buttons, logo lockup, orbit rings.
   Used by index.html and contact.html. */
/* ---------- reset ---------- */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font-size:14px}
img{max-width:100%}
[hidden]{display:none!important}


/* Layout: matches the MTMS portal. Night-panel hero (charcoal, fine grid, orbit rings, gold) that stays dark in both themes;
   theme-aware editorial sections below; one pinned horizontal run through mining services; dark statement band and footer bracket the page. */
:root{
  /* theme tokens: dark-first */
  --bg:#0B0A0C; --bg-2:#111013; --surface:#151417; --raise:#1C1A1E; --ink:#F2EEE6; --muted:#A39E94; --line:#26232A;
  --gold:#E3C47E; --gold-2:#C9A45C; --gold-soft:rgba(227,196,126,.12);
  --gold-grad:linear-gradient(100deg,#F2DEA8 0%,#D9B468 45%,#A9843F 100%);
  --grid:rgba(255,255,255,.035); --nav-bg:rgba(11,10,12,.66); --shadow:rgba(0,0,0,.5);
  --ok:#7CCB9A; --warn:#E9B45A; --info:#8FB6E0;
  color-scheme:dark;
  /* night panel: same in both themes */
  --n-bg:#09090A; --n-ink:#F1ECE2; --n-muted:#A9A397; --n-dim:rgba(241,236,226,.22); --n-line:rgba(255,255,255,.055);
  --n-gold:#E6C982; --n-gold-grad:linear-gradient(100deg,#F4E0AA 0%,#DDB86C 45%,#AC8742 100%);
  /* gold button: same in both themes */
  --btn-grad:linear-gradient(95deg,#EFD9A0 0%,#D2AE62 50%,#9C7838 100%); --btn-ink:#1B1508;
  /* type */
  --f-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mark:"Fraunces","Iowan Old Style",Georgia,serif;
  --f-body:"Hanken Grotesk",-apple-system,"Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --max:1200px; --ease:cubic-bezier(.2,.7,.1,1);
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#F5F3EE; --bg-2:#EEEBE3; --surface:#FFFFFF; --raise:#FBFAF7; --ink:#18150F; --muted:#6A6458; --line:#E1DBCF;
  --gold:#8E6B27; --gold-2:#B18A42; --gold-soft:rgba(177,138,66,.12);
  --gold-grad:linear-gradient(100deg,#B8903F 0%,#94712B 55%,#7A5A1E 100%);
  --grid:rgba(40,30,10,.05); --nav-bg:rgba(245,243,238,.72); --shadow:rgba(80,60,20,.18);
  --ok:#2F7A4E; --warn:#94620E; --info:#2F5D8E; color-scheme:light}}
:root[data-theme="light"]{
  --bg:#F5F3EE; --bg-2:#EEEBE3; --surface:#FFFFFF; --raise:#FBFAF7; --ink:#18150F; --muted:#6A6458; --line:#E1DBCF;
  --gold:#8E6B27; --gold-2:#B18A42; --gold-soft:rgba(177,138,66,.12);
  --gold-grad:linear-gradient(100deg,#B8903F 0%,#94712B 55%,#7A5A1E 100%);
  --grid:rgba(40,30,10,.05); --nav-bg:rgba(245,243,238,.72); --shadow:rgba(80,60,20,.18);
  --ok:#2F7A4E; --warn:#94620E; --info:#2F5D8E; color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold-2);color:#1B1508}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:500;text-wrap:balance;margin:0;letter-spacing:-.025em}
p{margin:0}
.eyebrow{font-family:var(--f-body);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.h2{font-size:clamp(38px,5.4vw,72px);line-height:1.02}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:58ch}
.g{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* logo lockup (from the portal) */
.lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.lockup svg{width:30px;height:32px;flex:none}
.lockup .wm{display:grid;line-height:1}
.lockup b{font-family:var(--f-mark);font-weight:600;font-size:23px;letter-spacing:.005em;color:var(--gold)}
.lockup small{font-size:8.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:5px;white-space:nowrap}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--nav-bg);backdrop-filter:saturate(1.5) blur(20px);-webkit-backdrop-filter:saturate(1.5) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s,background .4s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:14px}
.nav ul a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav ul a:hover{color:var(--ink)}
.nav-r{display:flex;align-items:center;gap:10px}
.toggle{display:inline-flex;padding:3px;gap:2px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.toggle button{width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s}
.toggle button svg{width:15px;height:15px}
.toggle button.on{background:var(--btn-grad);color:var(--btn-ink)}
@media (max-width:980px){.nav ul{display:none}}
@media (max-width:520px){.nav .portal{display:none}.lockup small{display:none}}

.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--f-body);padding:15px 24px;border-radius:12px;text-decoration:none;border:1px solid transparent;cursor:pointer;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn.gold{background:var(--btn-grad);color:var(--btn-ink);box-shadow:0 10px 30px -12px rgba(201,164,92,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn.gold:hover::after{transform:translateX(120%)}
.btn.line{border-color:var(--line);color:var(--ink);background:transparent}
.btn.line:hover{border-color:var(--gold-2)}
.btn.small{padding:10px 16px;font-size:13px;border-radius:10px}


/* ---------- orbit rings ---------- */
.orbits{position:absolute;z-index:-1;right:-180px;top:50%;width:min(980px,110vw);aspect-ratio:1;transform:translate(calc(var(--mx,0)*-18px),calc(-50% + var(--my,0)*-14px + var(--hp,0)*80px));pointer-events:none;max-width:none}
.orbits circle.ring{fill:none;stroke:rgba(230,201,130,.22);stroke-width:1}
.orbits circle.ring.teal{stroke:rgba(120,160,170,.22)}
.orbits circle.ring.dash{stroke-dasharray:3 6;stroke:rgba(230,201,130,.28)}
.orbits .spin{transform-origin:500px 500px;animation:spin 46s linear infinite}
.orbits .spin.s2{animation-duration:30s;animation-direction:reverse}
.orbits .spin.s3{animation-duration:70s}
.orbits .dot{fill:#E9CB84;filter:drop-shadow(0 0 8px rgba(233,203,132,.9))}
@keyframes spin{to{transform:rotate(360deg)}}