/* stem.css — the journey pieces (owner: the stem builder).
   Loaded on every page after components.css, unlayered, so it wins over the design system.

   1  Shared plumbing: which petal colour shows on which ground
   2  .event-frame     a photograph held to its safe crop rectangle
   3  .event-chip      the focus-area chip
   4  .evidence        petal rows of events (partial: evidence)
   5  .event-card      one event as a card (partial: event-card)
   6  .event-entry     one event in full (partial: event-entry)
   7  .stem            the journey stem: one line, a bud per event (partial: stem)

   Motion: transforms and opacity only. Anything hidden until it is animated is hidden only under
   html.js, only when motion is allowed, and comes back by itself if the script never arrives. */

/* ───────────────────────────────────────────── 1 Shared plumbing ──
   On a light ground a row's petal takes the colour of its own event. On a solid ground it must be the
   one colour that shows there (the tone's --p1). A custom property carries that down from the nearest
   toned ancestor, whichever way tones are nested. */
:is(.tone-forest, .section--forest, .panel--forest, .tone-forest-deep, .section--forest-deep, .panel--forest-deep,
    .tone-gold, .section--gold, .panel--gold, .tone-clay, .section--clay, .panel--clay,
    .tone-blue, .section--blue, .panel--blue, .tone-plum, .section--plum, .panel--plum,
    .tone-sage, .section--sage, .panel--sage) { --event-petal: var(--p1); }
:is(.tone-bone, .section--bone, .panel--bone, .tone-white, .section--white, .panel--white,
    .tone-mist-forest, .section--mist-forest, .panel--mist-forest, .tone-mist-gold, .section--mist-gold, .panel--mist-gold,
    .tone-mist-clay, .section--mist-clay, .panel--mist-clay, .tone-mist-blue, .section--mist-blue, .panel--mist-blue,
    .tone-mist-plum, .section--mist-plum, .panel--mist-plum, .tone-mist-sage, .section--mist-sage, .panel--mist-sage) { --event-petal: initial; }

/* ───────────────────────────────────────────────── 2 Event frame ──
   The picture is sized and placed so that exactly the crop rectangle of the photo index fills the
   frame (--cw, --ch: how much larger than the frame the whole picture is; --cx, --cy: where it sits).
   Photographs are never mirrored, so the picture's own box is always laid out left to right. */
.event-frame:not(.frame--rim) > picture { position: relative; }
.event-frame > picture { direction: ltr; }
.event-frame img {
  position: absolute;
  inset-block-start: var(--cy, 0%);
  inset-inline-start: var(--cx, 0%);
  inline-size: calc(100% * var(--cw, 1));
  block-size: calc(100% * var(--ch, 1));
  max-inline-size: none;
  object-position: 50% 50%;
}

/* ────────────────────────────────────────────────── 3 Focus chip ──
   <p class="event-chip c-gold"><span class="medallion medallion--solid event-chip__icon">…</span><span>Empowering Youth</span></p>
   As a link (the Journey entries): <a class="event-chip" href="…">. */
.event-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  max-inline-size: 100%;
  min-block-size: 2.75rem;
  padding-block: .3rem;
  padding-inline: .35rem 1.1rem;
  border-radius: var(--r-row);
  background: var(--row);
  color: var(--fg);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  text-decoration: none;
}
.event-chip__icon { --size: 2.125rem; }
.event-chip__icon > .icon { inline-size: 1.25rem; block-size: 1.25rem; }
a.event-chip { transition: background-color var(--dur-2) ease, scale var(--dur-1) var(--ease-out); }
a.event-chip:active { scale: .97; }
a.event-chip .event-chip__icon { transition: rotate var(--dur-4) var(--ease-pop); }
@media (hover: hover) and (pointer: fine) {
  a.event-chip:hover { background: var(--c-mist); }
  a.event-chip:hover .event-chip__icon { rotate: calc(var(--dir) * 60deg); }
}

/* ──────────────────────────────────────────────────── 4 Evidence ──
   Petal rows of events. Each row is one link (the title carries it). */
