/* Rare Earth GIS — rareearthgis.com
   A port of the brand kit's homepage design (`Rare Earth GIS Homepage.dc.html`)
   from its Design-Component format to plain HTML/CSS/JS. Layout, type scale,
   spacing, colour and interaction are the kit's; the inline `style=` /
   `style-hover=` / `style-focus=` attributes are lifted into real rules here so
   the page runs without the DC runtime or React.
   Content is NOT the kit's — see index.html and README.md. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&family=Cinzel:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ---------------------------------------------------------------- tokens
   The kit's homepage declares its own short aliases rather than importing
   brand/tokens.css. Kept verbatim so the design matches pixel for pixel. */
:root {
  --ink:   #090910;
  --ink800:#17171E;
  --ink700:#26262D;
  --ink500:#57575F;
  --ink300:#92939C;
  --bone:  #F5F3EE;
  --g300:  #FDE000;
  --g500:  #F1A900;   /* Gold 500 — primary on dark */
  --g600:  #D17E00;
  --g700:  #A75A00;
  --signal:#4FD7D1;   /* data layers only, never a CTA */
  --warn:  #D4614E;
  --line:  rgba(241,169,0,0.22);
  --lineN: #26262D;
  --hdr:   64px;
  --maph:  46svh;   /* pinned map band on stacked (narrow) layouts */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: Archivo, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--g500); text-decoration: none; }
a:hover { color: var(--bone); }
::selection { background: var(--g500); color: var(--ink); }
:focus-visible { outline: 2px solid var(--g500); outline-offset: 2px; }
input { font-family: inherit; font-size: 16px; }  /* 16px: stops iOS auto-zoom */
img { max-width: 100%; }

.mono, .num, .eyebrow, .pill-tag, .src, .readout, .chip-beta,
.stat-l, .cov-k, .foot-m, .scroll-hint {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--g500); color: var(--ink); padding: 14px 20px;
  font: 600 11px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.skip:focus { left: 0; color: var(--ink); }

/* ---------------------------------------------------------------- header */

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 80; height: var(--hdr);
  border-bottom: 1px solid var(--line);
  background: rgba(9, 9, 16, 0.88);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.hdr-in {
  height: 100%; padding: 0 clamp(16px, 2.4vw, 30px);
  display: flex; align-items: center; gap: 22px;
}
.lockup { display: flex; align-items: center; gap: 12px; color: var(--bone); flex: none; }
.lockup img { align-self: center; height: 26px; width: auto; display: block; flex: none; }
.lockup span {
  font-family: Cinzel, Georgia, serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.17em; text-transform: uppercase; white-space: nowrap;
}
.lockup i { color: var(--g500); font-style: normal; }

.chip-beta {
  font: 500 9px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink300);
  border: 1px solid var(--lineN); padding: 6px 9px; flex: none;
}

.hdr-r { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.readout {
  font: 400 9.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink300);
  white-space: nowrap;
}
@media (max-width: 720px) { .readout { display: none; } }

/* At phone widths the lockup + beta chip + CTA overrun the bar and clip the
   button. The mark and the CTA are the two that have to survive. */
@media (max-width: 560px) {
  .hdr-in { gap: 12px; }
  .chip-beta { display: none; }
  .lockup span { font-size: 11px; letter-spacing: 0.12em; }
  .hdr .btn { padding: 12px 14px; font-size: 9.5px; letter-spacing: 0.12em; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  font: 600 10.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink); background: var(--g500);
  padding: 12px 18px; min-height: 44px;
  display: inline-flex; align-items: center; white-space: nowrap;
  border: 0; cursor: pointer;
}
.btn:hover { color: var(--ink); background: var(--g600); }
.btn-lg { font-size: 11px; letter-spacing: 0.16em; padding: 17px 26px; }
.btn-ghost { color: var(--bone); background: transparent; border: 1px solid var(--line); }
.btn-ghost:hover { color: var(--bone); background: transparent; border-color: var(--g500); }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

/* ---------------------------------------------------------------- layout
   row-reverse so the map is the visual right-hand column while the scrolling
   story stays first in source order for keyboard and screen-reader users. */

.split {
  display: flex; flex-wrap: wrap; flex-direction: row-reverse;
  align-items: flex-start; padding-top: var(--hdr);
}

/* The map is pinned and the story scrolls past it, so it must be opaque and
   above the story — otherwise the text renders straight through the map. */
.mapcol {
  flex: 1 1 100%; min-width: 300px;
  position: sticky; top: var(--hdr); height: var(--maph); align-self: flex-start;
  border-left: 1px solid var(--lineN); border-bottom: 1px solid var(--lineN);
  overflow: hidden; display: flex;
  background: var(--ink); z-index: 5;
}
.mapwrap { flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; position: relative; }
.mapwrap parcel-atlas { display: block; width: 100%; height: 100%; }

