/* ============================== EXPERIENCES ==============================
   Osmia Experiences on the one-day stage (2026-09-14, the approved strategy
   implemented): the invitation, Crete, shared time, the Trips, the days that
   follow. Everything here is the page's own — the status line as words, the
   two invitations laid on the page as two notes (never two tiles), the
   ground figure of one place with several ways of being on it, the compact
   Trips, the one short form. Tokens, type, buttons, links, the veil's grammar
   and the stage are styles.css's; the figure machinery is visuals.css's. */

/* --- the clearing: the Pricing/Science closest-side veil, so the reading rests on calm ground over the
   meadow and no vertical or lower edge can ever show; every column's veil paints beneath every column --- */
.mv { overflow-x: clip; }
.mv .col { isolation: auto; }
.mv .col::before { inset: -22% -40% -40%; background: radial-gradient(closest-side at 50% 46%, color-mix(in oklab, var(--far) 90%, transparent) 0%, color-mix(in oklab, var(--far) 82%, transparent) 30%, color-mix(in oklab, var(--far) 60%, transparent) 55%, color-mix(in oklab, var(--far) 26%, transparent) 78%, transparent 100%); }

/* --- a state, said in words: place · lifecycle · condition. Never a colour, never a badge --- */
.state { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 22px 0 0; font: 500 var(--fs-small)/1.4 var(--sans); color: var(--ink-2); }
.state__sep { color: var(--ink-3); } /* the dot clears 4.5:1 over the plates, like the words beside it */
.state--plain { display: block; font-weight: 400; }
/* a sub-head in the display face at a reading size: the Trips' name, the Beehives idea, the form's head */
.sub, .col--beehives h3, .updates h3 { font: 500 clamp(21px, 1.7vw, 24px)/1.25 var(--display); letter-spacing: -.006em; text-transform: none; color: var(--ink); margin: 0; text-wrap: balance; }

/* ============================ 1 · THE INVITATION ============================ */
/* Centred, as tall as its words: the eyebrow, the two-line headline, the proposition, the state, the two
   actions — a filled button and the editorial link side by side. */
.mv--invite { padding-top: 17vh; }
.mv--hero.mv--invite.mv--center .col { max-width: 54rem; } /* outranks the centred hero's 40rem */
.mv--invite h1 { font-size: clamp(42px, 5.4vw, 80px); } /* "Keep your own rhythm" on one line at 1440 */
.mv--invite .lede { margin-inline: auto; max-width: 36rem; }
.mv--hero.mv--invite .col .lede + .state { justify-content: center; margin-top: 26px; max-width: none; } /* outranks the hero's 34rem on the lede's follower */
.mv--invite .ctas { justify-content: center; align-items: center; gap: 14px 30px; margin-top: 34px; }
.mv--invite .ctas .link { margin-top: 0; position: relative; top: 3px; } /* the link's words on the button's centre line (its underline pulls its box up) */

/* ============================== 2 · CRETE ============================== */
/* The words and the real setting on the first row; on the second, the two invitations — two notes laid on
   the page, the second standing lower than the first — then the state and the honest line, shared by both. */
