/* ==========================================================================
   Starfish Group — sourcing.css
   Section 02: the fork. Two buyers who want completely different things.

   Not two cards. A number, a rule and a column each — the split itself does
   the separating, so nothing needs a container drawn around it.
   ========================================================================== */

.sourcing {
  position: relative;
  /* SHORTER THAN .section GIVES IT, but not as short as it was. The two cards
     are the whole section and at the default 100px top and bottom it ran past
     a laptop screen — you could not see both paths at once, which is the one
     comparison it exists to make. At 56 the heading sat too close to the seam
     above it; 80 still leaves the pair inside a 900px viewport with room over,
     and the two height queries below take it back down where that stops being
     true. */
  padding-block: var(--s-80);
  /* CLIPS ITS OWN ARTWORK. The striped ball starts above this section's top
     edge so it is out of sight while the map section is on screen, and a child
     of #sourcing paints over #source-map without this — #sourcing comes later
     in the DOM, so it would sit on top of the map instead of hiding behind it. */
  overflow: clip;
  /* NOT sea-glass any more. The map section above it is sea-glass — it has to
     be, the water is that colour — so the two ran together and the boundary
     between them disappeared, which is the one job the background system has.
     This is the light neutral, the same step the develop/plant pair uses, and
     it also gives the object straddling the seam something to cross. */
  background: var(--surface-card);
}

.sourcing > .shell { position: relative; z-index: 1; }

.sourcing__heading { max-width: 16ch; }

.sourcing__paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-80);
  margin-top: var(--s-40);
}

/* The rule is the container. */
/* THE WHOLE CARD IS THE LINK, via a stretched pseudo-element on the CTA rather
   than by wrapping everything in an <a>. Wrapping would put the heading, the
   label and the paragraph inside the link text, which is what a screen reader
   would then read out as the link's name — a sentence long enough to be
   useless. This way the accessible name stays "View species and grades", and
   the click target is the card. */
/* ==========================================================================
   THE TWO PATHS
   Two soft colour fields rather than two columns under a rule. A buyer arrives
   already knowing which of these they are, and the point of the section is
   that the two are different worlds — so the card carries that, and the type
   does not have to work as hard.
   ========================================================================== */
.path {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-32);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 320ms var(--ease-out);
}

/* The two worlds. Both are grounds the palette already has — cool for the raw
   material, warm for what it becomes — so the pair reads as the system rather
   than as two new colours. */
.path--raw  { background: var(--seaglass); }
.path--made { background: var(--cream-mid); }

/* The second card drops half a step, so the pair scans as a sequence rather
   than as a table with two cells.

   BOTH SIDES OF THE OFFSET. Only the lower card carried a margin, and grid
   items stretch to the row — so its top moved down while its bottom stayed
   put, and it ended up 32px SHORTER than its neighbour with the two feet
   level. That reads as one box being bigger, which is not what a stagger is.
   Giving the upper card the same margin at the foot makes them equal and
   lets the offset be an offset. */
.path--raw  { margin-bottom: var(--s-32); }
.path--made { margin-top: var(--s-32); }

/* --- Hover ---------------------------------------------------------------
   The card is a link the size of a poster, so it has to acknowledge the
   pointer. Three things move together and none of them far: the card lifts,
   the photograph pushes very slightly into its own frame, and the arrow
   leaves. No shadow — depth on this site comes from hairlines and ground.
   -------------------------------------------------------------------------- */
.path:hover { transform: translateY(-6px); }
.path:hover .path__title { letter-spacing: -0.028em; }
.path:hover .path__figure img { transform: scale(1.035); }

.path__index {
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  color: var(--ink-meta);
  font-variant-numeric: tabular-nums;
}

.path__label { margin-top: var(--s-12); color: var(--ink-meta); }

.path__title {
  margin-top: var(--s-8);
  /* NO TRANSITION ON letter-spacing. It is the one property this site animates
     that is not transform or opacity, and tracking is laid out again on every
     frame — the whole line reflows sixty times a second for a 0.028em tighten
     nobody consciously sees. The hover still tightens; it just arrives. */
  font-family: var(--font-display);
  /* Medium. These sit under a headline that is itself only 550; at 600 they
     read as a second headline rather than a label for the column below. */
  font-weight: 600;
  font-size: clamp(25px, 2.3vw, 30px);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-headline);
}

/* --- The photograph ------------------------------------------------------- */
.path__figure {
  position: relative;
  margin: var(--s-16) 0 0;
  /* Clips the hover zoom. Without it the image grows past its own rounded
     corners and the card gets square edges for as long as the pointer is on
     it. */
  overflow: hidden;
  border-radius: 12px;
}

.path__figure img {
  width: 100%;
  aspect-ratio: 2.2 / 1;
  object-fit: cover;
  border-radius: 12px;
  background: var(--seaglass-2);
  transition: transform 520ms var(--ease-out);
}

/* The finished-product shot is a bright plated photograph and the raw one is
   near monochrome, so side by side the colour pulled the eye straight to the
   right-hand card. Taking a little saturation out settles it into the palette
   without retouching the picture. */
/* No longer held back. The old frame was mostly grey tabletop, so its colour
   had to be damped; cropped to the food it is doing the job the card needs —
   balancing the industrial credibility of the surimi shot beside it. */
.path--made .path__figure img { filter: saturate(0.94); }

.path__body {
  margin-top: var(--s-16);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  max-width: 54ch;
}

/* --- The link -------------------------------------------------------------
   Open text, not a pill. The card is the button; a bordered control inside it
   competes with the corner arrow for the same job.
   -------------------------------------------------------------------------- */
.path__cta {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--s-16);
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.path__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  /* the card, not just the words */
}

.path__cta .btn__arrow { transition: transform 320ms var(--ease-out); }
.path:hover .path__cta .btn__arrow { transform: translate(3px, -3px); }

/* The pseudo-element covers the card, so the focus ring has to be drawn on the
   card too or it lands on an invisible box. */
.path:focus-within { outline: 2px solid var(--ink); outline-offset: 6px; }
.path__cta:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .path, .path__art, .path__cta .btn__arrow,
  .path__figure img, .path__title { transition: none; }
  .path:hover .path__figure img { transform: none; }
  .path:hover .path__title { letter-spacing: var(--track-headline); }
  .path:hover { transform: none; }
}

/* TALL SCREENS. The two queries below only ever take away, because they were
   written against laptops where height was the scarce thing. On a large
   monitor the opposite is true — the section was still laid out to fit 900px
   and left a band of empty ground beneath it, which reads as the cards being
   small rather than the screen being generous.

   Keyed on 930 rather than 900 because at exactly 900 there is no slack to
   spend: 821 usable against a section already 743 tall. The first version of
   this ran 56px past the fold there.

   The growth goes into the cards, not the gaps. Section padding would fill
   the same pixels while leaving the cards exactly as small as they were, and
   it is the cards that look undersized on a large screen. */
@media (min-width: 1400px) and (min-height: 930px) {
  .sourcing__paths { margin-top: var(--s-56); }
  .path { padding: var(--s-40); }
  /* Back to a photographic proportion. 2.2:1 is a crop made to save height,
     and here there is no height to save. */
  .path__figure img { aspect-ratio: 16 / 9; }
  .path__title { font-size: clamp(32px, 2.3vw, 36px); }
}

/* SHORT SCREENS, not narrow ones. The section is meant to be taken in at a
   glance — both paths at once — and on a 720px-tall laptop the default rhythm
   put it past the fold. Height is what is scarce here, so height is what this
   query keys on — 880 rather than 800 because a 1512x850 screen has only 771
   usable once the header is out, and the full-size layout is 800. */
@media (min-width: 901px) and (max-height: 880px) {
  .sourcing { padding-block: var(--s-40); }
  .sourcing__paths { margin-top: var(--s-24); }
  .path { padding: var(--s-24); }
  .path__figure img { aspect-ratio: 2 / 1; }
}

/* The shortest laptops. 720px tall leaves 641 under the header, and the tier
   above still lands 27 past it. */
@media (min-width: 901px) and (max-height: 730px) {
  .sourcing { padding-block: var(--s-32); }
  .sourcing__paths { margin-top: var(--s-20); }
  .path__figure img { aspect-ratio: 12 / 5; }
}

@media (max-width: 900px) {
  .sourcing__paths { grid-template-columns: 1fr; gap: var(--s-40); margin-top: var(--s-40); }
  /* The offset is a two-column device; stacked it just reads as a bigger gap. */
  .path--raw  { margin-bottom: 0; }
  .path--made { margin-top: 0; }
  .path { padding: var(--s-24); }
}

/* --------------------------------------------------------------------------
   THE STRIPED BALL
   Starts entirely ABOVE this section, where the section's own clip hides it,
   and drops into the top-left corner as the section arrives. It used to
   straddle the seam and sit top-right; now it enters rather than being parked.
   -------------------------------------------------------------------------- */
.sourcing__art {
  --art-w: clamp(260px, 26vw, 360px);

  position: absolute;
  z-index: 0;
  top: calc(var(--art-w) * -1.08);
  left: -7%;
  width: var(--art-w);
  height: auto;
  /* story.js overwrites this while animating and lands back on the same
     value; it is here so the composition is still right under
     prefers-reduced-motion, where nothing is written to the element at all. */
  transform: rotate(7deg);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  /* Mostly out of frame. On a phone the seam is the one thing that has to
     read, and a large object sitting on it competes with the heading. */
  .sourcing__art { --art-w: 42vw; left: -16vw; }
}