.storycol { flex: 1 1 100%; min-width: 300px; max-width: 760px; }

/* Under 900px the map stacks above the story and stays pinned, so each step
   pads its content clear of the map band and centres in what is left visible.
   Above 900px the map is a side column and no offset is needed. */
@media (min-width: 900px) {
  .mapcol   { flex-basis: 58%; height: calc(100svh - var(--hdr)); }
  .storycol { flex-basis: 42%; }
}

/* ---------------------------------------------------------------- panel */

.panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; flex-direction: column;
  background: rgba(9, 9, 16, 0.93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); overflow: hidden;
  max-height: 62%;
}
@media (max-width: 659px) { .panel { display: none; } }

.panel-tabs {
  display: flex; align-items: center; flex: none;
  border-bottom: 1px solid var(--lineN); padding-right: 14px;
}
.ptab {
  flex: 0 0 auto; min-width: 92px; min-height: 44px; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 12px 8px;
  font: 600 9px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink300);
}
.ptab.is-on { color: var(--g500); border-bottom-color: var(--g500); }

.pmode {
  margin-left: auto;
  font: 500 9px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink300);
}
.pmode.is-manual { color: var(--g500); }
.presume {
  margin-left: 12px; min-height: 44px; cursor: pointer;
  background: transparent; border: 0; padding: 0;
  font: 600 9px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--g500);
}

.panel-body { flex: 1; min-height: 0; overflow-y: auto; }

.pillars {
  padding: 10px 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 2px 20px; align-items: center;
}
.pillar {
  width: 100%; min-height: 44px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0; background: transparent; border: 0; text-align: left;
  cursor: default; color: inherit;
}
.pillar.is-live { cursor: pointer; }

.sw {
  width: 34px; height: 18px; flex: none; padding: 2px;
  border: 1px solid var(--ink300); background: transparent;
  display: flex; justify-content: flex-start; align-items: center;
}
.sw i { width: 12px; height: 12px; display: block; background: var(--ink300); }
.pillar.is-on .sw { border-color: var(--g500); background: var(--g500); justify-content: flex-end; }
.pillar.is-on .sw i { background: var(--ink); }

.p-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.p-top { display: flex; align-items: baseline; gap: 7px; }
.p-lab {
  font: 600 9px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink300);
}
.pillar.is-active .p-lab, .pillar.is-active .p-w { color: var(--g500); }
.p-w {
  margin-left: auto;
  font: 400 9px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.1em; color: var(--ink300);
}
.p-tag {
  font: 500 9px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink300); flex: none;
}
.p-tag.is-warn { color: var(--warn); }
.p-name {
  display: block; font: 400 11px/1.3 Archivo, sans-serif;
  color: var(--ink300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pillar.is-on .p-name { color: var(--bone); }

/* score view */
.score-grid {
  padding: 12px 14px;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 24px; align-items: start;
}
.score-name { font-size: 14px; font-weight: 700; letter-spacing: -0.018em; }
.score-sub {
  margin-top: 4px;
  font: 400 9px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink300);
}
.score-num { margin-top: 14px; display: flex; align-items: flex-end; gap: 10px; }
.score-val { font-weight: 800; font-size: 38px; line-height: 0.9; letter-spacing: -0.04em; }
.score-val span { color: var(--ink500); font-size: 0.62em; }
.score-lab {
  font: 500 9px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--g500); padding-bottom: 4px;
}
.score-note {
  margin: 12px 0 0; max-width: 26ch;
  font: 400 9px/1.6 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.06em; color: var(--ink300);
}
.score-bars { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.bar-h {
  display: flex;
  font: 400 9px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink300);
}
.bar-h .w { margin-left: 5px; }
.bar-h .v { margin-left: auto; color: var(--g500); }
.bar-t { margin-top: 4px; height: 3px; background: var(--ink700); }
.bar-t i { display: block; height: 100%; background: var(--g500); }
.bar.is-off .bar-h .v { color: var(--warn); }
.bar.is-off .bar-t { background: repeating-linear-gradient(90deg, var(--ink700) 0 4px, transparent 4px 8px); }

/* ---------------------------------------------------------------- steps */

.step {
  min-height: 88svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vh, 80px) clamp(22px, 3.6vw, 58px);
  border-top: 1px solid var(--lineN);
  scroll-margin-top: var(--hdr);
}
.step-hero { min-height: calc(100svh - var(--hdr)); padding-block: clamp(40px, 7vh, 90px); border-top: 0; }
.step[data-step="8"], .step[data-step="10"] { min-height: 92svh; }

.eyebrow {
  display: flex; align-items: center; gap: 11px; margin: 0 0 24px;
  font: 500 10.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--g500);
}
.dia { width: 7px; height: 7px; background: var(--g500); transform: rotate(45deg); display: block; flex: none; }

