/* ==========================================================================
   Domain pages — hero, Q&A, depth explorer, method picks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero
   -------------------------------------------------------------------------- */

.phero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(28rem, 72vh, 44rem);
  padding: calc(var(--header-height) + var(--space-16)) var(--gutter) var(--space-16);
  overflow: clip;
  color: var(--color-fg-inverse);
  background-color: var(--color-ink-950);
}

.phero__media {
  position: absolute;
  inset: 0;
}

.phero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
     A single settling zoom on load, not a perpetual ken-burns drift.
     An infinite animation never stops compositing — it costs battery for as
     long as the tab is open, and after the first few seconds nobody is
     looking at it anyway. One arrival, then still.
  */
  animation: phero-settle 1.8s var(--ease-out) both;
}

@keyframes phero-settle {
  from {
    transform: scale(1.09);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Weighted to the left, where the copy sits. The right stays clear so the
   resistivity field keeps its colour instead of being greyed out. */
.phero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgb(8 9 11 / 0.7) 0%, rgb(8 9 11 / 0.46) 32%, rgb(8 9 11 / 0.1) 64%, rgb(8 9 11 / 0) 82%),
    linear-gradient(to bottom, rgb(8 9 11 / 0.5) 0%, rgb(8 9 11 / 0.08) 42%, rgb(8 9 11 / 0.38) 100%);
}

.phero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-inverse-muted);
}

.crumbs a:hover,
.crumbs a:focus-visible {
  color: var(--color-fg-inverse);
}

.phero__eyebrow {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}

.phero__title {
  font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.phero__lead {
  max-width: 46ch;
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-inverse-muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Question / answer list
   -------------------------------------------------------------------------- */

.qa {
  display: grid;
  gap: var(--space-8) var(--space-12);
  margin-top: clamp(var(--space-12), 8vh, var(--space-16));
  list-style: none;
}

@media (min-width: 48rem) {
  .qa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.qa__item {
  padding-top: var(--space-6);
  border-top: 1px solid var(--section-rule);
}

.qa__q {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.qa__a {
  max-width: 52ch;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--section-fg-muted);
  text-wrap: pretty;
}

/* ==========================================================================
   Depth explorer

   The soil column is a gradient, not an image: it scales to any height, costs
   nothing to download, and stays sharp on every display.
   ========================================================================== */

.probe {
  --depth: 0;
  margin-top: clamp(var(--space-12), 8vh, var(--space-16));
}

.probe__stage {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .probe__stage {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--space-12);
  }
}

/* --- Soil column --------------------------------------------------------- */

.probe__column {
  position: relative;
  min-height: 20rem;
  border-radius: 2px;
  overflow: clip;
  background-image:
    /* faint striations, so the column reads as stratified ground */
    repeating-linear-gradient(
      to bottom,
      rgb(0 0 0 / 0.14) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(
      to bottom,
      #3b2b1f 0%,
      #4c3828 16%,
      #6b5236 40%,
      #8a7350 64%,
      #6f6a60 82%,
      #4a4a48 100%
    );
}

@media (max-width: 51.99rem) {
  .probe__column {
    min-height: 11rem;
  }
}

/* Everything above the cursor is "explored" and lifts slightly out of the
   dark, so progress is legible at a glance. */
.probe__column::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: calc(var(--depth) * 100%);
  background-color: rgb(246 246 244 / 0.16);
  pointer-events: none;
}

.probe__ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.probe__tick {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--at) * 100%);
  padding-inline-start: var(--space-2);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  color: rgb(246 246 244 / 0.55);
  border-top: 1px solid rgb(246 246 244 / 0.18);
  transform: translateY(-0.5px);
}

.probe__cursor {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--depth) * 100%);
  height: 2px;
  background-color: var(--color-accent);
  box-shadow: 0 0 12px rgb(192 118 74 / 0.9);
  /* No transition: the cursor must track the slider exactly, and easing a
     direct-manipulation control makes it feel unresponsive. */
}

.probe__readout {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(100% + var(--space-3));
  transform: translateY(-50%);
  padding: 0.15rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-ink-950);
  background-color: var(--color-accent);
  border-radius: 2px;
}

/* --- Target list --------------------------------------------------------- */