.evidence { inline-size: 100%; container-type: inline-size; }
.evidence__row {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  row-gap: .15rem;
  transition: scale var(--dur-1) var(--ease-out);
}
.evidence__row > * { grid-column: 2; max-inline-size: none; }
.evidence__row::before {
  grid-row: 1;
  background: var(--event-petal, var(--c));
  transform-origin: 50% 82%;
  transition: rotate var(--dur-4) var(--ease-pop);
}
.petal-rows > .evidence__row:is(.c-forest, .c-gold, .c-clay, .c-blue, .c-plum, .c-sage)::before { background: var(--event-petal, var(--c)); }
.evidence__date {
  color: var(--fg-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums lining-nums;
}
.evidence__title { color: var(--heading); font-weight: var(--fw-strong); line-height: var(--lh-sub); text-wrap: balance; }
.evidence__title > a { color: inherit; font-weight: inherit; text-decoration: none; }   /* a link with no class is set medium by the base: the title keeps its own weight */
.evidence__title > a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-row); }
.evidence__title > a:focus-visible { outline: none; }
.evidence__title > a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; }
.evidence__role { margin-block-start: .2rem; color: var(--fg-muted); }
.evidence__go {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-inline-start: .35rem;
  border-radius: 50%;
  background: var(--bg);
  color: var(--link);
  transition: translate var(--dur-3) var(--ease-out);
}
.evidence__go > .icon { inline-size: 1.15rem; block-size: 1.15rem; }
.evidence__row[class*="tone-"] .evidence__go { background: var(--row); }
.evidence__row:active { scale: .99; }
@media (hover: hover) and (pointer: fine) {
  .evidence__row:hover::before { rotate: calc(var(--dir) * 60deg); }
  .evidence__row:hover .evidence__go { translate: calc(var(--dir) * .3rem) 0; }
  .evidence__row:hover .evidence__title > a { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: var(--underline-offset); }
}
/* Given room, the date stands in its own column, so a list reads as a dated record. */
@container (min-width: 38rem) {
  .evidence__row { grid-template-columns: auto 10.5rem minmax(0, 1fr) auto; column-gap: 1rem; }
  .evidence__row > .evidence__date { grid-column: 2; grid-row: 1 / span 2; padding-block-start: .1em; }   /* a date on two lines (Russian) must not push the line under a one-line title away */
  .evidence__row > :is(.evidence__title, .evidence__role) { grid-column: 3; }
  .evidence__row > .evidence__go { grid-column: 4; }
}
/* A toned row inside a ground of the same tone would vanish: it takes that ground's row tint instead. */
:is(.tone-forest, .section--forest, .panel--forest) .evidence__row.tone-forest,
:is(.tone-forest-deep, .section--forest-deep, .panel--forest-deep) .evidence__row.tone-forest-deep,
:is(.tone-gold, .section--gold, .panel--gold) .evidence__row.tone-gold,
:is(.tone-clay, .section--clay, .panel--clay) .evidence__row.tone-clay,
:is(.tone-blue, .section--blue, .panel--blue) .evidence__row.tone-blue,
:is(.tone-plum, .section--plum, .panel--plum) .evidence__row.tone-plum,
:is(.tone-sage, .section--sage, .panel--sage) .evidence__row.tone-sage,
:is(.tone-white, .section--white, .panel--white) .evidence__row.tone-white,
:is(.tone-mist-forest, .section--mist-forest, .panel--mist-forest) .evidence__row.tone-mist-forest,
:is(.tone-mist-gold, .section--mist-gold, .panel--mist-gold) .evidence__row.tone-mist-gold,
:is(.tone-mist-clay, .section--mist-clay, .panel--mist-clay) .evidence__row.tone-mist-clay,
:is(.tone-mist-blue, .section--mist-blue, .panel--mist-blue) .evidence__row.tone-mist-blue,
:is(.tone-mist-plum, .section--mist-plum, .panel--mist-plum) .evidence__row.tone-mist-plum,
:is(.tone-mist-sage, .section--mist-sage, .panel--mist-sage) .evidence__row.tone-mist-sage { background: var(--row); }
:is(.tone-forest, .section--forest, .panel--forest) .evidence__row.tone-forest .evidence__go,
:is(.tone-gold, .section--gold, .panel--gold) .evidence__row.tone-gold .evidence__go,
:is(.tone-clay, .section--clay, .panel--clay) .evidence__row.tone-clay .evidence__go,
:is(.tone-blue, .section--blue, .panel--blue) .evidence__row.tone-blue .evidence__go,
:is(.tone-plum, .section--plum, .panel--plum) .evidence__row.tone-plum .evidence__go,
:is(.tone-sage, .section--sage, .panel--sage) .evidence__row.tone-sage .evidence__go { background: var(--bg); }