h1 {
  margin: 0; max-width: 17ch; font-weight: 800;
  font-size: clamp(34px, 3.9vw, 76px); line-height: 0.94;
  letter-spacing: -0.038em; text-wrap: balance;
}
h2 {
  margin: 20px 0 0; max-width: 22ch; font-weight: 800;
  font-size: clamp(26px, 3vw, 46px); line-height: 1;
  letter-spacing: -0.034em; text-wrap: balance;
}
.step[data-step="8"] h2, .step[data-step="10"] h2 {
  max-width: 20ch; font-size: clamp(28px, 3.5vw, 56px); line-height: 0.97; letter-spacing: -0.037em;
}
h1 em, h2 em { font-style: italic; color: var(--g500); }

.lede {
  margin: 28px 0 0; max-width: 46ch;
  font-size: clamp(15px, 1.05vw, 18px); line-height: 1.58;
  color: var(--ink300); text-wrap: pretty;
}
.body {
  margin: 22px 0 0; max-width: 48ch;
  font-size: clamp(14.5px, 1vw, 17px); line-height: 1.6;
  color: var(--ink300); text-wrap: pretty;
}
.body strong { color: var(--bone); font-weight: 600; }
.body em { font-style: italic; color: var(--g500); }

.src {
  margin: 24px 0 0; max-width: 48ch;
  font: 400 10.5px/1.7 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em; color: var(--ink300);
}
.src-warn { color: var(--warn); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.scroll-hint {
  margin-top: 52px; display: flex; align-items: center; gap: 12px;
  font: 400 9.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink300);
}
.scroll-hint .rule { width: 22px; height: 1px; background: var(--ink300); display: block; }

.num {
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.22em; color: var(--g500);
}
.pill-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pill-tag {
  font: 500 9.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink300);
}

.chips { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 9.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink300);
  border: 1px solid var(--lineN); padding: 10px 12px;
}
.chip b { width: 7px; height: 7px; border-radius: 50%; display: block; flex: none; }
.chip u { text-decoration: none; color: var(--bone); }

.stat-row {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--lineN);
  display: flex; flex-wrap: wrap; gap: 26px;
}
.stat-n { font-weight: 800; font-size: 30px; letter-spacing: -0.035em; line-height: 1; }
.stat-n span { color: var(--g500); font-size: 0.45em; }
.stat-l {
  margin-top: 8px;
  font: 500 9px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink300);
}

.cov { margin-top: 30px; display: flex; flex-direction: column; gap: 1px; }
.cov-row { outline: 1px solid var(--lineN); padding: 16px 16px 18px; }
.cov-k {
  font: 600 9px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink300);
}
.cov-row.is-on .cov-k { color: var(--g500); }
.cov-row.is-off .cov-k { color: var(--warn); }
.cov-row p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink300); }

/* ---------------------------------------------------------------- form */

#access-form { margin-top: 32px; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
#access-form label { display: block; }
#access-form label span {
  display: block;
  font: 500 9.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink300);
}
#access-form input {
  width: 100%; min-height: 48px; margin-top: 11px; padding: 13px 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--bone); outline: none;
}
#access-form input:focus { border-bottom-color: var(--g500); }
#access-form input[aria-invalid="true"] { border-bottom-color: var(--warn); }
#access-form button { align-self: flex-start; margin-top: 4px; }

.msg {
  margin: 0;
  font: 400 10.5px/1.6 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em; color: var(--ink300); min-height: 1em;
}
.msg[data-state="error"] { color: var(--warn); }

.sent { margin-top: 32px; max-width: 420px; border: 1px solid var(--g500); padding: 26px 24px; }
.sent-k {
  display: flex; align-items: center; gap: 10px;
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--g500);
}
.sent-k .dia { width: 8px; height: 8px; }
.sent p { margin: 15px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink300); }

/* ---------------------------------------------------------------- footer */

.foot {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--lineN);
  display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center;
}
.foot-lock { display: flex; align-items: center; gap: 11px; }
.foot-lock img { align-self: center; height: 20px; width: auto; display: block; flex: none; }
.foot-lock span {
  font-family: Cinzel, Georgia, serif; font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.foot-m {
  font: 400 9px/1.6 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink300);
}
.foot-r { margin-left: auto; }
.foot-attr { flex-basis: 100%; letter-spacing: 0.1em; text-transform: none; }

/* ------------------------------------------------------- stacked layout
   Must come after the .step rules: the base `.step { padding: ... }`
   shorthand has equal specificity and would otherwise reset padding-top. */
@media (max-width: 899px) {
  /* Content starts just below the pinned map rather than centring in a box
     whose top half the map covers — centring there hides the heading. */
  .step, .step-hero {
    min-height: calc(100svh - var(--hdr));
    justify-content: flex-start;
    padding-top: calc(var(--maph) + 28px);
  }
  .scroll-hint { margin-top: 32px; }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}