.probe__targets {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  list-style: none;
}

.probe__target {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--section-rule);
  opacity: 0.45;
  transition: opacity 0.35s var(--ease-out);
}

.probe__target[data-active="true"] {
  opacity: 1;
}

.probe__label {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}

.probe__method {
  justify-self: end;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--section-fg-muted);
  transition: color 0.35s var(--ease-out);
}

.probe__target[data-active="true"] .probe__method {
  color: var(--color-accent);
}

.probe__range {
  grid-column: 1 / -1;
  order: 3;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--section-fg-muted);
}

/* The band is a true scale drawing of the target's depth range, so the row
   states its extent as well as its name. */
.probe__band {
  position: relative;
  grid-column: 1 / -1;
  order: 2;
  display: block;
  height: 3px;
  border-radius: 2px;
  background-color: rgb(246 246 244 / 0.12);
}

.probe__band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) * 100%);
  right: calc((1 - var(--to)) * 100%);
  border-radius: 2px;
  background-color: rgb(246 246 244 / 0.4);
  transition: background-color 0.35s var(--ease-out);
}

.probe__target[data-active="true"] .probe__band::after {
  background-color: var(--color-accent);
}

/* --- Control ------------------------------------------------------------- */

.probe__control {
  margin-top: var(--space-10, 2.5rem);
}

.probe__hint {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--section-fg-muted);
}

.probe__slider {
  width: 100%;
  height: 1.5rem;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
}

.probe__slider::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background-color: rgb(246 246 244 / 0.2);
}

.probe__slider::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background-color: rgb(246 246 244 / 0.2);
}

.probe__slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: -0.5rem;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 0 6px rgb(192 118 74 / 0.18);
}

.probe__slider::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 0 6px rgb(192 118 74 / 0.18);
}

.probe__slider:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
}

.probe__scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--section-fg-muted);
}

/* --------------------------------------------------------------------------
   Method picks
   -------------------------------------------------------------------------- */

.picks {
  display: grid;
  gap: var(--space-6);
  margin-top: clamp(var(--space-12), 8vh, var(--space-16));
  list-style: none;
}

@media (min-width: 44rem) {
  .picks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .picks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pick {
  padding: var(--space-6);
  background-color: var(--color-paper-000);
  border: 1px solid var(--section-rule);
  border-radius: 2px;
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.pick:hover {
  transform: translateY(-3px);
  border-color: rgb(192 118 74 / 0.5);
}

.pick__tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
}

.pick__title {
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}

.pick__why {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--section-fg-muted);
  text-wrap: pretty;
}

.picks__more {
  margin-top: var(--space-8);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.link-arrow::after {
  content: "→";
  transition: transform 0.35s var(--ease-out);
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .phero__media img {
    animation: none;
  }

  .probe__target,
  .probe__band::after,
  .probe__method,
  .pick,
  .link-arrow::after {
    transition: none;
  }

  .pick:hover {
    transform: none;
  }
}

/* ==========================================================================
   Resistivity colour system

   These are not brand colours — they are the scale soil resistivity is
   plotted on. Blue conductive (clay, moist, deep), red resistive (sand,
   gravel, dry, shallow). Using it here means the page is coloured by its
   subject rather than decorated.
   ========================================================================== */

:root {
  --res-0: #162a6c;
  --res-1: #1a5cb2;
  --res-2: #269ebe;
  --res-3: #56ba7a;
  --res-4: #cece5c;
  --res-5: #e89e3e;
  --res-6: #d6582e;
  --res-7: #961e26;
}

/* --------------------------------------------------------------------------
   Hero: the photograph becomes the map

   The field is rendered once and then faded over the aerial shot. It states
   the whole proposition in one gesture — this ground becomes this data — and
   it is a single finite transition, not a loop.
   -------------------------------------------------------------------------- */

.phero__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: hard-light;
  /* Rendered at lattice resolution and stretched: the browser's own smoothing
     is what produces the interpolated, kriged look. */
  image-rendering: auto;

  /*
     Masked, not laid flat over the whole frame. At full bleed the field simply
     erased the photograph and the hero read as an abstract heat map — the
     opposite of the intended message. Fading it in from left to right puts the
     transition *inside* the frame: bare ground under the headline, finished
     resistivity map on the right. The story is legible in one still, and the
     title keeps a dark, quiet backdrop.
  */
  -webkit-mask-image: linear-gradient(
    100deg,
    transparent 14%,
    rgb(0 0 0 / 0.35) 38%,
    #000 62%
  );
  mask-image: linear-gradient(
    100deg,
    transparent 14%,
    rgb(0 0 0 / 0.35) 38%,
    #000 62%
  );
}

