/* ============================================================
   GTA METALS — iron filings field
   Used by iron.html only. Self-contained: this file, iron-filings.js
   and the .fe-field block in the page. Nothing else on the site
   references any of it, and it references nothing else.

   A full-bleed cream band carrying a canvas of ~1800 short dark
   segments. They lie along a slowly drifting resting angle until a
   pointer enters, which they treat as a magnetic pole: they swing to
   the field line and creep towards it, then spring back.

   COLOUR: the band paints no colour of its own. The ground is the
   page cream token and the scrim is the same token carrying alpha.
   The four particle fills are the only literals, and they are declared
   ONCE below as --fil-1..4 — the script reads them off this element at
   runtime with getComputedStyle, exactly as index.html reads the brand
   tokens for the three.js lights. Nothing in the JS knows a colour.
   Change a filing colour here and only here.
   ============================================================ */

.fe-field {
  position: relative;
  /* Matches .mp-hero. The band was originally clamped to 62vh as a
     mid-page strip; as the page hero it has to hold the breadcrumb, a
     two-line display headline, the standfirst and the four-item spec
     list, and 62vh cannot. Keeping .mp-hero's own figure also keeps the
     element plate's 18-40px lift landing where it was tuned to land. */
  height: clamp(560px, 86vh, 1100px);
  overflow: hidden;
  /* styles.css gives every section 88-180px of padding-block. The hero is
     sized by its height and lays its copy out against the full box, so
     that padding has to come off here or the stack floats clear of the
     foot. Same reason .hero-scroll pins its own to 0. */
  padding-block: 0;

  /* The mineral pages carry their own ink token, and it is the CREAM one
     — every one of these bands was a dark photograph or an espresso
     block. This hero is cream, so the whole set has to invert, and it
     inverts here rather than at each use site: .mp-crumb, .mp-spec and
     their rules all read rgb(var(--mp-ink-rgb) / a) off whatever they
     inherit. Redeclaring it once on the section is what lets the
     breadcrumb and the spec list come across from the old hero unedited.
     The two accent lines go with it: on cream, gold falls under AA, so
     they take the deeper copper --metal-hi resolves to. */
  --mp-ink-rgb: var(--text-rgb);

  /* Iron filings. Warm dark browns rather than grey: the page ground is
     cream and the site's ink is espresso, so a neutral grey filing reads
     as a dead pixel against it. */
  --fil-1: #4A2C25;
  --fil-2: #5C3328;
  --fil-3: #6B3A2E;
  --fil-4: #7A4636;

  /* Runs cream -> sand -> cream so both edges dissolve into the page
     rather than cutting against it, matching every other band on the
     mineral pages. */
  background: linear-gradient(180deg,
      var(--mp-band-edge) 0%,
      var(--ground-2) 42%,
      var(--ground-2) 58%,
      var(--mp-band-edge) 100%);
}

/* Sized in JS to devicePixelRatio; the CSS box is what it is measured
   against. No will-change and no filter — the field repaints in full
   every frame and a compositing layer or a filter pass would be paid
   45 times a second for nothing. The top and bottom fade is baked into
   each particle's alpha at seed time instead of masked here, for the
   same reason. */
.fe-field-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* House rule: copy over a busy ground gets a scrim weighted to the corner
   the copy occupies. This one started at 0.90 cream reaching 88% across,
   which veiled two thirds of the hero and left the filings a ghost — the
   field is meant to lead the page, not sit under a wash. It now peaks at
   0.52 and is spent by 62%, so the right of the hero is bare canvas and
   even behind the headline the filings read at roughly four times the
   contrast they had.
   What it still has to cover is the small type, not the display type: the
   118px headline carries itself over hairlines, but the 11px uppercase
   spec labels and breadcrumb do not. Those live at the top and foot, and
   the canvas fades its own particles there — see EDGE in the JS — so this
   layer only has to handle the left. */
.fe-field-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* The spec list runs the full width at the foot, so its 11px uppercase
       labels sit out past where the left wash reaches. This band covers
       them and nothing else — it is transparent for the top two thirds,
       which is where the field does its work. */
    linear-gradient(180deg,
      rgb(var(--ground-rgb) / 0) 0%,
      rgb(var(--ground-rgb) / 0) 64%,
      rgb(var(--ground-rgb) / 0.22) 79%,
      rgb(var(--ground-rgb) / 0.58) 100%),
    linear-gradient(96deg,
      rgb(var(--ground-rgb) / 0.52) 0%,
      rgb(var(--ground-rgb) / 0.26) 30%,
      rgb(var(--ground-rgb) / 0.06) 48%,
      rgb(var(--ground-rgb) / 0) 62%);
}

/* Sits over the canvas. pointer-events: none is load-bearing — without it
   the copy swallows the pointer moves the field is driven by, and the
   filings freeze in a block wherever the headline is. Links inside it get
   their own pointer-events back below.
   Padding-top clears the fixed navbar, which is 93px tall unscrolled;
   clamped against vh as .mp-hero-inner is, so it stays clear on short
   viewports too. */
.fe-field-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: clamp(112px, 14vh, 150px) clamp(56px, 9vh, 120px);
  pointer-events: none;
}

.fe-field-inner a { pointer-events: auto; }
.fe-field .mp-crumb span { color: var(--metal-hi); }
.fe-field .mp-spec dd.hi { color: var(--metal-hi); }

.fe-field-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vh, 26px);
  max-width: min(100%, 880px);
}

/* Same recipe as .mp-hero h1, with one change. The measure is in em so it
   resolves against this element's own font-size and holds the headline at
   two lines as the type scales — see the note in mineral.css; a ch or px
   cap on the parent cannot do that.
   The change: the size clamps against min(vw, vh), not vw alone. Sized off
   width only, a short-but-wide window (1440x760) drives a 95px headline
   into a hero that has 560px of room, and the stack overflows upward under
   the nav. This is the same trap .hero-scroll documents on the homepage. */
.fe-field h1 {
  margin: 0;
  font: 400 clamp(44px, min(6.6vw, 9.2vh), 118px)/0.98 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 9.5em;
  color: var(--text);
}

.fe-field-copy p {
  margin: 0;
  max-width: 46ch;
  font: 400 15px/1.75 var(--font-body);
  color: rgb(var(--mp-ink-rgb) / 0.78);
}

/* ---------- no cursor to follow ---------- */
/* Coarse pointers get no tracking at all — a touch reader has no hover to
   give and a tap-driven pole would flicker. The script walks a virtual
   pole along a lissajous path instead, so the field still demonstrates
   itself. Nothing to declare here; that media query is in the JS, which
   also halves the particle count below 768px. The hero keeps its full
   height on a phone, exactly as the photo hero it replaced did — the copy
   is the same copy and needs the same room. */

/* ---------- reduced motion ---------- */
/* The script renders one static frame at the resting angle and never
   starts a loop, so there is no animation here to switch off. The band
   keeps its full height: what is left standing is a still field of
   aligned filings, which is a reasonable picture rather than an empty
   one. */