/* clubs-c02.css — For Clubs C02 (member interest and value), "Band and
   panel" (chosen by Alessandro on 8 Oct 2026). Classes mv- (member value);
   behaviour in clubs.js.

   The photo is the group, sharp (members-band-*, MAIN-V5 55.0 s; the blur
   was dropped on 8 Oct). Without the script, or under reduced motion, every
   block is in its final place.

   Composition: a full-bleed band of the photo meets the hero; a Chalk
   panel runs in from the left page edge and rises into the band's lower
   edge; the two points follow, stepped to the right from 1280 px. */
.mv-band {
  padding-top: 0;                       /* the band meets the section above */
  --mv-lift: clamp(48px, 8vw, 150px);   /* how far the panel rises into the band */
  --mv-pad: clamp(24px, 3.4vw, 48px);
  overflow-x: clip;
}

/* ---- the photo ---- */
.mv-focus { position: relative; overflow: hidden; background: var(--color-surface-reading); }
.mv-focus > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}

/* ---- the band: it settles from a slow zoom as it rises (--mv-p, clubs.js) */
.mv-band__media { height: clamp(300px, 42vw, 680px); }
/* landscape phones (wide but short): the band is shorter than the screen
   under the header, so arriving at C02 (or at #reasons) shows the top of
   the heading under the photo; the crop sits a little higher, so the
   heads keep their room above them */
@media (min-width: 640px) and (max-width: 1023px) and (max-height: 540px) {
  .mv-band__media { height: calc(100svh - var(--header-h) - var(--space-8)); }
  .mv-band__media > img { object-position: 58% 38%; }
}
.mv-band__media > img {
  transform: scale(calc(1 + 0.12 * (1 - var(--mv-p, 1))));
  transform-origin: 62% 50%;
}
/* 13 Oct 2026 (phone scroll speed): on touch screens the same zoom is a
   scroll-driven animation the compositor runs, instead of clubs.js writing
   --mv-p on every scroll frame (each write restyled and repainted the
   photo). Same curve: 0 as the band's top enters the viewport, 1 once it
   is 15% from the top (the inset), eased by smoothstep (this cubic-bezier
   is smoothstep exactly). The timeline is the band's own box: the img's
   nearest scroller is the band (overflow: hidden), where view() never
   moves. Mouse screens keep the script: there the photo's own layer would
   take the panel's text off subpixel (LCD) anti-aliasing, which phones
   do not use. clubs.js makes the same test */
@keyframes mv-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@supports (animation-timeline: view()) and (view-timeline-inset: 15% 0%) {
  @media (prefers-reduced-motion: no-preference) and (hover: none) {
    .mv-band__media { view-timeline: --mv-band block; view-timeline-inset: 15% 0%; }
    .mv-band__media > img {
      animation: mv-settle linear both;
      animation-timing-function: cubic-bezier(0.3333333, 0, 0.6666667, 1);
      animation-timeline: --mv-band;            /* after the shorthand, which resets it */
      animation-range: cover 0% exit-crossing 0%;
    }
    /* 13 Oct 2026: the panel and the points on a layer of their own, kept
       while the photo has its own (the band within a screen of the
       viewport; further away clubs.js sets .mv-far, where the photo is
       settled or off screen). Otherwise the photo's layer pulled them and
       the rest of the page into one layer over it, whose text lost subpixel
       (LCD) smoothing on the touch screens that use it (Windows). The
       points get the section's own Chalk under them, so their layer is
       opaque behind its text. Nothing changes on screen */
    .mv-band__media.mv-far > img { animation: none; }
    .mv-band__media:not(.mv-far) + .mv-band__body { will-change: opacity; }
    .mv-points { background-color: var(--on-bg); }
  }
}
@media print { .mv-band__media > img { animation: none; } }   /* settled, as the script leaves it for print */

/* ---- the panel and the two points ---- */
.mv-band__body { position: relative; margin-top: calc(-1 * var(--mv-lift)); row-gap: var(--space-6); align-items: start; }
.mv-band__panel {
  --mv-bleed: var(--page-margin);
  --mv-notch: clamp(32px, 12vw, 120px);   /* the band showing right of the panel */
  margin-left: calc(-1 * var(--mv-bleed));
  margin-right: var(--mv-notch);
  padding: var(--mv-pad) var(--mv-pad) 0 var(--mv-bleed);
  border-radius: 0 var(--radius-card) 0 0;
}
.mv-band__panel h2 { margin: 0 0 var(--space-5); }
.mv-band__panel .t-lead { margin: 0; max-width: 36ch; }
/* phones: the notch matters only where the panel meets the photo; under the
   heading the lead runs to the page's edge like the points below it (Chalk
   on Chalk, so the panel's edge is not seen), instead of a narrower column
   of 22–28 characters */
@media (max-width: 639px) {
  .mv-band__panel .t-lead { margin-right: calc(-1 * (var(--mv-notch) + var(--mv-pad))); }
}
.mv-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--grid-gutter);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.mv-points > li { padding-top: var(--space-5); border-top: 1px solid var(--on-line); }
.mv-points h3 { margin: 0 0 var(--space-3); }
.mv-points p { margin: 0; max-width: var(--measure); }
@media (min-width: 640px) {
  .mv-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mv-band__panel {
    --mv-bleed: max(var(--page-margin), calc((100vw - var(--content-max)) / 2));
    grid-column: 1 / span 8;
    margin-right: 0;
  }
  .mv-points { grid-column: 1 / -1; margin-top: var(--space-4); }
}
@media (min-width: 1280px) {
  .mv-band__panel { grid-column: 1 / span 7; }
  .mv-points { grid-column: 5 / span 8; margin-top: var(--space-7); }
}

/* ---- motion: the band zooms out as it rises (--mv-p, clubs.js; on touch
   screens the scroll-driven animation above); the text arrives through
   motion.js ([data-arrive]) */