/*
  MONTANA PROPERTY REPORTS — the parent brand.

  This is the umbrella that holds Montana Fire Report, Montana Water Report and
  Montana Build Report. It inherits the family's house style — paper canvas, deep
  ink type, editorial serif display, precise grotesk interface, monospace for
  every number so data reads as data, thin rules instead of heavy cards — and
  states it more fully than any single product can, because it carries no search
  field and no report engine.

  The one rule that defines the parent:

      THE PARENT HAS NO ACCENT OF ITS OWN. IT HOLDS THE THREE.

  Ink, paper, and contour tan for cartographic line-work. Fire's ember, Water's
  aqua and Build's lichen each appear only inside that report's own section. The
  container stays neutral; the reports bring the colour. Break this rule and the
  parent becomes a fourth sibling instead of the thing above them.

  Deliberately NOT (carried forward verbatim from the siblings' stylesheets):
  rustic, Western, cowboy, government-GIS portal. No mountain silhouettes, no
  wood textures, no slab-serif frontier lettering, no gradient SaaS template, no
  stock photography of smiling agents.
*/

/* ===========================================================================
   1. TOKENS
   =========================================================================== */

:root {
  /* Type stacks — family-native */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Parent neutrals. Ink sits between Water's #0B1215 and Build's #0F1311 —
     the family's inks each lean toward their accent; the parent's does not. */
  --ink: #0e1214;
  --ink-700: #1e262a;
  --ink-500: #3f4b50;
  --ink-300: #7c8a90;
  --ink-100: #d9dfe1;

  --paper: #fbfbf9;
  --paper-200: #f2f3f0;
  --paper-300: #e7e9e4;
  --paper-400: #dcdfd8;

  /* Cartographic line-work only. Never interface chrome. */
  --contour: #b08d57;
  --contour-300: #e4d6be;

  /* The three, held. Each is used only within its own section. */
  --ember: #b8410e;
  --ember-100: #fdf3ee;
  --aqua: #0e6e7c;
  --aqua-400: #2a8f9c;
  --aqua-100: #dceef0;
  --lichen: #3e5b4a;
  --lichen-400: #5c7b67;
  --lichen-100: #dfe8e1;

  /* Shared signal palette — identical across all three products */
  --signal-good: #1f7a5c;
  --signal-review: #b4802a;
  --signal-risk: #a6412f;
  --signal-info: #2f5b87;

  /* Measures */
  --content: 1180px;
  --prose: 68ch;
  --gut: clamp(1.25rem, 4vw, 3.5rem);

  /* Motion — one duration scale, one easing. Everything obeys it. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 220ms;
  --t-med: 520ms;
  --t-slow: 900ms;

  /* Set by JS from scroll position. Rest is 0.45, not 0: a closed stack reads
     as one muddy plane, and the whole point must be legible before any scroll.
     Starts low only so the stack glides open once on load. */
  --sep: 0.14;
  /* Separation distance multiplier — reduced on small screens so the opened
     stack still fits its frame. */
  --zmul: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  /* Sticky register bar clearance for anchor jumps */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* ===========================================================================
   2. TYPOGRAPHY PRIMITIVES  (family-native class names, extended)
   =========================================================================== */

.display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.016em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0;
}

.metric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.prose-body {
  max-width: var(--prose);
}
.prose-body p {
  line-height: 1.72;
  color: var(--ink-700);
  margin: 0;
}
.prose-body p + p {
  margin-top: 1.15em;
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

.hairline {
  border: 0;
  border-top: 1px solid var(--paper-300);
  margin: 0;
}

/* ===========================================================================
   3. LAYOUT
   =========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 11vh, 9rem);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.skip:focus {
  left: 0;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===========================================================================
   4. REGISTER BAR  (masthead + the three-segment position indicator)
   =========================================================================== */

.register {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--paper-300);
}

.register-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

/* --- Wordmark: the plural carries the weight --- */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 0.14em;
  text-decoration: none;
  line-height: 1;
}
.wordmark-qual {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-500);
  transition: color var(--t-fast) var(--ease);
}
.wordmark-main {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wordmark:hover .wordmark-qual {
  color: var(--ink);
}

nav.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}

.nav a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-500);
  position: relative;
  padding-block: 0.35rem;
  transition: color var(--t-fast) var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav a:hover,