/* ────────────────────────────────────────────────── 5 Event card ──
   The foundation's .card, with the event's own furniture. */
.event-card { gap: 1rem; align-content: start; }
.event-card > .event-card__figure { margin-block-end: 0; }
.event-card__figure { display: grid; gap: .7rem; inline-size: 100%; max-inline-size: var(--max, 25rem); margin: 0; }
.event-card__figure > figcaption { grid-template-columns: minmax(0, 1fr); max-inline-size: none; }
.event-card__figure > figcaption::before { content: none; }
.event-card__body { display: grid; gap: .55rem; justify-items: start; align-content: start; min-inline-size: 0; }
.event-card__body > * { max-inline-size: 100%; }
.event-card__meta { color: var(--heading); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums lining-nums; }
.event-card__meta::before { background: var(--event-petal, var(--c)); transform-origin: 50% 82%; transition: rotate var(--dur-4) var(--ease-pop); }
.event-card__title { text-wrap: balance; }
/* The base sets a link that has no class in the medium weight. Gabarito has no medium, so in Latin the
   title stayed bold by accident; in Russian, Thai and the other scripts it really went light. */
.event-card__title > a { font-weight: inherit; }
.event-card__place {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .45rem;
  color: var(--fg-muted);
  font-size: var(--fs-small);
  line-height: max(1.5, calc(var(--lh-text) - .15));
}
.event-card__place > .icon { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: calc((1lh - 1.25rem) / 2); }
.card.event-card > .event-card__body > .event-card__summary { color: var(--fg-muted); }
.event-card .event-chip { margin-block-start: .35rem; }
.event-card__more { margin-block-start: -.1rem; }
.event-card__more > .link-petal { min-block-size: 2.5rem; }
.event-plate { --ar: 3 / 2; }
/* The date stands in a square corner of the leaf, and the leaf's round corner is on the same edge: a
   third of the width, half of the height. A date that runs the full width of the plate has its first
   or last figure cut by that curve (Russian, 8 June 2025). Held to 86% it clears it, and a longer date
   takes two lines. */
.event-plate > .plate__date { max-inline-size: min(9em, 86%); }
.event-plate .plate__date { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
.event-card--s .event-plate .plate__date { font-size: calc(var(--fs-sub) * 1.12); }
.event-card--s .event-plate { padding: 1.15rem 1.35rem; }
.event-card--s .event-plate > .medallion { --size: 2.75rem; }
.event-card--s .event-card__title { font-size: calc(var(--fs-lead) * 1.06); line-height: var(--lh-sub); }
.event-card--l .event-card__title { font-size: calc(var(--fs-sub) * 1.3); }
.event-card--l .event-card__summary { font-size: var(--fs-lead); line-height: calc(var(--lh-text) - .08); }
/* A lead card puts picture and text side by side when it is given the room, and stacks when it is not. */
.event-card--l { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.25rem, 1rem + 2vw, 3rem); }
.event-card--l > .event-card__figure { flex: 1.2 1 20rem; }
.event-card--l > .event-card__body { flex: 1 1 18rem; }
@media (hover: hover) and (pointer: fine) {
  .event-card:has(.card__title > a:hover) .event-card__meta::before { rotate: calc(var(--dir) * 60deg); }
  .event-card:has(.card__title > a:hover) .event-card__more > .link-petal::after { animation: dt-petal-grow var(--dur-4) var(--ease-out); }
}
.event-card:has(.card__title > a:focus-visible) .event-card__more > .link-petal::after { animation: dt-petal-grow var(--dur-4) var(--ease-out); }

