/* ================================ ABOUT US ================================
   Lisa and Balder, on the one-day stage: four movements, one shared
   undertaking, portrait-free. Everything here is the page's own — the
   opening as words and morning light (the sun composed at the right, where
   the portrait will later stand), the two of them beside each other under
   one rule in the founder story, each legible by name, the narrower,
   quieter passage on how they approach the work, and the company opening
   outward with the door to the App. Tokens, type (the document tier:
   html.page-doc — the three chapter heads at one size), buttons, links, the
   veil, the rhythm and the stage are styles.css's. One face carries the headings,
   the two names and the explanation. The dandelion band of
   the About family; no decorative element competes with the people. */

/* ============================ 1 · WE'RE LISA AND BALDER ============================ */
/* words only: the site's hero shape (words left, the object right) with the morning sun as the object.
   The measure is a step fuller than a hero beside a print, so the words hold the left half. */
.mv--meet .col { max-width: 38rem; }
.mv--meet .col .lede { max-width: 34rem; }
.mv--meet .col .intro { margin-top: 22px; max-width: 32rem; }

/* ============================ 2 · WHAT WE BRING TO OSMIA ============================ */
/* one continuous story at the paper's measure; the two of them beside each other under one rule */
.mv--bring .col > .lede { max-width: 40rem; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3.5rem; margin-top: 36px; padding: 28px 0 32px; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-soft); }
/* a person: the name in the display face at a reading size, one line of fact under it in the
   explanation face, then the approved passage — the same three parts for both, no box, no badge */
.person__name { font: var(--display-weight) var(--fs-h3-display)/1.25 var(--display); letter-spacing: var(--track-h3); color: var(--ink); margin: 0; text-wrap: balance; }
.mv--read .pair .person__name { margin: 0; }
.person__fact { margin: 8px 0 0; font: 500 var(--fs-small)/1.4 var(--sans); color: var(--ink-3); }
.person > p:not(.person__fact) { margin-top: 14px; max-width: 26rem; }
/* the shared close returns to the one voice under the pair's closing rule */
.mv--bring .col > .both { margin-top: 30px; max-width: 40rem; }
.mv--bring .col > .both + p { max-width: 40rem; }

/* ============================ 3 · HOW WE APPROACH THE WORK ============================ */
/* narrower and quieter: a shorter measure, the links in a row */
.mv--approach .col--narrow { max-width: 36rem; }
.mv--approach .col > p { max-width: 32rem; }
.mv--approach .links .link { margin-top: 30px; }

/* ============================ 4 · THE COMPANY WE'RE BUILDING ============================ */
/* the page opens outward again: the full measure, the golden light, and the door */
.mv--company .col > .lede { max-width: 40rem; }
.mv--company .col > p { max-width: 40rem; }
.door { margin-top: 36px; gap: 14px 28px; }
/* the address: the site's fine size, the mail link on the editorial hairline */
.reach { margin-top: 34px; }
.reach a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-ink); padding-bottom: 2px; } /* the reading ink, not the fine print's: 4.42:1 in transit over the band at --ink-3 */
.reach a { transition: border-color var(--dur-short) var(--ease-out); }
.reach a:focus-visible { border-bottom-color: var(--ink); }
@media (hover: hover) { .reach a:hover { border-bottom-color: var(--ink); } }
.reach a:focus-visible { outline: 2px solid var(--honey-deep); outline-offset: 3px; }
/* the text links that are the page's exits gain a finger's worth of hit area without changing their look */
.mv--approach .link, .mv--company .link { position: relative; }
.mv--approach .link::after, .mv--company .link::after { content: ""; position: absolute; left: -6px; right: -6px; top: -12px; bottom: -12px; }

/* PHOTOGRAPHY LATER — the second planned place (the first is the site's own .hero__pic in the
   opening). A documentary image in the company movement, as the column's last child before the
   door: the site's print, 3:2, the column's width. Nothing renders until the <figure> exists in the fragment. */
.pic--company { margin: 40px 0 0; max-width: 40rem; border-radius: var(--radius-pic); box-shadow: var(--shadow-pic); }
.pic--company img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: inherit; filter: saturate(calc(var(--sat) * .92)); }
.pic--company figcaption { padding: 12px 0 0; }

/* ================================ PHONES ================================ */
@media (max-width: 880px) {
  .mv--meet .col, .mv--meet .col .lede, .mv--meet .col .intro { max-width: 34rem; }
  /* the two of them in reading order, each with the same three parts */
  .pair { grid-template-columns: 1fr; row-gap: 28px; margin-top: 30px; padding: 22px 0 26px; }
  .person > p:not(.person__fact), .mv--approach .col > p { max-width: 34rem; }
  .mv--bring .col > .both { margin-top: 26px; }
}