/* ==========================================================================
   RWL — public site clarity pass
   Loaded after the main build stylesheet. Everything here works by
   strengthening the same design tokens the compiled CSS already uses
   (--line, --paper-alt, --shadow-sm, etc.), so it needs no changes to the
   React source or build, and nothing here can break existing markup.

   Why: the shipped palette leans on near-invisible dividers (a border only
   ~1.2:1 against white), 5%-opacity card shadows, and an "alt" section tint
   only ~1.03:1 off white. Text itself passes contrast checks, but nothing
   separates one white block from the next, so the page reads as flat glare
   rather than distinct, scannable sections. These overrides fix that.
   ========================================================================== */

:root {
  /* Real, visible neutrals instead of near-white-on-white */
  --line: #d3dae1;
  --line-strong: #aab4bd;
  --paper-alt: #eef1f5;
  --paper-tint: #e7edf3;

  /* Shadows with enough weight to actually lift a card off the page */
  --shadow-sm: 0 1px 2px rgba(16, 26, 34, .06), 0 2px 6px rgba(16, 26, 34, .07);
  --shadow-md: 0 10px 28px -12px rgba(16, 26, 34, .28), 0 4px 10px -4px rgba(16, 26, 34, .12);
}

/* Cards get a resting shadow, not just a hover-only one, so white cards
   read as distinct objects on a white or near-white section. */
.card {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

/* The fixed header needs a seam once it settles to a solid background,
   otherwise it visually fuses with the page content below it. */
.masthead--solid {
  box-shadow: 0 1px 0 var(--line), 0 10px 24px -20px rgba(16, 26, 34, .3);
}

/* Form fields: a touch more definition on their border. */
.field__control,
.field input,
.field select,
.field textarea {
  border-color: var(--line-strong) !important;
}

/* Stat/value tiles and other bordered blocks on light sections. */
.value {
  box-shadow: var(--shadow-sm);
}

/* The "Rock / Water / Sand / Light" strip renders as its own section right
   after the hero closes — it is NOT nested inside .hero — but its styling
   (white text, a near-invisible #ffffff05 tint) assumed it would still be
   sitting on the hero's dark background. On the actual white page
   background that's white text on effectively-transparent white: nothing
   shows. Giving it its own solid dark background fixes it, and matches
   the band visually continuing the hero right above it. */
.strata {
  background: var(--charcoal) !important;
}