/* ───────────────────────────────────────────────── 6 Event entry ──
   One event in full: a bud on the rail, then a white card with the facts, the lead picture, the story
   and the other pictures. */
.event-entry {
  position: relative;
  display: grid;
  grid-template-columns: var(--entry-rail, 0rem) minmax(0, 1fr);
  /* The page already keeps anchors clear of the header (scroll-padding on html). Adding the header's
     height here as well landed every link from Home and Our work a header too low, with the end of
     the entry before filling the top of the screen. */
  scroll-margin-block-start: .5rem;
}
/* An entry that takes the focus (its anchor was followed from the keyboard) shows it on its card, in
   the card's own rounded shape, not as a square round the bud and the rail. */
.event-entry:focus-visible { outline: none; }
.event-entry:focus-visible > .event-entry__card { outline: 3px solid var(--focus); outline-offset: 3px; }
/* The bud: a petal that lies down on the page's rail and points at the entry, with the core on the line.
   The page sets --entry-rail (the width of the rail) and --entry-bud-y (how far down the bud sits);
   without a rail there is no bud. */
.event-entry__bud {
  --bud: clamp(.75rem, .55rem + .8vw, 1.25rem);
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  inline-size: 100%;
  block-size: var(--bud);
  margin-block-start: calc(var(--entry-bud-y, 3rem) - var(--bud) / 2);
  pointer-events: none;
}
.event-entry__bud::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(var(--entry-rail, 0rem) * .3) calc(var(--entry-rail, 0rem) * .1);
  background: var(--c);
  -webkit-mask: var(--petal-mask-flat) center / 100% 100% no-repeat;
  mask: var(--petal-mask-flat) center / 100% 100% no-repeat;
  transform-origin: 0% 50%;
  transition: scale var(--dur-5) var(--ease-pop), opacity var(--dur-2) ease;
}
.event-entry__bud::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--entry-rail, 0rem) * .3);
  inline-size: calc(var(--bud) * .72);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  translate: calc(var(--dir) * -50%) -50%;
  transition: scale var(--dur-4) var(--ease-pop);
}
[dir="rtl"] .event-entry__bud::before { transform-origin: 100% 50%; }
.event-entry__card {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem) clamp(1.5rem, .8rem + 3vw, 3.5rem);
  min-inline-size: 0;
}
.event-entry__card > * { min-inline-size: 0; margin-block-start: 0; }
.event-entry__head { display: flex; align-items: center; gap: clamp(.9rem, .6rem + 1.2vw, 1.5rem); }
.event-entry__head > .medallion { --size: clamp(3.25rem, 2.6rem + 2.4vw, 4.5rem); }
.event-entry__title { font-size: calc(var(--fs-sub) * 1.3); text-wrap: balance; }