.phero__field[data-ready="true"] {
  animation: field-emerge 3.2s var(--ease-out) 0.5s forwards;
}

@keyframes field-emerge {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 0.78;
    transform: scale(1);
  }
}

/* Narrow viewports stack the copy over the full width, so the field retreats
   to the lower half instead of the right. */
@media (max-width: 48rem) {
  .phero__field {
    -webkit-mask-image: linear-gradient(to bottom, transparent 18%, #000 70%);
    mask-image: linear-gradient(to bottom, transparent 18%, #000 70%);
  }
}

/* A single sweep across the hero on arrival — the acquisition pass, once. */
.phero__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgb(246 246 244 / 0.16) 50%,
    transparent 58%
  );
  background-size: 260% 100%;
  background-position: 130% 0;
  animation: field-sweep 2.6s var(--ease-in-out) 0.9s 1 forwards;
}

@keyframes field-sweep {
  to {
    background-position: -60% 0;
  }
}

/* ==========================================================================
   Depth map — three investigation channels, one continuous morph
   ========================================================================== */

.dmap {
  margin-top: clamp(var(--space-12), 8vh, var(--space-16));
}

.dmap__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: clip;
  border: 1px solid rgb(246 246 244 / 0.14);
  border-radius: 2px;
  background-color: var(--color-ink-900);
}

.dmap__readout {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: 0.3rem 0.7rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-950);
  background-color: rgb(246 246 244 / 0.92);
  border-radius: 2px;
}

/* --- Channel selector ---------------------------------------------------- */

.dmap__channels {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  list-style: none;
}

@media (min-width: 40rem) {
  .dmap__channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.channel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-3);
  text-align: start;
  color: inherit;
  background: none;
  border: 1px solid rgb(246 246 244 / 0.14);
  border-radius: 2px;
  cursor: pointer;
  transition:
    border-color 0.35s var(--ease-out),
    background-color 0.35s var(--ease-out);
}

.channel:hover {
  border-color: rgb(246 246 244 / 0.4);
}

.channel[data-active="true"] {
  border-color: var(--color-accent);
  background-color: rgb(192 118 74 / 0.12);
}

.channel__thumb {
  flex: none;
  width: 3.25rem;
  height: 2.25rem;
  border-radius: 2px;
  display: block;
}

.channel__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}

.channel__depth {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--section-fg-muted);
}

/* --- Legend -------------------------------------------------------------- */

.dmap__legend {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.dmap__ramp {
  height: 8px;
  border-radius: 2px;
}

.dmap__scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--section-fg-muted);
}

.dmap__note {
  max-width: var(--measure);
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--section-fg-muted);
}

@media (prefers-reduced-motion: reduce) {
  .phero__field[data-ready="true"] {
    animation: none;
    opacity: 0.55;
  }

  .phero__sweep {
    animation: none;
    opacity: 0;
  }

  .channel {
    transition: none;
  }
}

/* --- Map layers -----------------------------------------------------------
   The three exports are stacked and cross-faded rather than swapped on one
   <img>: swapping the src would flash white while the next file decodes.
   -------------------------------------------------------------------------- */

.dmap__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.75s var(--ease-out);
}

.dmap__layer[data-active='true'] {
  opacity: 1;
}

.channel__thumb {
  flex: none;
  width: 3.25rem;
  height: 2.25rem;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .dmap__layer {
    transition: none;
  }
}

/* ==========================================================================
   Hub (index) pages
   ========================================================================== */

.phero--compact {
  min-height: clamp(20rem, 52vh, 30rem);
}

.phero__tag {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-fg-inverse);
}

.cards {
  display: grid;
  gap: var(--space-6);
  margin-top: clamp(var(--space-12), 8vh, var(--space-16));
  list-style: none;
}

