/* ============================== HOW OSMIA GOT ITS NAME ==============================
   The founder explaining how the name happened, as prose on the one-day stage (the
   editorial pass, 2026-09-21). The page borrows its composition from Why and My story:
   an opening of words beside a picture, then reading movements at the document measure
   (.mv--read.mv--doc, 42rem, styles.css). Everything here is the page's own: the opening
   that holds the head and the first section on the left with the drawing on the right; the
   photograph as the one print inside the reading measure; the sources, quietly. Tokens,
   type (the document tier: html.page-doc), the veil, the print, links and the stage are
   styles.css's. */

/* ============================ 1 · THE DRAWING ============================ */
/* Words left, the drawing right, in the same first screen. Two columns share the left side (the head
   above the first section) so a phone can stand the drawing between them; on a desktop the drawing
   spans both rows and sits level with the head. */
#name-open.mv--name-open { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: max-content 1fr; align-items: start; column-gap: 5vw; row-gap: 0; }
#name-open .open__head { grid-column: 1; grid-row: 1; max-width: 40rem; }
#name-open .open__head .lede { max-width: 36rem; }
#name-open .open__story { grid-column: 1; grid-row: 2; max-width: 40rem; margin-top: 64px; }
#name-open .open__story > p { margin-top: 22px; } /* the reading movements' paragraph rhythm, inside the opening */
#name-open .open__story > h2 + p { margin-top: 20px; }
/* the drawing: the founder's photograph of the kept paper, at its own proportions. The site's print —
   one soft corner, a faint shadow off the sky — and nothing else: no filter touches the document. */
.drawing { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: start; width: min(35vw, 470px); margin: 0; margin-top: .55em; }
.drawing img { display: block; width: 100%; height: auto; border-radius: var(--radius-pic); box-shadow: var(--shadow-pic); }
.drawing figcaption { margin-top: 14px; text-align: left; }
.motion.sdt .drawing { animation: drift 1s linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; --lag: .55; }
.motion .mv--hero .drawing { animation-name: heroRise, drift; animation-duration: 520ms, 1s; animation-delay: 260ms, 0s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.16,1,.3,1), linear; animation-timeline: auto, view(); animation-range: normal, entry 0% exit 100%; animation-composition: replace, add; } /* the arrival on the clock, the drift on the scroll — as the site's print */

/* ============================== 3 · THE BEE ============================== */
/* A photograph inside the reading measure - the site's print: the bee between the paragraph that describes
   it and the one that says what it meant, the bee hotel in What I learned later (2026-10-02). The full
   column's width, as Science's prints (the 50rem measure, 2026-10-02). */
.bee-pic { position: relative; width: 100%; margin: 36px 0 0; padding: 0; border-radius: var(--radius-pic); box-shadow: var(--shadow-pic); }
.bee-pic img { display: block; width: 100%; height: auto; border-radius: inherit; }
.mv--name .col > .bee-pic + p { margin-top: 36px; }
/* the bee (2026-10-02), upright at 4:5: a narrower print, so it does not tower over the reading column and
   its 960px source stays sharp on a retina screen */
.bee-pic--upright { max-width: 26rem; }

/* ============================== 5 · THE SOURCES ============================== */
/* The site's label, then the citations at the fine size on soft rules — a note, not a bibliography */
.sources { margin-top: 64px; max-width: 40rem; }
.sources .label { margin: 0 0 12px; }
.sources__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.sources__list li { padding: 10px 0; border-bottom: 1px solid var(--rule-soft); font: 400 var(--fs-fine)/1.45 var(--sans); color: var(--ink-3); text-wrap: pretty; }
.sources__list li > a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-ink); padding-bottom: 1px; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.sources__list li > a:focus-visible { border-bottom-color: var(--ink); color: var(--ink); outline: 2px solid var(--honey-deep); outline-offset: 3px; }
@media (hover: hover) { .sources__list li > a:hover { border-bottom-color: var(--ink); color: var(--ink); } }

/* ================================ PHONES ================================ */
/* One column, in the story's order: the head, the drawing, the first section, then the reading
   movements. Nothing sticks, nothing scrolls sideways; the pictures stand at the column's width. */
@media (max-width: 880px) {
  #name-open.mv--name-open { grid-template-columns: 1fr; grid-template-rows: none; }
  #name-open .open__head, #name-open .open__story, .drawing { grid-column: 1; grid-row: auto; }
  .drawing { width: 100%; max-width: var(--region); justify-self: center; margin-top: 36px; } /* the column's region (2026-09-30): on a tablet the drawing hugged the gutter while the words stood centred */
  .drawing img { max-width: 360px; } /* the site's phone print width, near enough: the pen strokes stay legible */
  #name-open .open__story { margin-top: 44px; }
  .bee-pic { margin-top: 28px; }
  .mv--name .col > .bee-pic + p { margin-top: 28px; }
  .sources { margin-top: 52px; }
}

/* ======================= THE STILL PAGE, ON A PHONE ======================= */
/* Reduced motion (or no scroll timelines): the bee perches in the hero at the stage's fixed spot,
   which on this page lands on the lede's last word. Here the perch becomes its own row instead -
   between the lede and the drawing, where the bee lands when the conductor flies it (2026-09-21). */
@media (max-width: 880px) {
  html:not(.motion.sdt) #name-open .hero__perch { position: relative; inset: auto; grid-column: 1; grid-row: 2; justify-self: end; width: 46px; height: 72px; margin: 10px 4vw 0 0; }
  html:not(.motion.sdt) #name-open .open__head { grid-row: 1; }
  html:not(.motion.sdt) #name-open .drawing { grid-row: 3; margin-top: 14px; }
  html:not(.motion.sdt) #name-open .open__story { grid-row: 4; }
}