.event-entry__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(12.5rem, 50% - .3rem)), 1fr));   /* date and place side by side, or one under the other: never a third, empty column (a tablet) */
  gap: .6rem;
  align-content: start;
  margin: 0;
}
.event-entry__fact {
  grid-column: 1 / -1;
  display: grid;
  gap: max(.25rem, calc((var(--lh-text) - 1.5) * .9rem));   /* tall scripts need air between label and value */
  align-content: start;
  padding: .9rem 1.15rem;
  border-radius: var(--r-row);
  background: var(--row);
}
.event-entry__fact--date, .event-entry__fact--place { grid-column: auto; }
.event-entry__fact > dt { color: var(--fg-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-ui); }
.event-entry__fact > dd { margin: 0; color: var(--heading); }
.event-entry__fact--date > dd, .event-entry__fact--place > dd {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-display);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
}
[dir="rtl"] :is(.event-entry__fact--date, .event-entry__fact--place) > dd { line-height: calc(var(--lh-sub) + .2); }   /* Nastaliq: two lines of display type need more room than a heading gives */
.event-entry__fact--date > dd { color: var(--c-deep); font-size: var(--fs-sub); font-variant-numeric: lining-nums; }
.event-entry__fact--role { grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; background: var(--c-mist); }
.event-entry__fact--role::before {
  content: "";
  grid-row: 1 / span 2;
  block-size: 1.5rem;
  aspect-ratio: 20.648 / 45.125;
  margin-block-start: .15rem;
  background: var(--c);
  -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat;
  mask: var(--petal-mask) center / 100% 100% no-repeat;
}
.event-entry__fact--role > * { grid-column: 2; }
.event-entry__fact--role > dt { color: var(--slate); }
.event-entry__fact--role > dd { color: var(--ink); font-weight: var(--fw-medium); }
.event-entry__orgs { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .15rem; }
.event-entry__orgs > li {
  max-inline-size: 100%;
  padding: .3rem .85rem;
  border-radius: var(--r-row);
  background: var(--bg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
}
.event-entry__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .2rem; }
.event-entry__chips .event-chip { background: var(--bg); }

.event-entry__media { display: grid; gap: .9rem; align-content: start; justify-items: start; }
.event-entry__media > .figure, .event-entry__media > .event-plate { inline-size: 100%; max-inline-size: var(--max, 32.5rem); }
.event-entry .event-plate .plate__date { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); }

.event-entry__prose { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.event-entry__prose > * { max-inline-size: min(100%, var(--measure)); }
.event-entry__takeaways { display: grid; gap: .9rem; inline-size: 100%; padding: clamp(1.15rem, .9rem + 1vw, 1.75rem); border-radius: var(--r-panel); }
.event-entry__takeaways > * { margin-block-start: 0; max-inline-size: none; }
.event-entry__takeaways > h4 { font-size: var(--fs-lead); }
.event-entry__takeaways-note { color: var(--fg-muted); font-size: var(--fs-small); line-height: max(1.5, calc(var(--lh-text) - .15)); }
.event-entry__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  padding: .85rem 1.1rem;
  border-radius: var(--r-row);
  background: var(--row);
  color: var(--fg-muted);
  font-size: var(--fs-small);
  line-height: max(1.5, calc(var(--lh-text) - .15));
}
.event-entry__note > .icon { inline-size: 1.35rem; block-size: 1.35rem; margin-block-start: calc((1lh - 1.35rem) / 2); color: var(--c-deep); }
.event-entry__post { margin-block-start: .25rem; }

