/* ===========================================================================
   INERA Connection — ismerj-meg.css
   Page-specific additions for /ismerj-meg.html. What the shared stylesheet
   does not give an interior page:

     1. an opening block that shares its first screen with the portrait, the
        way the arrival shares its screen with the path photograph
        (`.arrival__first` is the home page's own and does not reach here);
     2. one photograph per story block — the intro portrait above the fold,
        one floated beside the top of "Amit ma magammal hozok", one standing
        alone and bleeding off the page ahead of "Ahogyan melletted vagyok",
        and one floated beside "Ami számomra hivatássá vált" — each cut by a
        different flowing outline so the four photographs never repeat a
        shape.

   No new colour, typeface or stroke width — every value below reads a token
   that already exists, and every cut is one the shared `<defs>` block
   already ships. */

/* The opening band starts high: the portrait has to share the first screen
   with the title, so this one section cannot open on the full --space-3xl the
   other bands do. The arrival does the same — its top padding is zero. */
.meet-open { padding-block-start: var(--space-l); }

/* Words left, face right — one screen, two halves, the arrival's proportions.
   The two columns are even: the headline needs no more width than it has, and
   every pixel the text column gives up the face gets back. */
.meet__first {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: var(--space-xl) clamp(1.5rem, 4vw, 3.5rem);
  margin-block-end: var(--space-2xl);
}

/* the grid owns the spacing under the opening now */
.meet__first .pageintro { margin-block-end: 0; }

/* The portrait keeps the seed cut it wears on the home page. It is above the
   fold here, so there is no scroll left to resolve it with: it arrives lit.

   Two things give her presence without pushing the headline down. The box
   takes the whole photo column and is capped in `svh`, not in `rem`, so it
   grows to whatever the first screen can actually spare and never spills past
   the fold on a short laptop. And the frame closes on her — the file is a
   two-thirds portrait with a lot of floor under it, so at 82/100 the same box
   holds a noticeably larger person. `.ground--window` and `.ground--bowl`
   trim their files the same way. */
.meet__portrait {
  width: min(100%, 34rem, 52svh);
  justify-self: end;
  --lit-floor: 100;
  --lit-gain: 0;
}