.mv--crete { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; align-items: center; column-gap: 5vw; row-gap: 56px; }
.mv--crete .col { grid-column: 1; grid-row: 1; max-width: 34rem; }
.crete__pic { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; width: min(31vw, 440px); padding: 0; background: transparent; box-shadow: 0 30px 44px -34px rgba(26,23,20,.32); border-radius: 18px; } /* the photograph on the landscape, as the landing's: no card */
.crete__pic img { border-radius: 18px; }
.invites { grid-column: 1 / -1; grid-row: 2; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6vw; row-gap: 40px; align-items: start; width: 100%; max-width: 64rem; }
.invites::before { content: ""; position: absolute; inset: -18% -30% -30%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side at 50% 46%, color-mix(in oklab, var(--far) 90%, transparent) 0%, color-mix(in oklab, var(--far) 80%, transparent) 34%, color-mix(in oklab, var(--far) 56%, transparent) 60%, color-mix(in oklab, var(--far) 22%, transparent) 82%, transparent 100%); }
.invite { max-width: 27rem; padding-top: 18px; border-top: 1px solid color-mix(in oklab, var(--ink) 34%, transparent); }
.invite--day { margin-top: 72px; } /* the second note stands lower than the first: two invitations, not a pair of tiles */
.invite h3 { font: 500 clamp(24px, 2.2vw, 31px)/1.12 var(--display); letter-spacing: -.006em; color: var(--ink); margin: 0; text-wrap: balance; }
.invite p { margin-top: 12px; line-height: 1.5; }
.invites__state { grid-column: 1 / -1; max-width: 34rem; margin-top: -6px; }
.invites__state .state { margin-top: 0; }
.invites__state p + p { margin-top: 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
/* the invitations drift with the page like a column's lines do */
.motion.sdt .invite, .motion.sdt .invites__state { animation: drift 1s linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
.motion.sdt .invite--gathering { --lag: .55; } .motion.sdt .invite--day { --lag: .85; } .motion.sdt .invites__state { --lag: 1.1; }
.motion.sdt .crete__pic { animation: drift 1s linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; --lag: .55; }

/* ============================ 3 · SHARED TIME ============================ */
/* The emotional centre. The words left; the ground — one place, drawn from above, the movement's own
   clauses standing apart on it — right; the Beehives idea beneath, a passage, not a movement. */
.mv--shared { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; align-items: center; column-gap: 4vw; row-gap: 56px; }
.mv--shared { padding-top: 12vh; }
.mv--shared .col--words { grid-column: 1; grid-row: 1; max-width: 34rem; }
.mv--shared h2 { font-size: clamp(36px, 3.4vw, 49px); } /* "Room for your own." on one line */
.enough { margin-top: 30px; font: italic 400 clamp(22px, 2vw, 28px)/1.3 var(--display); letter-spacing: -.006em; color: var(--ink); }
.vis--ground { grid-column: 2; grid-row: 1; align-self: center; width: 100%; max-width: 760px; justify-self: end; }
.col--beehives { grid-column: 1 / -1; grid-row: 2; max-width: 36rem; padding-top: 18px; border-top: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); }
.col--beehives p { margin-top: 12px; }
.col--beehives .link { margin-top: 22px; }
.mv--shared .col > h3 { margin-top: 0; }

/* the ground: the Atlas map's hills draw the place; paper points stand on it; the words in the map's italic */
.gnd__ring { stroke: var(--ink); fill: none; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gnd__ring--1 { stroke-opacity: .36; stroke-width: 1.1; }
.gnd__ring--2 { stroke-opacity: .22; stroke-width: 1; }
.gnd__ring--3 { stroke-opacity: .14; stroke-width: 1; }
.gnd__pt { fill: var(--far); stroke: var(--ink); stroke-width: 1.5; }
.gnd__table { stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.vis .gnd__l { font: italic 400 clamp(14.5px, 1.2vw, 16.5px)/1.3 var(--display); letter-spacing: -.004em; color: var(--ink-2); }
/* the entrance, once, with motion: the hills first, then each way of being there in its own moment; still and complete otherwise */
.js.motion .vis--ground[data-enter]:not(.is-in) :is(.gnd__pt, .gnd__l) { opacity: 0; }
.js.motion .vis--ground[data-enter]:not(.is-in) :is(.gnd__ring, .gnd__table) { stroke-dashoffset: 1; }
.js.motion .vis--ground.is-in :is(.gnd__pt, .gnd__l) { animation: visIn .6s ease-out both; animation-delay: var(--d, 0s); }
.js.motion .vis--ground.is-in .gnd__ring { animation: visDraw 1.8s cubic-bezier(.3, 0, .4, 1) both; animation-delay: var(--d, 0s); }
.js.motion .vis--ground.is-in .gnd__table { animation: visDraw .8s cubic-bezier(.3, 0, .4, 1) both; animation-delay: var(--d, 0s); }

/* ============================== 4 · THE TRIPS ============================== */
.mv--trips .col { max-width: 40rem; }
.mv--trips .sub { margin-top: 12px; color: var(--ink-2); }
.journeys { margin-top: 16px; font: 400 clamp(24px, 2.6vw, 34px)/1.25 var(--display); letter-spacing: -.006em; color: var(--ink); text-wrap: balance; }
.mv--trips .state--plain { margin-top: 18px; max-width: 32rem; }

/* ========================= 5 · THE DAYS THAT FOLLOW ========================= */
.mv--after { padding-bottom: 18vh; }
.mv--after .col { max-width: 40rem; }
.updates { margin-top: 44px; padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); max-width: 34rem; }
.updates > p { margin-top: 10px; }
.updates .form { margin: 22px 0 0; max-width: none; }
.updates .fine, .updates .updatesform__status { margin-top: 14px; color: var(--ink-2); }
.updates .updatesform__status { font-size: var(--fs-small); }
.updates .fine + .fine { margin-top: 8px; }
.updates__privacy .link { margin-top: 0; font-size: inherit; padding-bottom: 2px; } /* the privacy door inline in the quiet line, not a standalone link */
.motion .updatesform__status, .motion.sdt .mv .col > .updatesform__status { animation: heroRise 380ms cubic-bezier(.16, 1, .3, 1) both; animation-timeline: auto; animation-range: normal; }

/* ================================ PHONES ================================ */
@media (max-width: 880px) {
  .mv--invite { padding-top: 15vh; }
  .mv--invite .ctas { flex-direction: column; gap: 22px; }
  .mv--hero.mv--invite .col .lede + .state { flex-direction: column; gap: 4px; align-items: center; } .mv--invite .state__sep { display: none; } /* two centred lines, no dangling dot */
  .mv--crete { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 30px; }
  .mv--crete .col, .crete__pic, .invites { grid-column: 1; grid-row: auto; }
  .crete__pic { width: 100%; max-width: 440px; justify-self: start; }
  .invites { grid-template-columns: 1fr; row-gap: 28px; max-width: 34rem; }
  .invite--day { margin-top: 0; }
  .invites__state { grid-column: 1; margin-top: 0; }
  .mv--shared { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 36px; }
  .mv--shared .col--words, .vis--ground, .col--beehives { grid-column: 1; grid-row: auto; }
  .vis--ground { max-width: 24rem; justify-self: start; }
  .vis--ground .vis__l { width: max-content; max-width: 172px; } /* a label sized by its words, not by the room to its right */
  .mv--after { padding-bottom: 14vh; }
  /* the golden hour's other bees keep to the sky on a phone, clear of the ground figure */
  .page-experiences #swarm .b1 { translate: 62vw 12vh; } .page-experiences #swarm .b2 { translate: 76vw 19vh; }
  .page-experiences #swarm .b3 { translate: 68vw 6vh; } .page-experiences #swarm .b4 { translate: 86vw 13vh; }
}