.event-entry__gallery {
  --shot: 13.5rem;
  --shot-gap: clamp(1rem, .7rem + 1.4vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;   /* a short last row stands in the middle, never alone at the start side */
  gap: clamp(1.25rem, .9rem + 1.6vw, 2.25rem) var(--shot-gap);
  padding: clamp(1.15rem, .8rem + 1.6vw, 2.25rem);
  border-radius: var(--r-panel);
  background: var(--row);
  container-type: inline-size;
}
.event-entry__shot { flex: 1 1 var(--shot); max-inline-size: min(100%, var(--max, 20rem)); margin: 0; }
/* An upright picture stands in a petal. The petal keeps its own width; its caption may run a little
   wider than the petal, so it is three or four lines and not a column of single words. */
.event-entry__shot--petal { flex: 0 1 var(--shot); max-inline-size: min(72%, var(--shot)); }
.event-entry__shot--petal > .frame { inline-size: min(100%, 11.5rem); }
.event-entry__shot > figcaption { max-inline-size: none; }
/* How the rows break. Five pictures are three and two, never four and one; four pictures that do not
   fit on one row are two and two. */
@media (min-width: 40rem) {
  .event-entry__shot:first-child:nth-last-child(5),
  .event-entry__shot:first-child:nth-last-child(5) ~ .event-entry__shot { flex-basis: calc((100% - 2 * var(--shot-gap)) / 3 - .25rem); }
  .event-entry__shot--petal:first-child:nth-last-child(5),
  .event-entry__shot:first-child:nth-last-child(5) ~ .event-entry__shot--petal { flex-basis: var(--shot); }
  @container (max-width: 59.5rem) {
    .event-entry__shot:first-child:nth-last-child(4),
    .event-entry__shot:first-child:nth-last-child(4) ~ .event-entry__shot { flex-basis: 34%; }
  }
}

/* On a phone the other pictures are one row to swipe through, each snapping into place, so a long
   entry does not become a long column of photographs. */
@media (max-width: 39.99rem) {
  .event-entry__gallery {
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(1.15rem, .8rem + 1.6vw, 2.25rem);
    scrollbar-width: none;
  }
  .event-entry__gallery::-webkit-scrollbar { display: none; }
  .event-entry__gallery { justify-content: flex-start; }
  .event-entry__shot { flex: 0 0 82%; scroll-snap-align: start; }
  .event-entry__shot--petal { flex: 0 0 68%; max-inline-size: 68%; }
  .event-entry__gallery:has(> :only-child) > .event-entry__shot { flex-basis: 100%; }
  .event-entry__head { align-items: start; }
  .event-entry__title { font-size: calc(var(--fs-sub) * 1.12); padding-block-start: .35rem; }
}

/* Facts, lead picture and story share one block, so the picture can keep pace with the reading
   (it sticks) and still stops where the other pictures begin. */
.event-entry__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem) clamp(1.5rem, .8rem + 3vw, 3.5rem);
}
.event-entry__main > * { min-inline-size: 0; }
/* In one column the picture comes straight after the title, before the facts: every entry opens on
   what happened, not on a list. (The order in the markup stays facts, picture, story; the picture
   holds nothing that takes the focus.) */
@media (max-width: 55.99rem) {
  .event-entry__media { order: -1; }
}
@media (min-width: 56rem) {
  .event-entry__main {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "facts media" "prose media";
    grid-template-rows: auto 1fr;
  }
  .event-entry--flip .event-entry__main {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "media facts" "media prose";
  }
  .event-entry__facts { grid-area: facts; }
  .event-entry__media { grid-area: media; position: sticky; inset-block-start: calc(var(--header-h, 4.5rem) + 1.5rem); align-self: start; }
  .event-entry__prose { grid-area: prose; }
  .event-entry:not(.event-entry--flip) .event-entry__media { justify-items: end; }
}

/* ──────────────────────────────────────────────────── 7 The stem ──
   One line, a bud per event in its focus colour. The rail is a grid of three rows shared by every
   item (picture · the line and its nodes · words), so the line runs straight whatever a language does
   to the height of a caption or a title. On a desktop with a fine pointer core.js pins the rail and the
   vertical scroll moves it; everywhere else it is the native snap carousel with its two buttons. */
.stem {
  --item: min(78vw, 19rem);
  --gap: clamp(1.25rem, .9rem + 1.5vw, 2.25rem);
  --stem-row: 4.5rem;
  --stem-chapter: var(--item);   /* the column of a chapter's name */
  --stem-last: var(--item);      /* the column of the unopened bud */
  position: relative;
  padding-block: clamp(.5rem, 1.5vw, 1.25rem);
}
.stem__viewport { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) .5rem; }
.stem__rail {
  position: relative;
  display: grid;
  grid-template-columns: var(--stem-cols, repeat(var(--stem-n, 13), var(--item)));   /* --stem-cols: one width per column, written by the partial */
  grid-template-rows: auto var(--stem-row) auto;
  column-gap: var(--gap);
  row-gap: 0;
  isolation: isolate;
}
.stem__item { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; inline-size: auto; min-inline-size: 0; }
.stem__event > .event-card { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; gap: 0; }
.stem__event .event-card__figure { grid-row: 1; align-self: end; }
/* a date plate has no caption under it, so it grows to the height of the pictures beside it */
.stem__event .event-card__figure:has(> .event-plate) { align-self: stretch; grid-template-rows: minmax(0, 1fr); }
.stem__event .event-plate { aspect-ratio: auto; block-size: 100%; min-block-size: 11rem; }
.stem__event .event-card__body { grid-row: 3; }

