/* ═══════════════════════════════════════════════════════════════
   SUNARIE PUSAKA — LANDING PAGE
   Arah visual: "Field-Proven Precision"
   Charcoal + high-vis orange, kontur topografi, corner bracket,
   tag data monospace. Seluruh angka & spesifikasi berasal dari
   materi perusahaan; tidak ada metrik karangan.
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .log[data-status="live"] .status::before{ animation:none!important; }
  .anchor .ping,.anchor .core{ animation:none!important; }
  .anchor .ping{ display:none; }
  .pin[data-status="live"] .scan{ animation:none!important; stroke-dasharray:none; }
}

:root{
  /* Palet disampel dari Precision_Mineral_Exploration.pdf — lihat docs/style/STYLE.md.
     Ground #242C34, inset #1C2428, aksen #F86800. Kartu LEBIH GELAP dari latar. */
  --bg:#232B33;
  --surface:#1C2429;
  --surface-2:#182025;
  --surface-3:#2C363E;
  --line:#38424A;
  --line-2:#4B5762;
  --num:#6E7C87;
  --txt:#FCFCFC;
  --txt-2:#C8CFD5;
  --dim:#95A0A9;
  --orange:#F86800;
  --orange-br:#FF8422;
  --orange-dk:#B04800;
  --ink:#161D22;
  --plate:#15181A;
  --amber:#D97706;
  --measure:#4FA8C7;

  --lim:#8A3D20;
  --sap:#7A6F35;
  --rock:#3A3D42;
  --soil:#4A4133;

  --shell:clamp(16px,4vw,64px);
  --nav-h:65px; /* tinggi nav sticky; disinkronkan oleh skrip di bawah */
  /* .svc cards paint their own 18px corner notch instead of using .chamfer's
     clip-path — a clip would also cut ::after, and the hover mark has to reach the
     corner. Resting notch is the divider colour (#38424A = --line); the hover mark is one
     solid shape (#F86800): that wedge filled, plus a 2px arm down each edge. */
  --notch-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M0 0 H18 L0 18 Z' fill='%2338424A'/%3E%3C/svg%3E");
  --notch-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M18 18 H0 L18 0 Z' fill='%2338424A'/%3E%3C/svg%3E");
  /* the viewBox is load-bearing: .svc grows these marks with background-size on
     hover, and an SVG without one does not scale its content — the tile crops. */
  --brk-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0 H40 V2 H18.83 L2 18.83 V40 H0 Z' fill='%23F86800'/%3E%3C/svg%3E");
  --brk-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M40 40 H0 V38 H21.17 L38 21.17 V0 H40 Z' fill='%23F86800'/%3E%3C/svg%3E");
  --grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.45' stroke-width='1'%3E%3Cpath d='M56 0 L0 0 L0 56'/%3E%3C/g%3E%3C/svg%3E");
  --topo:url("../images/topo.svg?v=fc118dd2");
}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:Archivo, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings:"wdth" 108,"wght" 700;
  letter-spacing:-.018em; line-height:1.06; margin:0; text-wrap:balance;
}
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--orange-br); outline-offset:3px; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--orange); color:var(--ink); padding:12px 18px; font-family:"JetBrains Mono",monospace; font-size:12px; }
.skip:focus{ left:0; }

/* ── shared atoms ─────────────────────────────────────────── */
.mono{ font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.tag{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-br); display:inline-block;
}
.tag::before{ content:"[ "; opacity:.55; }
.tag::after{ content:" ]"; opacity:.55; }
.num{ font-variant-numeric:tabular-nums; }

.wrap{ max-width:1380px; margin:0 auto; padding-inline:var(--shell); }
.sect{ position:relative; padding-block:clamp(56px,7.5vw,116px); border-top:1px solid var(--line); }
section[id]{ scroll-margin-top:74px; }
.sect-topo{
  position:absolute; inset:0;
  background-image:var(--topo), var(--grid);
  background-size:1400px 900px, 56px 56px;
  background-position:var(--topo-pos,0 0), 0 0;
  opacity:.07;
  pointer-events:none;
}
/* the terrain tile is seamless; offset it per section so it never restamps identically */
.sect:nth-of-type(4n+2) .sect-topo{ --topo-pos:-430px -265px; }
.sect:nth-of-type(4n+3) .sect-topo{ --topo-pos:-870px -520px; }
.sect:nth-of-type(4n)   .sect-topo{ --topo-pos:-195px -690px; }
/* floating coordinate crosshairs — PDF motif, unattached to any box */
.sect::before,.sect::after{
  content:""; position:absolute; width:20px; height:20px; pointer-events:none;
  opacity:.5; z-index:0;
  background:
    linear-gradient(var(--line-2),var(--line-2)) center/1px 100% no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) center/100% 1px no-repeat;
}
.sect::before{ top:36px; left:clamp(6px,1.8vw,28px); }
.sect::after{ bottom:36px; right:clamp(6px,1.8vw,28px); }

/* 15. chamfered corner — the notch reads in the divider colour behind the card */
.chamfer{ clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.sect > .wrap{ position:relative; }

.shead{ display:grid; gap:16px; margin-bottom:clamp(28px,3.6vw,52px); }
.shead h2{ font-size:clamp(28px,4vw,50px); font-variation-settings:"wdth" 110,"wght" 800; max-width:19ch; }
h2 em{ font-style:normal; color:var(--orange); }
.shead p{ color:var(--txt-2); max-width:62ch; font-size:clamp(15px,1.1vw,17px); }

/* corner-bracket frame */
.brk{ position:relative; }
.brk::before,.brk::after{
  content:""; position:absolute; width:16px; height:16px; pointer-events:none;
  border-color:var(--orange); border-style:solid; border-width:0;
}
.brk::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.brk::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"JetBrains Mono", monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500;
  padding:14px 22px; border:1px solid var(--orange); background:var(--orange); color:var(--ink);
  transition:background .16s, border-color .16s, color .16s;
}
.btn:hover{ background:var(--orange-br); border-color:var(--orange-br); }
.btn.ghost{ background:transparent; color:var(--txt); border-color:var(--line-2); }
.btn.ghost:hover{ border-color:var(--txt); background:rgba(255,255,255,.05); }