/* ===========================================================================
   INERA Connection — utravalo.css
   Page-specific additions for /utravalo.html. Two things the shared stylesheet
   does not give the writing index: an opening photograph, and a card that is
   cut rather than ruled.

   No new colour, no new typeface, no new stroke width, no shadow, no gradient.
   Everything below reads existing tokens only, and the CSS-only filter in
   site.css is untouched — nothing here declares `display` on a card.
   =========================================================================== */

/* ------------------------------------------------------- opening photograph */
/* A handwritten word carried on the skin: the page's own útravaló. Cut by
   #shape-seed — the one flowing outline no other page applies to this picture,
   so the two pages that share the file do not read as the same block twice.
   Wider than the reading measure, left-aligned to the trunk, so it opens the
   page instead of illustrating a paragraph. */

.ground--seedcut {
  width: min(100%, 44rem);
  margin-block: var(--space-xl) var(--space-l);
  /* it sits on Paper, already lit; the drop only finishes the last few percent */
  --lit-floor: 88;
  --lit-gain: 0.12;
}

.ground--seedcut img { clip-path: url(#shape-seed); }

/* On a phone the seed runs to both edges of the page, the way the arrival's
   path photograph does — a cut outline needs room to be read as a cut. */
@media (max-width: 40rem) {
  .ground--seedcut {
    width: calc(100% + var(--pad-start) + var(--pad-end));
    margin-inline-start: calc(var(--pad-start) * -1);
    margin-inline-end: calc(var(--pad-end) * -1);
    margin-block: var(--space-l);
  }
}

/* ------------------------------------------------------------------- cards */
/* site.css holds a card together with one straight rule across its top. Nine of
   them on a three-column grid read as a half-drawn table: same rule, same
   corner, same baseline, nine times.

   Here the card is a closed, water-cut surface instead — one hairline outline
   whose corners are lifted from the site's own cut-outs. Five silhouettes cycle
   through the list; five is coprime with both the two-column and the
   three-column grid, so no row ever repeats the row above it. The radii are
   elliptical (the `/` form), because a circular corner reads as a rounded box
   and an elliptical one reads as something that was cut by water.

   Nothing is clipped. The outline is a border on a normal box, so no line of
   type can ever be eaten by the shape; the padding is set so that even a
   descender on the last line stays inside the largest corner. */

/* Content height, not row height. Equal-height boxes are what made the grid
   read as a table — the bottoms have to be as ragged as the sentences are. */
.card-grid { align-items: start; }

/* The empty-category line already asks for its own row in site.css
   (`flex: 1 0 100%`), but a <p> also inherits `max-width: var(--measure)` from
   tokens.css, which clamps it back inside the space left on the label row — so
   "Hamarosan." lands next to `Podcastok` and reads as a fifth filter. It
   belongs where the cards are. Page-scoped, and this is the only page on the
   site with a filter. Nothing about which line appears when changes. */
.filter__empty { max-width: 100%; }

.card {
  /* The shared cut-out vocabulary, as three corner sizes. The vertical radius
     is deliberately much shorter than the horizontal one: a circular corner
     reads as a rounded box, a long shallow ellipse reads as a cut. */
  --r-base: clamp(3.25rem, 1.8rem + 4.2vw, 5.5rem);
  /* each silhouette cuts at a slightly different scale, so the five are not
     one shape turned five ways */
  --r-lg: calc(var(--r-base) * var(--r-scale, 1));
  --r-md: 2.5rem;
  --r-sm: 1.5rem;
  --r-lg-v: calc(var(--r-lg) * 0.62);
  --r-md-v: calc(var(--r-md) * 0.72);

  padding: var(--space-m) var(--space-m) var(--space-l);
  /* replaces the straight top rule from site.css: one closed outline, at the
     same Murray width the rule used. */
  border: var(--stroke-d2) solid var(--line);
  transition: border-color 240ms ease;
}

/* 01 — the seed: the whole weight in the top-right, where the card carries
   nothing but the short date line. */
.card:nth-child(5n + 1) {
  --r-scale: 1;
  border-radius: var(--r-sm) var(--r-lg) var(--r-md) var(--r-lg)
               / var(--r-sm) var(--r-lg-v) var(--r-md-v) var(--r-lg-v);
}

/* 02 — the drop: gathers toward the bottom-right, the way the mark does. */
.card:nth-child(5n + 2) {
  --r-scale: 0.86;
  border-radius: var(--r-md) var(--r-sm) var(--r-lg) var(--r-sm)
               / var(--r-md-v) var(--r-sm) var(--r-lg-v) var(--r-sm);
}

/* 03 — the arch: #shape-arch's own proportions, a sweeping top over quiet
   bottom corners. The top is the one place a corner may be tall as well as
   wide, because nothing but the icon stands there. */
.card:nth-child(5n + 3) {
  --r-scale: 1.06;
  border-radius: var(--r-lg) var(--r-lg) var(--r-md) var(--r-md)
               / calc(var(--r-lg) * 0.8) calc(var(--r-lg) * 0.8)
                 var(--r-md-v) var(--r-md-v);
}

/* 04 — the lobe, flipped: the bite sits at the bottom-left, under the ragged
   end of the sentence. */
.card:nth-child(5n + 4) {
  --r-scale: 1.14;
  border-radius: var(--r-md) var(--r-md) var(--r-sm) var(--r-lg)
               / var(--r-md-v) var(--r-md-v) var(--r-sm) var(--r-lg-v);
}

/* 05 — the boulder: no two corners alike, none of them square. */
.card:nth-child(5n + 5) {
  --r-scale: 0.92;
  border-radius: var(--r-lg) var(--r-md) var(--r-lg) var(--r-sm)
               / var(--r-lg-v) var(--r-md-v) var(--r-md-v) var(--r-sm);
}

/* The outline answers the same way the icon already does. */
.card:hover,
.card:focus-within { border-color: var(--ink-muted); }

/* The excerpt is one sentence now, so it no longer needs its own narrower
   measure inside an already narrow card. */
.card__excerpt { max-width: none; }

/* The icon sat against a rule; now it sits inside a shape, so it needs the
   same air the text has — and on the two silhouettes whose top-left corner is
   a long sweep, it steps in to follow the curve instead of crossing it. */
.card__icon { margin-block-end: var(--space-xs); }

.card:nth-child(5n + 3) .card__icon,
.card:nth-child(5n + 5) .card__icon { margin-inline-start: var(--space-s); }

/* Grown, not stamped: the cards do not start on one line. The offsets are tied
   to the column count, so a row is never a row of three identical tops.
   (Every filter state on this page shows either all nine cards or none, so the
   order the offsets follow is always the order that is on screen.) */
@media (min-width: 40rem) and (max-width: 67.99rem) {
  .card:nth-child(2n + 2) { margin-block-start: var(--space-m); }
}

@media (min-width: 68rem) {
  .card:nth-child(3n + 2) { margin-block-start: var(--space-l); }
  .card:nth-child(3n + 3) { margin-block-start: var(--space-m); }
}

/* At 320px a card is nearly the full width of the page: the corners come in a
   little so the measure inside them stays readable. */
@media (max-width: 25rem) {
  .card {
    --r-md: 1.75rem;
    --r-sm: 1.15rem;
    padding: var(--space-s) var(--space-s) var(--space-m);
  }
}

/* client 2026-08: give the content-index heading room after the intro prose. */
.prose + h2 { margin-block-start: var(--space-2xl); }