.meet__portrait img {
  clip-path: url(#shape-seed);
  aspect-ratio: 82 / 100;
  object-fit: cover;
  /* hold the head and the cup; the trim comes off the floor */
  object-position: 50% 22%;
}

/* Narrow: the two halves become one column, and the portrait rises to sit
   between the title and the lede so it still shares the first screen. The
   headline leads; the face answers it; the lede follows at full width.
   `display: contents` on .pageintro is what lets the figure take that place
   without moving in the source order. */
@media (max-width: 58rem) {
  /* stacked, the first screen is scarce: the band opens tighter still */
  .meet-open { padding-block-start: var(--space-s); }

  .meet__first {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-block-end: var(--space-xl);
  }

  .meet__first .pageintro { display: contents; }
  .meet__first .whisper { order: 1; }
  .meet__first h1 { order: 2; }
  .meet__portrait { order: 3; }
  .meet__first .lede { order: 4; }

  /* Stacked, the picture is bounded by the screen it has to share as much as
     by the column it stands in — hence the third term, a width derived from
     the height the portrait may take (82/100 after the trim, so height is
     width x 1.22). It still stops short of the screen edges the way the
     mid-page photographs do not: what has to survive here is the lede under
     it, and a picture that runs the full width of a phone takes the lede with
     it. The `svh` term is what holds that line — it shrinks with the screen
     instead of waiting for a breakpoint. */
  .meet__portrait {
    width: min(76%, 26rem, 38svh);
    justify-self: start;
    margin-block-end: var(--space-l);
  }
}

@media (max-width: 40rem) {
  .meet__portrait {
    width: min(74%, 20rem, 34svh);
    margin-block-end: var(--space-m);
  }
}

/* The closing line before the button is no longer part of this band: it opens
   the page's one warm band instead (`.section--sand`, the block after
   `.meet-open`), where the band's own top padding gives it far more air than a
   margin ever did. The rule that used to hold it off the essay
   (`.meet-open .prose + p`) has nothing left to select and is gone with it. */

/* --------------------------------------------------------- hozok — beside */
/* "Amit ma magammal hozok" gets its photograph beside the block's own
   opening, not standing alone ahead of it: the figure is the first child
   after the <h2> inside `.prose`, floated right, so the paragraphs that
   follow wrap its top edge before running full width again once the text
   outgrows it. #shape-lobe's three-wave cut sits on the LEFT of its own
   frame, so floated right that is the edge the text actually meets — an
   organic seam instead of a straight column rule. Portrait-ish at 88/100
   because the source file is landscape and wide (a seated, three-quarter
   pose with room either side); the crop favours her over the plant behind
   her, hence the off-centre object-position. */
.meet__hozok-photo {
  float: right;
  width: clamp(13rem, 46%, 19rem);
  margin: 0 0 var(--space-m) var(--space-l);
  --lit-floor: 92;
  --lit-gain: 0.08;
}

.meet__hozok-photo img {
  clip-path: url(#shape-lobe);
  aspect-ratio: 88 / 100;
  object-fit: cover;
  /* hold her face, hands and knee; the crop comes off the plant on the left */
  object-position: 66% 46%;
}

/* A float inside `.prose` does not, by itself, make the block tall enough to
   contain it — without this the next element in the section could ride up
   under the still-floating photograph. Standard clearfix, scoped to only the
   two blocks that actually float a figure. */
.meet__hozok-block::after,
.meet__hivatas-block::after {
  content: '';
  display: table;
  clear: both;
}

/* A slight lift for the line the block turns on — larger than body copy and
   set in the display italic, the same quiet register `.subtitle` and
   `.stance__line` use elsewhere on the site, but still one sentence among
   its neighbours rather than a pulled-out quote. */
.meet__pride {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: var(--step-2);
  color: var(--ink);
}

/* ------------------------------------------------------------ melletted */
/* "Ahogyan melletted vagyok" opens on integrative presence — close, unhurried
   attention. The client asked for this photograph wide, so it now carries
   the one bleed-off-the-page move the deleted wrist photograph used to own:
   same #shape-sweep S-cut, same run past the right edge. It still stands
   alone, mid-flow, between the two prose blocks either side of it — the
   page's other two photographs sit inside their text instead. */
.meet__melletted {
  width: min(72%, 40rem);
  margin-inline: auto;
  margin-block: var(--space-2xl);
  --lit-floor: 88;
  --lit-gain: 0.12;
}

.meet__melletted img {
  clip-path: url(#shape-sweep);
  aspect-ratio: 100 / 50;
  object-fit: cover;
  /* the tattoo and wrist sit just above centre; the trim comes off top and bottom */
  object-position: 50% 40%;
}

/* At this width the wide cinematic ratio above would leave almost nothing of
   the arm standing — the frame closes back toward the source file's own
   proportions instead of trimming further. */
@media (max-width: 40rem) {
  .meet__melletted {
    margin-block: var(--space-xl);
  }
  .meet__melletted img {
    aspect-ratio: 100 / 70;
    object-position: 50% 42%;
  }
}

/* -------------------------------------------------------------- hivatás */
/* "Ami számomra hivatássá vált" closes the essay on the boundary she now
   holds for others — see the figure declared beside the block's own <h2>,
   above the paragraphs it introduces (`.meet__hivatas-photo`, floated left).
   Nothing standalone remains at this position; both of the essay's later
   turns now carry their photograph inside the text rather than ahead of it.
   Portrait file, only lightly cropped: #shape-boulder closes on all sides
   without eating the shoulders the way a corner-cut would. */
.meet__hivatas-photo {
  float: left;
  width: clamp(11rem, 40%, 16rem);
  margin: var(--space-s) var(--space-l) var(--space-l) 0;
  --lit-floor: 100;
  --lit-gain: 0;
}

.meet__hivatas-photo img {
  clip-path: url(#shape-boulder);
  aspect-ratio: 72 / 100;
  object-fit: cover;
  /* hold the face; the trim comes off the outstretched arm below it */
  object-position: 50% 20%;
}

/* On a phone there is no reading measure left to wrap a float around — both
   new portraits stand centred and full width instead, same as every other
   ground on this page below 40rem. Declared last on purpose: it has to
   follow both base rules above it in the cascade to win the tie on
   specificity. */
@media (max-width: 40rem) {
  .meet__hozok-photo,
  .meet__hivatas-photo {
    float: none;
    width: min(70%, 16rem);
    margin: 0 auto var(--space-m);
  }
}

/* client 2026-08: give the closing "Ami számomra hivatássá vált" block air so
   it does not run straight into the block above it. */
.meet__hivatas-block { margin-block-start: var(--space-xl); }

/* client 2026-08: separate the closing link from the WhatsApp button in the
   sand band so they no longer nearly touch. */
.section--sand .act + p { margin-block-start: var(--space-m); }

/* client 2026-08: keep this link beside the floated portrait instead of letting
   its second line clear the float and wrap under the image at the image's left
   edge. A block formatting context sits next to a float and never overlaps it,
   so both lines of the link stay to the right of the picture. */
.meet__egyesulet-link { display: flow-root; }