/* ============================================================
   SECTION 3  -  THE FLOW                            2026-08-21

   Four steps, each carrying a photograph.

   WHAT CAME OUT, AND WHY IT IS RECORDED. This section was four glass
   cards with outline icons on them, and it went through four rounds of
   tuning - a bloom behind the row, a gradient rim, a specular streak, a
   pointer-tracked tilt - each of which the owner rejected on sight. The
   effects were never the problem. Two defects underneath them were:

     1. ICONS INSTEAD OF PICTURES. An icon is a label for a thing, and a
        label is not evidence. The competitor's grid works because every
        cell holds a picture and the pictures vary in kind. Ours were four
        thin glyphs, one colour, one size, so the row read as four blobs.
     2. NO VALUE CONTRAST. Near-white cards on warm paper measured a couple
        of points apart. This section had ALREADY been fixed for exactly
        that once, at 629ac30, where a card measured 1.072:1 and the ground
        was darkened to rescue it. Going near-white put it straight back.

   Both are fixed here by the same move: a photograph is dark, so it makes
   its own contrast, and it carries information no glyph can.

   THE GROUND IS LINEN, not paper-3. The cards are paper. That is a real
   value step, so a card is a card before any border or shadow is applied.

   NO GLASS, NO TILT. sections/how.js lost about seventy lines of pointer
   tracking with this change - an effect that only ever existed on a mouse,
   on a page whose visitors are mostly on phones.

   Scoped with #how throughout: a bare class selector loses to any
   id-scoped rule elsewhere in the build, and it fails silently.
   ============================================================ */

#how{background:var(--linen)}
#how .wrap{display:block}

#how .flow4{
  list-style:none; margin:clamp(26px,3.4vw,44px) auto 0; padding:0;
  display:grid; gap:clamp(14px,1.8vw,20px);
  max-width:1080px;
}

#how .fstep{
  display:flex; flex-direction:column;
  background:var(--paper);
  border-radius:18px;
  overflow:hidden;                       /* the picture takes the corner */
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 2px rgba(6,22,46,.10),
    0 14px 24px -14px rgba(6,22,46,.34);
}

/* ---------- the picture ---------- */
/* OVERFLOW:HIDDEN LIVES HERE, and that is the whole of a bug worth naming.
   It used to be only on .fstep, so a crop scaled past 1.0 was clipped at
   the CARD edge rather than at the picture's own edge: the image spilled
   down into the words, every card spilled a different amount because every
   crop has a different scale, and the four picture bottoms came out at
   four different heights with the headings sitting on top of photographs.
   Clipping at the figure makes the frame the frame. */
#how .fstep__pic{
  margin:0; position:relative; line-height:0;
  overflow:hidden;
  background:var(--night);               /* under a loading image, never white */
}
#how .fstep__pic img{
  display:block; width:100%; height:100%;
  aspect-ratio:4 / 3; object-fit:cover;
}

/* STEPS 1 AND 4 ARE THEIR OWN PHOTOGRAPHS, generated 2026-08-21.

   They used to be two crops of ONE portrait - the same woman who is also
   the sender in section 5, so she appeared three times on one page, twice
   of them side by side. The owner caught it twice. A tight crop that hid
   her face only made it worse: a headless torso is not a person doing
   something.

   Now: a man at a kitchen counter sending, and the SAME man on a sidewalk
   reading the reply. Same person across steps one and four is deliberate -
   you send, and you are the one who gets the answer - and the two scenes
   are far enough apart to read as two moments rather than one photograph
   used twice. He is nobody else on this page.

   Both are square, framed at generation time, so they need no crop rules;
   object-fit:cover takes the 4:3 window out of the middle. */

/* STEPS 2 AND 3 ARE REAL PHOTOGRAPHS NOW, generated 2026-08-21.

   What stood here dimmed one product shot with a brightness filter and
   called it "unlit", so step 2 was step 3 with the lights turned down -
   the owner spotted it immediately. The library had no unlit room and no
   photograph of anybody hearing the thing, because every human scene we
   own was already somewhere else on this page.

   So they were made: an empty room with the speaker dark on a side table,
   and a couple laughing at what they have just heard. The filter, the
   scrim and the two reframing rules all came out with them. */


/* The reply shot is framed on the hand and the phone rather than the
   whole figure, so it reads as the message arriving and not as a second
   portrait beside the one in step one. */

/* CARD 3 IS NUDGED, NOT RECROPPED. A tight file crop was tried and the
   owner was right to reject it: it made his head fill the card and pushed
   the device out of proportion with the other three. The ask was "more of
   the device, not all of it".

   The window shows 60.4% of a 928x1152 portrait, so object-position y is
   the only lever: 44% is the lowest that keeps any device, 68% the highest
   that keeps his head whole. 62% sits near the bottom of that range - his
   head intact, and the top two thirds of the lit device in frame. */
#how .fstep__pic--him img{object-position:50% 62%}

/* ---------- the words ---------- */
#how .fstep__txt{
  padding:clamp(16px,1.7vw,20px) clamp(16px,1.7vw,20px) clamp(18px,2vw,22px);
  flex:1;
  position:relative; z-index:1;
  background:var(--paper);   /* belt and braces: type never shares a pixel
                                with a photograph, whatever a crop does */
}
#how .fstep h3{
  margin:0; font-family:var(--display); font-weight:500;
  font-size:clamp(19px,1.6vw,21px); line-height:1.14; letter-spacing:-.016em;
  color:var(--ink); text-wrap:balance;
}
#how .fstep p{
  margin:7px 0 0; font-size:14.5px; line-height:1.5; color:var(--ink-2);
}

@media (min-width:900px){
  #how .flow4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:620px) and (max-width:899px){
  #how .flow4{grid-template-columns:1fr 1fr}
}
/* Stacked, a 4:3 picture on top of every card runs the section past three
   screens. Wider and shorter, so four steps stay one scroll. */
@media (max-width:619px){
  #how .fstep__pic img{aspect-ratio:16 / 9}
}

html.no-js #how .rv,
.rv-force #how .rv{opacity:1; transform:none; transition:none}
@media (prefers-reduced-motion:reduce){
  #how .rv{transition:none}
}