.nav a[aria-current="true"] {
  color: var(--ink);
}
.nav a:hover::after,
.nav a[aria-current="true"]::after {
  transform: scaleX(1);
}
.nav a .num {
  color: var(--ink-300);
  margin-right: 0.4em;
}

/* Three-segment progress: which stratum the reader is in */
.register-progress {
  display: flex;
  gap: 2px;
  height: 2px;
  background: var(--paper-300);
}
.register-progress span {
  flex: 1;
  background: var(--ink-100);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.register-progress span.on {
  transform: scaleX(1);
}
.register-progress span:nth-child(1).on {
  background: var(--ember);
}
.register-progress span:nth-child(2).on {
  background: var(--aqua);
}
.register-progress span:nth-child(3).on {
  background: var(--lichen);
}

/* ===========================================================================
   5. HERO
   =========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(3rem, 8vh, 6rem);
  padding-bottom: clamp(3rem, 7vh, 5rem);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-coord {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.hero-coord .dot {
  width: 3px;
  height: 3px;
  background: var(--contour);
  border-radius: 50%;
}

h1.hero-title {
  font-size: clamp(2.5rem, 6.4vw, 5.25rem);
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}
h1.hero-title .em {
  font-style: italic;
  font-weight: 300;
}
/* The plural, set as the brand's load-bearing word */
h1.hero-title .plural {
  position: relative;
  display: inline-block;
}
h1.hero-title .plural::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1em;
  height: 1px;
  background: var(--contour);
  transform: scaleX(var(--drawn, 0));
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease) 400ms;
}

/* --- The report index: visible above the fold, answers "what do I do next" --- */
.index {
  margin-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--ink-100);
  list-style: none;
  padding: 0;
}
.index > li {
  margin: 0;
}

.index-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--paper-300);
  text-decoration: none;
  position: relative;
  transition: padding-left var(--t-fast) var(--ease);
}
.index-row::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent, var(--ink));
  transform: scaleY(0);
  transition: transform var(--t-fast) var(--ease);
}
.index-row:hover,
.index-row:focus-visible {
  padding-left: 0.75rem;
}
.index-row:hover::before,
.index-row:focus-visible::before {
  transform: scaleY(1);
}
.index-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}
.index-row:hover .index-num {
  color: var(--accent);
}
.index-name {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.index-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--ink-500);
  letter-spacing: 0;
  margin-top: 0.1rem;
}
.index-go {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-300);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.index-row:hover .index-go {
  color: var(--accent);
  transform: translateX(3px);
}

/* ===========================================================================
   6. THE PLATE STACK  —  one parcel, three strata, separating on scroll
   =========================================================================== */

.stack-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  perspective: 1400px;
  perspective-origin: 50% 42%;
}

.stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(57deg) rotateZ(-38deg);
}

.plate {
  position: absolute;
  inset: 18%;
  transform-style: preserve-3d;
  /* translateZ runs along the plate normal, so the stack opens as strata */
  transform: translateZ(calc(var(--z) * var(--sep) * var(--zmul) * 1px));
  transition: transform var(--t-med) var(--ease);
}

.plate svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plate-label {
  position: absolute;
  /* Anchored off the plate's outer edge, not below it: with the strata this
     close together, anything below one plate lands on the next one down. */
  left: 100%;
  bottom: 44%;
  transform: rotateZ(38deg) rotateX(-57deg) translate(0.75rem, 0);
  transform-origin: left center;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: calc(0.25 + var(--sep) * 0.75);
  transition: opacity var(--t-med) var(--ease);
}
.plate-label .n {
  color: var(--ink-300);
}
.plate-label .where {
  color: var(--ink-500);
}
.plate-label .what {
  color: var(--accent);
}

/* Leader line from plate edge to its label */
.plate-label::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.5em;
  width: 1.1rem;
  height: 1px;
  background: var(--ink-100);
}

/* ===========================================================================
   7. THE LAYERED FRAMEWORK  (around it / on it / beneath it)
   =========================================================================== */

.layers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.strata {
  border-top: 1px solid var(--ink-100);
}