/* the line: it lies in the second row across every column (each item names its own column, so the line
   cannot push them aside) */
.stem__line {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  z-index: -1;
  block-size: .1875rem;
  margin-inline-end: calc(var(--stem-last) - .875rem);   /* it stops under the unopened bud */
  border-radius: var(--r-full);
  background: var(--rule);
  list-style: none;
  pointer-events: none;
}
.stem.is-armed .stem__fill { will-change: transform; }
.stem__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--accent, var(--forest)); transform-origin: 0% 50%; }
[dir="rtl"] .stem__fill { transform-origin: 100% 50%; }

/* a node: the event's medallion sits on the line and a leaf grows from it */
.stem__node { position: relative; grid-row: 2; align-self: center; justify-self: start; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; pointer-events: none; }
.stem__core { position: relative; z-index: 1; transition: scale var(--dur-4) var(--ease-pop), opacity var(--dur-2) ease; }
.stem__core > .icon { transition: rotate var(--dur-5) var(--ease-out); }
.stem__leaf {
  position: absolute;
  inset-block-end: 50%;
  inset-inline-start: calc(100% - .1rem);
  block-size: 1.9rem;
  aspect-ratio: 20.648 / 45.125;
  background: var(--c);
  -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat;
  mask: var(--petal-mask) center / 100% 100% no-repeat;
  transform-origin: 50% 100%;
  rotate: calc(var(--dir) * 60deg);
  transition: rotate var(--dur-5) var(--ease-pop), scale var(--dur-4) var(--ease-pop), opacity var(--dur-2) ease;
}
.stem__ring { inline-size: 1.15rem; block-size: 1.15rem; border: .25rem solid var(--accent, var(--forest)); border-radius: 50%; background: var(--bg, var(--bone)); transition: scale var(--dur-4) var(--ease-pop), opacity var(--dur-2) ease; }
.stem__node--chapter { inline-size: 1.15rem; }

