/* ENVOY — gear.css
   the red screen, its two photographic plates and their fades

   One part of a stylesheet split across files. The load order in
   index.html is part of the stylesheet — see css/base.css for the map. */

/* ------------------------------------------------------------------ gear */

/* The red screen. Everything in here is sized off the section rather than the
   viewport, because unlike the tour it is read in one pass and should be
   exactly as tall as its content — the two plates are the only fixed heights.

   The section's own background is doing real work, not just painting black.
   Each plate is masked to transparent at *both* ends, so what shows through
   is whatever is behind it — and behind it is this: black out at the page
   edges, red where the plate meets the panel. That is what lets one image
   dissolve into the page at one end and into the red field at the other,
   which a mask alone cannot do (a mask fades to transparent, and transparent
   here would only ever be the section's flat colour).

   The two ramps are placed on the plates' own boxes via --plate-h, so they
   move together — change the plate height and the red follows it. */
.gear {
  /* The reference red, and it is not --red. --red is the site's signal
     colour — hairlines, nav, headings — and it is dark enough to read as ink
     at that size. A whole screen of it goes muddy, so the field gets its own
     brighter, more saturated value and the two never appear at the same
     scale. */
  --gear-red: #f70505;

  /* One number for the band height, read by the plates and by the two red
     ramps below. They have to agree or the ramp lands off the seam. */
  --plate-h: clamp(300px, 66vh, 780px);

  position: relative;
  z-index: 1;
  /* Earlier layers paint on top, so: red up into the foot of the top plate,
     red down into the head of the bottom one, black underneath everything.
     Each ramp is transparent for the outer part of its band and full red by
     the edge that touches the panel, so the panel's own colour and the ramp
     meet at the same value and the seam disappears.

     Each ramp reaches FULL red at the point its plate's mask starts letting
     go, and holds it from there to the seam — not at the seam itself. The
     plates are opaque PNGs, so while the mask is still solid the ramp under
     it is invisible and where it rises does not matter; the moment the mask
     starts fading, though, whatever red is behind is what the picture
     dissolves *into*. Bringing it up to full late meant the picture spent its
     whole fade over a half-strength red, and since both photographs are
     roughly two-thirds black by pixel count, the composite there came out
     darker than the picture above it and the panel below — a dark band
     across the seam. Full red before the fade starts makes every row in the
     handoff a straight blend between the photograph and the panel's own
     colour, which can only ever get brighter on the way down. */
  background:
    linear-gradient(180deg,
        transparent 30%, var(--gear-red) 55%, var(--gear-red) 100%)
      center top / 100% var(--plate-h) no-repeat,
    linear-gradient(0deg,
        transparent 30%, var(--gear-red) 55%, var(--gear-red) 100%)
      center bottom / 100% var(--plate-h) no-repeat,
    #000;
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

/* The two photographic bands. `cover` scales the image to fill the width, so
   the band is never cropped horizontally — the full width of each frame is
   always showing, and the height is the only thing deciding how much of the
   rest survives. A taller band is therefore a *wider shot*: less of the frame
   thrown away, less magnification, more scene.

   Because the scale is width-driven, how much is thrown away grows with the
   viewport width, which is why the anchors below matter more the wider the
   screen gets.

   display:block kills the inline baseline gap that would otherwise leave a
   few pixels of black between the plate and the red. */
.gear-plate {
  display: block;
  width: 100%;
  height: var(--plate-h);
  object-fit: cover;
}

/* Both ends of each plate are masked to transparent. The outer end dissolves
   into the page's black; the inner end dissolves into the red ramp painted on
   the section behind it, so the picture hands off to the panel rather than
   being cut against it.

   The masks' inner ramps and the background's red ramps are deliberately not
   the same shape: the red is at full strength *before* the mask has started
   to go, so the picture only ever dissolves into a finished colour. Overlap
   them and you get a dark band at the crossover, where the image is half gone
   and the red is only half arrived — see the note on the ramps above.

   Both inner ramps also end short of the seam rather than at it, so the last
   stretch of each band is flat red and the panel's real edge is a colour the
   eye cannot find. */

/* Low in the frame but not on its floor. This plate is the one that gets
   worse the wider the screen — a wider box scales the image up and crops more
   of it — and the two things worth keeping sit at opposite ends: the track bed
   the street recedes down, and the wedge of lit sky between the buildings.
   `bottom` keeps all of the first and none of the second.

   72% is where both survive: the window lands on the middle of the frame with
   the sky wedge still in shot at the top and the ties running to the bottom
   edge. Moving it up gives back sky and eats into the ties; down does the
   reverse. */
/* The fade off the foot of this one starts at 55%, which is a long way up the
   band and is the reason there is no longer a dark bar over the heading. The
   photograph has a genuinely black stretch across it at about two-thirds
   height — the shadowed side of the street — and the old mask held the
   picture at full opacity to 72%, which put that stretch on screen at full
   strength immediately above the panel. Nothing about the ramp under it could
   fix that; the black was the picture. Letting go at 55% means the dark
   stretch arrives already half dissolved into the red and never reads as an
   edge. */
.gear-plate--top {
  object-position: center 72%;
  mask-image: linear-gradient(180deg,
      transparent 0%, #000 22%, #000 55%, transparent 92%);
}

/* Still from the top: this frame's subject is the wires against the sky, and
   its foot is the shopfronts, which are the part worth losing.

   The head of this plate is the site's longest dissolve, and deliberately: it
   is the one edge read on the way *out* of the red, so the panel should thin
   into a photograph rather than stop at one. Holding the picture back to 45%
   spreads the handoff over nearly half the band — the red gives up about
   fifteen points of brightness per tenth of the band instead of forty, which
   is the difference between a fade and a hem. */
.gear-plate--bottom {
  object-position: center top;
  mask-image: linear-gradient(180deg,
      transparent 0%, #000 45%, #000 78%, transparent 100%);
}

/* No rule at either end, and no visible junction either — the plates fade
   into this colour rather than being cut against it, so the panel's real edge
   is somewhere up inside each photograph.

   Which is also why the padding is generous: the top of this box is not where
   the red starts, it is where the red is already at full strength, and the
   copy needs to clear the part of the ramp that is still picture. */
.gear-panel {
  background: var(--gear-red);
  padding: clamp(56px, 8.8vh, 128px) clamp(20px, 4vw, 64px) clamp(70px, 11vh, 156px);
}

/* Same measure and gutter as .light-inner and the order block, so all four
   full-width panels on the page hang off one edge. */
.gear-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* White over the red, black under it. The pair is one lockup read top to
   bottom, and the colour flip is what separates the claim from its answer —
   they are the same length and nearly the same width, so weight and letter
   spacing are all that is left to tell them apart.

   Written in sentence case in the markup and capitalised here, so the copy
   stays readable where it is edited. */
.gear-title,
.gear-sub {
  margin: 0;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, "Playfair Display", serif;
  text-transform: uppercase;
  line-height: 1.06;
}

.gear-title {
  font-size: clamp(27px, 4.4vw, 62px);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: #fff;
  /* It holds one line to about 700px and breaks in two below that. Left to
     itself the break lands after GEAR and leaves CLOSE alone on the second
     line; balance splits it evenly instead. Ignored where unsupported, which
     just gives back the ragged break. */
  text-wrap: balance;
}

/* Lighter and looser than the line above it, which is what stops the second
   line reading as an echo of the first at the same volume. */
.gear-sub {
  margin-top: clamp(22px, 4.2vh, 52px);
  /* Slightly smaller than the line above but tracked out past it, so it comes
     out the wider of the two — which is what stops the pair reading as a
     heading with a subtitle under it. They are one sentence broken over two
     lines, and the second is the half that lands. */
  font-size: clamp(25px, 4.1vw, 58px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #000;
}

/* ---- fancyline ----
 *
 * Sized as a share of the column rather than in pixels, so it stays in
 * proportion to the two lines above it at every width — it is the rule under
 * a lockup, and a fixed width would have it outgrow the type on a phone and
 * get lost under it on a wide screen. The cap keeps it from running the full
 * measure on desktop, where the reference has it about half the panel.
 */
.gear-rule {
  display: block;
  width: min(60%, 620px);
  height: auto;
  margin: clamp(16px, 3vh, 36px) auto clamp(26px, 4.6vh, 54px);
}

/* ---- copy ---- */

/* Left-aligned inside a centred column, as in the reference: the headings are
   symmetrical and the paragraphs are not, and the ragged right edge under a
   centred lockup is what keeps this from reading as a poster caption.
   Inset from the panel's own gutter so the block sits inside the field rather
   than against its edges. */
.gear-copy {
  /* Wide, and deliberately wider than the site's other running copy. The
     Garamond ledes elsewhere sit at ~52ch because a serif at that size falls
     apart past it; this is a condensed bold, which packs far more characters
     into the same physical measure, so the same line *length* on the page is
     a much higher ch count. Set in ch rather than px so it tracks the type
     size below rather than having to be re-tuned alongside it. */
  max-width: 84ch;
  margin: 0 auto;
  text-align: left;
}

.gear-copy p {
  margin: 0;
  font-family: "Archivo Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.004em;
  color: #fff;
}

.gear-copy p + p { margin-top: 1.3em; }