.stratum {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--paper-300);
  padding: clamp(1.1rem, 2.4vh, 1.6rem) 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
  transition: background var(--t-fast) var(--ease);
}
.stratum::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--t-med) var(--ease);
}
.stratum[aria-selected="true"]::before {
  transform: scaleY(1);
}
.stratum-top {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.stratum-where {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.stratum[aria-selected="true"] .stratum-where {
  color: var(--accent);
}
.stratum-what {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.stratum-body {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink-500);
  margin: 0.4rem 0 0;
  max-width: 46ch;
  transition: color var(--t-fast) var(--ease);
}
.stratum[aria-selected="true"] .stratum-body {
  color: var(--ink-700);
}

/* Section-cut figure that responds to the active stratum */
.cut {
  position: relative;
}
.cut svg {
  width: 100%;
  height: auto;
}
.cut [data-band] {
  transition: opacity var(--t-med) var(--ease);
  opacity: 0.42;
}
.cut svg {
  stroke-width: 1.15;
}
.cut[data-active="fire"] [data-band="fire"],
.cut[data-active="build"] [data-band="build"],
.cut[data-active="water"] [data-band="water"] {
  opacity: 1;
}

/* ===========================================================================
   8. REPORT MOMENTS  —  each distinct, all one drafting set
   =========================================================================== */

.report {
  position: relative;
  padding-block: clamp(5rem, 13vh, 10rem);
  border-top: 1px solid var(--paper-300);
}

/* 01 FIRE — paper, ember. The atmosphere around the structure. */
#fire {
  --accent: var(--ember);
  --accent-soft: var(--ember-100);
}

/* 02 WATER — inverted. Below ground is dark; that is the whole point. */
#water {
  --accent: var(--aqua-400);
  --accent-soft: rgba(42, 143, 156, 0.16);
  background: #0b1215;
  color: #eef2f2;
  border-top-color: #0b1215;
}
#water .eyebrow,
#water .stratum-where {
  color: #7c9199;
}
#water .prose-body p,
#water .lede {
  color: #c8d4d6;
}
#water .hairline {
  border-top-color: rgba(238, 242, 242, 0.14);
}
#water .topic {
  border-color: rgba(238, 242, 242, 0.14);
}
#water .topic-name {
  color: #eef2f2;
}
#water .figure-note {
  color: #7c9199;
}
#water .stat-v {
  color: #eef2f2;
}
#water .stat-k {
  color: #7c9199;
}
#water .stat {
  border-top-color: rgba(238, 242, 242, 0.18);
}

/* 03 BUILD — paper, lichen. The ground plane. */
#build {
  --accent: var(--lichen);
  --accent-soft: var(--lichen-100);
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.report-grid.flip > .report-figure {
  order: -1;
}

.report-mark {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}
.report-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.report-where {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
}
#water .report-where {
  color: #7c9199;
}

h2.report-title {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  margin-bottom: 1rem;
}
h2.report-title .em {
  font-style: italic;
}

.report-lede {
  margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem);
}

/* Topic list — mono, two columns, hairline separated */
.topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  padding: 0;
  list-style: none;
}
.topic {
  border-top: 1px solid var(--paper-300);
  padding: 0.55rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.topic-i {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15em;
}
.topic-name {
  font-size: 0.875rem;
  color: var(--ink-700);
}

/* Stat strip — real published figures only */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}
.stat {
  border-top: 1px solid var(--ink-100);
  padding-top: 0.7rem;
}
.stat-v {
  font-family: var(--font-mono);
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  display: block;
  line-height: 1.1;
}
.stat-k {
  font-size: 0.75rem;
  color: var(--ink-500);
  display: block;
  margin-top: 0.3rem;
  line-height: 1.35;
}

/* Primary action */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  padding: 0.95rem 1.4rem;
  position: relative;
  overflow: hidden;
  transition: background var(--t-fast) var(--ease);
}
.cta .arrow {
  transition: transform var(--t-fast) var(--ease);
}
.cta:hover {
  background: var(--accent);
}
.cta:hover .arrow {
  transform: translateX(4px);
}
#water .cta {
  background: #eef2f2;
  color: #0b1215;
}
#water .cta:hover {
  background: var(--accent);
  color: #fff;
}

.cta-note {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin: 0.9rem 0 0;
}
#water .cta-note {
  color: #7c9199;
}