/* a chapter: its name above the line; its dates and what it holds below */
.stem__chapter-head { grid-row: 1; align-self: end; display: grid; gap: .35rem; padding-block-end: .25rem; }
.stem__chapter-title { font-size: calc(var(--fs-sub) * 1.45); text-wrap: balance; }
.stem__chapter-body { grid-row: 3; align-self: start; display: grid; gap: .6rem; align-content: start; }
.stem__when {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem;
  color: var(--heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  line-height: max(1.5, calc(var(--lh-text) - .15));
}
.stem__when > .icon { inline-size: 1.3rem; block-size: 1.3rem; margin-block-start: calc((1lh - 1.3rem) / 2); color: var(--accent, var(--forest)); }
.stem__chapter-lead { color: var(--fg-muted); }
.stem__year {
  inset-block: auto 0;
  inset-inline-start: -.05em;
  z-index: -1;
  translate: 0 -62%;
  font-size: clamp(7rem, 4rem + 11vw, 13rem);
}

/* the end of the line: what comes next has not opened yet. An unopened bud (the petal's outline, no
   colour yet) stands where the line stops. */
.stem__node--next { inline-size: 1.75rem; color: var(--sage-deep); }
.stem__bud {
  position: absolute;
  inset-block-end: calc(50% - .1rem);
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
  transform-origin: 50% 100%;
  transition: scale var(--dur-5) var(--ease-pop), opacity var(--dur-3) ease;
}
.stem__bud > path { fill: var(--bg, var(--bone)); stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.stem__next-text { grid-row: 3; align-self: start; }

.stem__nav { margin-block-start: clamp(1rem, .6rem + 1.4vw, 1.75rem); }

/* the words of a card arrive after its node */
.stem__event .event-card__body { transition: opacity var(--dur-4) ease .12s, translate var(--dur-5) var(--ease-out) .12s; }
.stem__event .event-card__figure > figcaption { transition: opacity var(--dur-4) ease .3s; }
.stem__chapter-head, .stem__chapter-body, .stem__next-text { transition: opacity var(--dur-4) ease .1s, translate var(--dur-5) var(--ease-out) .1s; }

@media (prefers-reduced-motion: no-preference) {
  /* Armed by stem.js: an item waits until the line reaches it (.is-on). */
  html.js:not(.dt-failsafe) .stem.is-armed .stem__item:not(.is-on) :is(.stem__core, .stem__ring) { scale: .4; opacity: 0; }
  html.js:not(.dt-failsafe) .stem.is-armed .stem__item:not(.is-on) .stem__core > .icon { rotate: calc(var(--dir) * -60deg); }
  html.js:not(.dt-failsafe) .stem.is-armed .stem__item:not(.is-on) .stem__leaf { rotate: 0deg; scale: .2; opacity: 0; }
  html.js:not(.dt-failsafe) .stem.is-armed .stem__item:not(.is-on) :is(.event-card__body, .stem__chapter-head, .stem__chapter-body, .stem__next-text) { opacity: 0; translate: 0 .9rem; }
  html.js:not(.dt-failsafe) .stem.is-armed .stem__item:not(.is-on) .stem__bud { scale: .4; opacity: 0; }
  html.js:not(.dt-failsafe) .stem.is-armed .stem__item:not(.is-on) :is(.event-frame, .event-plate) { opacity: 0; }   /* stem.js opens it through its leaf (DT.reveal) */
  html.js:not(.dt-failsafe) .stem.is-armed .stem__item:not(.is-on) .event-card__figure > figcaption { opacity: 0; }
  /* Before stem.js has run nothing may flash: the same waiting pose, which lets go by itself after four
     seconds if the script never arrives. */
  html.js:not(.dt-failsafe) .stem:not(.is-armed):not(.is-static) .stem__item { animation: stem-wait .01s 4s both; }
  html.js:not(.dt-failsafe) .stem:not(.is-armed):not(.is-static) .stem__fill { animation: stem-wait-line .01s 4s both; }
}
@keyframes stem-wait { from { opacity: 0; } to { opacity: 1; } }
@keyframes stem-wait-line { from { transform: scaleX(0); } to { transform: none; } }

@media (max-width: 39.99rem) {
  /* On a phone a chapter's name takes less of the screen than a card, so the first event already shows
     beside it and the row asks to be swiped. */
  .stem { --stem-row: 4rem; --stem-chapter: min(62vw, 15rem); }
}
/* Where the track can pin (a wide screen), the last column is cut to what is left of the container
   after a whole number of cards. The track then comes to rest with a card standing exactly on the
   page's start edge, not cut by the edge of the screen. */
@media (min-width: 64rem) {
  @supports (inline-size: round(down, 10px, 3px)) {
    .stem {
      --stem-fit: min(100vw - 2 * var(--gutter), var(--container));
      --stem-last: calc(var(--stem-fit) - round(down, var(--stem-fit) - 9.5rem, var(--item) + var(--gap)));
    }
  }
}
/* A laptop screen is short. The pinned track has to fit inside one viewport or it stays a plain
   carousel (core.js), so on short, wide screens the stem gives up its air first. */
@media (min-width: 64rem) and (max-height: 56rem) {
  .stem { --stem-row: 3.5rem; padding-block: 0; }
  .stem__viewport { padding-block-start: 1rem; }
  .stem__nav { margin-block-start: .5rem; }
  .stem__event .event-card__body { gap: .4rem; }
  .stem__event .event-card__figure { gap: .5rem; padding-block-end: .3rem; }   /* the caption keeps clear of the node under it */
  .stem__year { font-size: clamp(7rem, 4rem + 9vw, 10.5rem); }
}

/* Entry titles carry organisation names: wrap between words, never hyphenate a name (the lead, 7 Oct 2026). */
.event-entry__title { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }