/* ==========================================================================
   FISHNESS — the brand colors, set in the page's own system
   CLAUDE.md §7: each case study keeps its own brand system, contained.

   ITS OWN FILE, LOADED ONLY BY ITS OWN PAGE. FISHNESS green and yellow exist
   nowhere else on the site, and nothing in here references --kumkumam.

   NOT A BRAND BLOCK. Mailchimp, Spotify and Eikira rebuild whole identities,
   so they get the .brand band: an eyebrow, a display title, a sheet. This
   page shows two colors to make one point, and in that band it read as a
   borrowed component — grey caps, a large Title Case heading and a grey
   ground in a page where every other section is red tracked caps on cream.
   So it is an ordinary .pj-section, and the only thing contained is the
   color itself: two chips.

   THE ONE RULE THIS SECTION EXISTS TO KEEP. The case study reports that white
   text fails contrast on both brand colors — 2.7:1 on green, 1.5:1 on yellow
   (1.48:1 measured), against a 4.5:1 floor. So neither color is ever a
   ground here: every word sits in ink on the cream beside its chip, never on
   it. The screenshots elsewhere on the page do carry white on green; they
   are the delivered work, and §11 names that inconsistency.

   The chip markup and sizing are the shared .brand__swatch component from
   project.css, which is not scoped to .brand, so no rules are duplicated.
   ========================================================================== */

.fish-colors__swatches {
  /* Chip hairline. Yellow against the cream is barely distinguishable
     without a drawn edge (the chip's fill sits within a few percent of the
     ground's luminance), so every chip takes the same line and they read as
     one set. Drawn from --ink, since the shared default derives it from a
     brand anchor this section no longer has. */
  --b-edge: rgba(36, 28, 24, 0.32);

  /* Two colors, not the four-up grid the identity pages fill. Four columns
     with two chips would leave half the row empty and read as missing
     swatches. Declared here, after project.css, so it also outranks the
     narrow-screen two-column rule there rather than stretching the chips to
     half the phone width each. */
  grid-template-columns: repeat(2, minmax(0, 11rem));
  justify-content: center;
  margin: var(--sp-m) auto 0;
  padding: 0;
  color: var(--ink);
}

.fish-colors__note {
  margin-block-start: var(--sp-l);
  text-align: center;
}

/* --- The screenshot plate -------------------------------------------------
   §2's --surface (#E4DED3) is a mat for flat product shots on paper, and at
   1.16:1 against --paper it is a pale rectangle on a pale rectangle. Every
   screenshot on this page is a white UI, so the plate was doing no work: the
   screen dissolved into the page instead of resting on something.

   Darker and page-scoped — this stylesheet loads only here, so §2's locked
   token is untouched and every other project keeps the shared mat. Measured:
   1.68:1 against the page, and white-on-plate goes from 1.34:1 to 1.97:1,
   which is the edge that actually reads.

   NEUTRAL, NOT WARMER. The first pass at this was #C4B69B, which carried a
   chroma (max channel minus min) of 41 against the page's 18 and read as a
   brown plate rather than a darker page. This is the page's own hue scaled
   down: chroma 14, the same separation without the colour shift. No brand
   green or yellow either — §10 keeps those to the two chips. */
.frame--matted { --frame-bg: #BDB8AF; }

/* The phone frames held one fixed ratio, which was right while every screen
   was padded out with its own white. Cropped to content they differ in
   length, and a fixed ratio left the short ones — the error state most of
   all — sitting on a slab of empty plate. Each frame now takes its screen's
   height; .row--screens still binds them by WIDTH, so the set keeps one
   scale and the row stays aligned at the top. */
.row--screens > .frame { aspect-ratio: auto; }

/* --- Version 1, as sent ---------------------------------------------------
   Four rows in one figure — desktop, tablet, then two of phones — under one
   caption. The device groups are separated by more than the rows within the
   phone group, so the set reads as three kinds of screen, not four rows.
   Every frame hugs its screen, as the phone rows above do: each row was
   cropped to one shared height, so the frames stay level without a fixed
   ratio leaving plate beneath them. */
.fish-v1 > .row + .row { margin-block-start: var(--sp-l); }
/* The second row of phones continues the first, so it takes the row gap. */
.fish-v1 > .row + .fish-v1__more {
  margin-block-start: var(--row-gap, clamp(var(--sp-s), 2vw, var(--sp-m)));
}
.fish-v1 .row > .frame { aspect-ratio: auto; }