/* Figures */
.report-figure {
  position: relative;
}
.report-figure svg {
  width: 100%;
  height: auto;
}
.figure-note {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin: 1rem 0 0;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   SHARED: chipsets

   Fire, Water and Build all now share one interaction grammar — a labelled
   control surface beside a drawing that responds to it. The drawings stay
   completely different (offset bands / subsurface section / site plan); only
   the grammar is shared. That is the difference between three cards and a
   system.
   --------------------------------------------------------------------------- */

.chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}
.chipset button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.38rem 0.6rem;
  border: 1px solid var(--ink-100);
  border-radius: 3px;
  background: none;
  color: var(--ink-500);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.chipset button .ci {
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}
.chipset button:hover {
  color: var(--ink);
  border-color: var(--ink-300);
}
.chipset button[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.chipset button[aria-pressed="true"] .ci {
  color: var(--accent);
}
.chipset.dark button {
  border-color: rgba(238, 242, 242, 0.2);
  color: #7c9199;
}
.chipset.dark button:hover {
  color: #eef2f2;
  border-color: rgba(238, 242, 242, 0.45);
}
.chipset.dark button[aria-pressed="true"] {
  color: #eef2f2;
  border-color: var(--accent);
  background: rgba(42, 143, 156, 0.18);
}

/* --- 01 Fire: ignition zones, offset from the structure --------------------
   Bands draw outward in sequence on entry — innermost first, because that is
   the order the guidance itself prioritises. Activating a zone fills it and
   mutes the others, so the "hundred feet that decides" reads spatially rather
   than only as a caption.
   -------------------------------------------------------------------------- */

.rings [data-ring] {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.9);
  opacity: 0;
  transition: transform var(--t-slow) var(--ease), opacity var(--t-med) var(--ease);
}
.rings.in [data-ring] {
  transform: none;
  opacity: 1;
}
.rings.in [data-ring="1"] { transition-delay: 60ms; }
.rings.in [data-ring="2"] { transition-delay: 200ms; }
.rings.in [data-ring="3"] { transition-delay: 340ms; }

.rings.in [data-ring].muted {
  opacity: 0.26;
}

.rings .band {
  fill: none;
  stroke-opacity: 0;
  /* The band stroke IS the zone area, so it doubles as the hit target — no
     separate invisible rects needed. */
  pointer-events: stroke;
  transition: stroke-opacity var(--t-med) var(--ease);
}
.rings [data-ring].hot .band {
  stroke-opacity: 0.13;
}
.rings [data-ring].hot .edge {
  stroke-width: 2;
  stroke-opacity: 1;
}
.rings [data-ring] {
  cursor: pointer;
}

.rings [data-structure] {
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.rings.in [data-structure] {
  opacity: 1;
}

.ring-readout {
  min-height: 4.5rem;
  margin-top: 1.1rem;
  border-top: 1px solid var(--paper-300);
  padding-top: 0.8rem;
}
.ring-readout .rr-k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  display: block;
  margin-bottom: 0.35rem;
}
.ring-readout .rr-v {
  font-size: 0.875rem;
  color: var(--ink-700);
  margin: 0;
  max-width: 46ch;
  line-height: 1.6;
}

/* --- 02 Water: comparable wells in section --------------------------------
   Casings draw down on entry. Hovering a well thickens it, mutes the rest and
   drops a leader across to the depth scale, so a 145 ft well and a 40 ft well
   become a comparison you can see rather than two numbers you must hold in
   your head. The annotation chips add labels the way Build's layers do.
   -------------------------------------------------------------------------- */

.wells [data-casing] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1100ms var(--ease), stroke-width var(--t-fast) var(--ease);
}
.wells.in [data-casing] {
  stroke-dashoffset: 0;
}
.wells [data-well] {
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}
.wells [data-well] .hit {
  fill: transparent;
}
.wells [data-well].muted {
  opacity: 0.3;
}
.wells [data-well].hot .casing {
  stroke-width: 3;
}
.wells [data-well].hot .head {
  r: 5;
  fill: var(--aqua-400);
}
.wells [data-well] .lead {
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.wells [data-well].hot .lead {
  opacity: 1;
}

/* annotation layers, toggled by the chips */
.wells .anno-depth,
.wells .anno-yield {
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.wells.show-depth .anno-depth,
.wells.show-yield .anno-yield {
  opacity: 1;
}
.wells .anno-swl {
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.wells.show-swl .anno-swl {
  opacity: 1;
}
.wells .aq {
  opacity: 0.5;
  transition: opacity var(--t-med) var(--ease);
}
.wells.show-aquifer .aq {
  opacity: 1;
}

.well-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.1rem;
  border-top: 1px solid rgba(238, 242, 242, 0.18);
  padding-top: 0.8rem;
  min-height: 3.25rem;
}
.well-readout div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.well-readout .wk {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7c9199;
}
.well-readout .wv {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #eef2f2;
}

/* --- 03 Build: twelve layers over one parcel --- */
.build-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.layerlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--paper-300);
  columns: 2;
  column-gap: clamp(1rem, 2.5vw, 2rem);
}
.layerlist li {
  break-inside: avoid;
}
.layerlist button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--paper-300);
  padding: 0.5rem 0.25rem;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--ink-500);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.layerlist button:hover,
.layerlist button[aria-pressed="true"] {
  color: var(--ink);
  padding-left: 0.5rem;
}
.layerlist .li {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}
.layerlist button[aria-pressed="true"] .li {
  color: var(--lichen);
}
.layerlist .ln {
  font-size: 0.8125rem;
}

.parcel [data-layer] {
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.parcel [data-layer].on {
  opacity: 1;
}

/* ===========================================================================
   9. FRAGMENTATION  (why this exists — shown, barely told)
   =========================================================================== */

.frag {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.sources {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink-100);
}
.sources li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--paper-300);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-700);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  transition-delay: calc(var(--i) * 55ms);
}
.sources.in li {
  opacity: 1;
  transform: none;
}
.sources li .holder {
  color: var(--ink-300);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
}

.frag-close {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 34ch;
}

/* ===========================================================================
   10. HOW WE REPORT  (trust — the family's signature)
   =========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  border: 1px solid transparent;
}
.chip-recorded {
  background: #eef4f0;
  color: #1f5c46;
  border-color: #cfe2d8;
}
.chip-calculated {
  background: #eef1f6;
  color: #2f4f75;
  border-color: #d3dcea;
}
.chip-estimated {
  background: #fbf2e4;
  color: #8a5f18;
  border-color: #ecdcc0;
}
.chip-mapped {
  background: #f0f2ee;
  color: #4a5a3f;
  border-color: #dde2d6;
}
.chip-potential {
  background: #f4eff6;
  color: #5f4176;
  border-color: #e2d6e9;
}

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
.principle {
  border-top: 1px solid var(--ink-100);
  padding-top: 1rem;
}
.principle h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.principle p {
  font-size: 0.875rem;
  color: var(--ink-500);
  margin: 0;
  line-height: 1.65;
}

.independence {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  border-left: 2px solid var(--contour);
  padding: 0.4rem 0 0.4rem 1.25rem;
  max-width: 62ch;
}
.independence p {
  font-size: 0.875rem;
  color: var(--ink-700);
  margin: 0;
  line-height: 1.7;
}
.independence strong {
  font-weight: 500;
}

/* ===========================================================================
   11. WHERE THIS IS GOING  (the plural, designed to scale)
   =========================================================================== */

.future {
  background: var(--paper-200);
  border-top: 1px solid var(--paper-300);
  border-bottom: 1px solid var(--paper-300);
}

.manifest {
  border-top: 1px solid var(--ink-100);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
.manifest-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--paper-300);
}
.manifest-row .m-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.manifest-row .m-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}
.manifest-row .m-state {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-good);
}
.manifest-row.reserved {
  opacity: 0.5;
}
.manifest-row.reserved .m-name {
  color: var(--ink-300);
  font-style: italic;
}
.manifest-row.reserved .m-state {
  color: var(--ink-300);
}