@media (min-width: 44rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  border: 1px solid var(--section-rule);
  border-radius: 2px;
  overflow: clip;
  background-color: var(--color-paper-000);
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgb(192 118 74 / 0.5);
}

.card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: clip;
  background-color: var(--color-ink-800);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

/* Index marker sits on the image so the grid reads as an ordered catalogue
   rather than a pile of tiles. */
.card__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 0.15rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-ink-950);
  background-color: rgb(246 246 244 / 0.92);
  border-radius: 2px;
}

.card__text {
  display: block;
  flex: 1 1 auto;
  padding: var(--space-6);
}

.card__title {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  transition: color 0.35s var(--ease-out);
}

.card:hover .card__title {
  color: var(--color-accent);
}

.card__body {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--section-fg-muted);
  text-wrap: pretty;
}

.card__cue {
  align-self: flex-start;
  margin: 0 var(--space-6) var(--space-6);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.card:hover .card__cue,
.card__link:focus-visible .card__cue {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Method pages
   ========================================================================== */

.specs {
  display: grid;
  gap: var(--space-6);
  margin-top: clamp(var(--space-12), 8vh, var(--space-16));
  padding-top: var(--space-8);
  border-top: 1px solid var(--section-rule);
  list-style: none;
}

@media (min-width: 48rem) {
  .specs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.spec__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--section-fg-muted);
}

.spec__value {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.reveals {
  display: grid;
  gap: 0;
  margin-top: clamp(var(--space-10, 2.5rem), 6vh, var(--space-16));
  list-style: none;
}

.reveals__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-5, 1.25rem);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  border-bottom: 1px solid var(--section-rule);
  text-wrap: pretty;
}

/* A small accent square rather than a bullet — it reads as a datum, not a
   list item. */
.reveals__item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  transform: translateY(-2px);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: clamp(var(--space-10, 2.5rem), 6vh, var(--space-12));
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--space-5, 1.25rem);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  border: 1px solid var(--section-rule);
  border-radius: 999px;
  transition: border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

.chip:hover,
.chip:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card__media img,
  .card__title,
  .card__cue,
  .chip {
    transition: none;
  }

  .card:hover {
    transform: none;
  }

  .card__cue {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Case study — a real delivered survey
   ========================================================================== */

.case {
  margin-top: clamp(var(--space-12), 8vh, var(--space-16));
}

.case__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--section-rule);
  border-radius: 2px;
}

.case__caption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--section-fg-muted);
}

.case__text {
  margin-top: clamp(var(--space-10, 2.5rem), 6vh, var(--space-12));
}

.case__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* Provenance sits with the claim, not in a footnote nobody reads. */
.case__note {
  max-width: var(--measure);
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--section-fg-muted);
  border-left: 2px solid var(--color-accent);
}

.case__sub {
  margin-top: clamp(var(--space-12), 8vh, var(--space-16));
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--section-fg-muted);
}

/* --- Legend key ---------------------------------------------------------- */

.reads {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  list-style: none;
}

@media (min-width: 52rem) {
  .reads {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.read {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--section-rule);
}

/* Swatches are taken from the resistivity ramp in src/js/field.js, so the key
   matches the maps above it exactly rather than approximately. */
.read__swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 2px;
}

.read__swatch--Bleu,
.read__swatch--Blue {
  background: linear-gradient(135deg, var(--res-0), var(--res-2));
}

.read__swatch--Vert,
.read__swatch--Green {
  background: linear-gradient(135deg, var(--res-3), var(--res-4));
}

.read__swatch--Rouge,
.read__swatch--Red {
  background: linear-gradient(135deg, var(--res-6), var(--res-7));
}

.read__tone {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.read__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--section-fg-muted);
}

.read__body {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--section-fg-muted);
  text-wrap: pretty;
}

/* --- Deliverables -------------------------------------------------------- */

.delivers {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
  list-style: none;
  counter-reset: deliver;
}

@media (min-width: 44rem) {
  .delivers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .delivers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.deliver {
  counter-increment: deliver;
  padding-top: var(--space-6);
  border-top: 1px solid var(--section-rule);
}

.deliver::before {
  content: counter(deliver, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.deliver__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}

.deliver__body {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--section-fg-muted);
  text-wrap: pretty;
}