/* ===========================================================================
   12. ABOUT + FOOTER
   =========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.notlist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.notlist li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--paper-300);
  font-size: 0.875rem;
  color: var(--ink-500);
}
.notlist li::before {
  content: "—";
  color: var(--ink-300);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

footer.foot {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 8vh, 5rem) clamp(1.5rem, 4vh, 2.5rem);
}
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.9fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}
.foot .wordmark-main {
  color: var(--paper);
  font-size: 1.75rem;
}
.foot .wordmark-qual {
  color: var(--ink-300);
}
.foot-tag {
  font-size: 0.875rem;
  color: var(--ink-300);
  max-width: 34ch;
  margin: 1.25rem 0 0;
  line-height: 1.65;
}
.foot h4 {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin: 0 0 1rem;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot li + li {
  margin-top: 0.6rem;
}
.foot a {
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--paper);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  transition: color var(--t-fast) var(--ease);
}
.foot a .n {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}
.foot a:hover {
  color: var(--contour-300);
}
.foot-bottom {
  border-top: 1px solid rgba(251, 251, 249, 0.16);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}
.foot-bottom p,
.foot-bottom span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  margin: 0;
  line-height: 1.7;
}
.foot-legal {
  max-width: 74ch;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ===========================================================================
   13. SCROLL REVEALS  (one mechanism, used sparingly)
   =========================================================================== */

.rise {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.rise.in {
  opacity: 1;
  transform: none;
}
.rise.d1 {
  transition-delay: 90ms;
}
.rise.d2 {
  transition-delay: 180ms;
}
.rise.d3 {
  transition-delay: 270ms;
}

.rule-draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.rule-draw.in {
  transform: scaleX(1);
}

/* ===========================================================================
   14. RESPONSIVE  —  the phone is designed, not stacked
   =========================================================================== */

@media (max-width: 1000px) {
  .hero-grid,
  .layers,
  .report-grid,
  .build-split,
  .frag,
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .report-grid.flip > .report-figure {
    order: 0;
  }
  /* On narrow screens the figure follows the words it explains */
  .report-figure {
    order: 2;
  }
  .foot-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  :root {
    --gut: 1.25rem;
  }

  /* The plate stack becomes a flatter, shallower section — less perspective
     distortion at small sizes, and it stays legible rather than decorative. */
  .stack-frame {
    aspect-ratio: 5 / 4;
    perspective: 900px;
    --zmul: 0.62;
  }
  .stack {
    transform: rotateX(52deg) rotateZ(-30deg) scale(0.96);
  }
  /* No room either side of the stack at this width — the labels would be
     clipped by the hero's overflow. The report index directly above the stack
     already names all three, and the framework section explains the depths
     immediately after, so the diagram carries itself here. */
  .plate-label {
    display: none;
  }
  .plate {
    inset: 18% 12%;
  }
  .plate-label {
    font-size: 0.5rem;
    bottom: -1.6rem;
  }
  .plate-label::before {
    display: none;
  }

  /* Hero index rows: the subject line drops below, arrow stays put */
  .index-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    padding: 0.9rem 0.15rem;
  }

  .layerlist {
    columns: 1;
  }

  .sources li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
  .sources li .holder {
    text-align: left;
  }

  .well-readout {
    gap: 0.5rem 1.25rem;
  }

  .foot-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .foot-bottom {
    flex-direction: column;
  }
}

/* Touch devices: hover-only affordances get a permanent resting state so
   nothing is discoverable by hover alone. */
@media (hover: none) {
  .index-go,
  .layerlist button {
    color: var(--ink-500);
  }
  .plate-label {
    opacity: 1;
  }
}

/* ===========================================================================
   15. REDUCED MOTION  —  final states, no theatre
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Open the strata and draw everything in, statically */
  :root {
    --sep: 1;
  }
  .rise {
    opacity: 1;
    transform: none;
  }
  .rule-draw {
    transform: scaleX(1);
  }
  .sources li {
    opacity: 1;
    transform: none;
  }
  .wells [data-casing] {
    stroke-dashoffset: 0;
  }
  .rings [data-ring],
  .rings [data-structure] {
    opacity: 1;
    transform: none;
  }
  h1.hero-title .plural::after {
    transform: scaleX(1);
  }
  .plate {
    transition: none;
  }
}

/* ===========================================================================
   16. PRINT
   =========================================================================== */

@media print {
  .register,
  .stack-frame,
  .cta {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
  #water {
    background: #fff;
    color: #000;
  }
  .section,
  .report {
    padding-block: 1.5rem;
    break-inside: avoid;
  }
}