/* Orli v3 site · the home page (index.html, 13 Nov 2026)
   ---------------------------------------------------------------------------
   The page for all of Orli, above Orli Schools (schools.html, /schools).
   The v2 system (tokens, layout, components, through shell.css) plus this
   page's own layouts, prefix f-. System tokens only; the sky, the islands,
   the felt and the cast are the schools page's and About's own pictures,
   plus the two new islands in front/img (Higgsfield, 13 Nov).

   Sections, top to bottom (one focal point each):
     hero    what Orli is, on the Orliverse sky, then the three places it
             goes as three floating islands, each one link: For Schools
             (live, the largest and nearest), For Parents and For Healthcare
             (In the making, smaller and further off)
     why     what Orli Schools is about, in three felt cards (warm band)
     who     the team's own Orlis as a class photo, sewn on
     faq     six short answers (warm band); three Orlis peek over the next
     cta     the one deep band: bring Orli to your school
   One ambient animation in view: the islands' slow float (hero), or one
   team Orli's hop (who, only while the hero is off screen). Both full
   motion, on screen only, resting under the cursor.
   ------------------------------------------------------------------------- */

/* search terms keep their plain hyphen and stay on one line */
.f-nowrap { white-space: nowrap; }

/* ================================================================== hero
   The About page's sky (../hero/school), running up under the header (clear
   at the top, glass once scrolled), two hazy islands far off at the edges
   (never behind words), fading into the canvas under the islands. */
.f-hero { position: relative; isolation: isolate; }
html.js .f-hero { margin-block-start: calc(-1 * var(--o-header-h)); }
.f-hero__stage {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: calc(var(--o-header-h) + var(--o-space-8)) var(--o-space-9);
  /* the sky itself, 40 × 22 px, until the real one paints (about.css's inlined copy) */
  background: #f6d6bd url("data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAABwBQCdASooABYAPrVOo0wypCMiKrgKAlAWiWMAxm/FgM73bwzZV+IHRshZjqMvCq4X3EwAAP7wT1pagFFTJ9fzavn0c9WDHWGAf3xnkewRsa0GkRRbd/VoCl5mxw1cRX7ai8I5de+CJ4FJvYJmHC88VuBxyESQD8sgcNZi5aAAAA==") 50% 100% / cover no-repeat;
}
html:not(.js) .f-hero__stage { padding-block-start: var(--o-space-8); }
@media (max-width: 899.98px) {
  .f-hero__stage {
    padding-block: calc(var(--o-header-h) + var(--o-space-7)) var(--o-space-8);
    background-image: url("data:image/webp;base64,UklGRn4AAABXRUJQVlA4IHIAAABwBQCdASoUACQAPqVAmkmxI6KhNVv8AiAUiWUAt7g3EzpTDNG9PM1Fu5MYM8rJ/XsjqnXAAP7xQ2T/YqmZXrTGmsrRWVr29cXxp5Iwy7siQ3y+v6RGMX7mdcj2U+eYQHCDQISyvI2tWljOKiPpRMgAAAA=");
  }
}
.f-hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.f-hero__sky picture { position: absolute; inset: 0; display: block; }
.f-hero__sky-img {
  position: absolute; left: 0; bottom: -10%; display: block; width: 100%; height: 110%; max-width: none;
  object-fit: cover; object-position: 30% 100%;
}
/* the sky settles into the canvas under the islands */
.f-hero__sky::after {
  content: ""; position: absolute; inset: auto 0 0; height: 14%;
  background: linear-gradient(rgb(252 250 248 / 0), var(--o-canvas));
}
.f-hero__far { position: absolute; display: block; height: auto; }
.f-hero__far--a { left: 3%; top: 22%; width: 6vw; opacity: .5; }
.f-hero__far--d { right: 3%; top: 15%; width: 8vw; opacity: .65; }
@media (max-width: 899.98px) {
  .f-hero__far--a { display: none; }
  .f-hero__far--d { right: -7vw; top: auto; bottom: 30%; width: 20vw; opacity: .45; }
}

.f-hero__head { margin-inline: auto; margin-block-end: 0; max-inline-size: 58rem; }
/* the H1 is the sentence that says what Orli is: display size, three lines
   on a laptop; the title size on a phone, where display type would run to six */
.f-hero__title { margin-inline: auto; max-inline-size: 24ch; text-wrap: balance; }
.f-hero__lead { max-inline-size: 40rem; margin-inline: auto; text-wrap: pretty; }
@media (max-width: 599.98px) {
  main .f-hero__title { font-size: min(var(--o-text-title), max(1.25rem, 9.5vi)); line-height: var(--o-lh-title); }
  .f-hero__head.o-section-head--center { text-align: start; align-items: start; }
  .f-hero__head .o-cluster { justify-content: flex-start; }
  .f-hero__title, .f-hero__lead, .f-hero__head .o-cluster { margin-inline: 0; }
}

/* ================================================================= isles
   The three places Orli goes. Each island floats over its words on a paper
   card (words on flat ground, felt grain, set down a little crooked like a
   label on a craft table). The whole of each (island and card) is one link,
   its foot link stretched: the card lifts onto the ink pop like a link
   card, and its island rises a touch.
     1200px and up: three across, the school wider, lowest and nearest, the
                    two in the making smaller and raised, a gentle arc
     900 to 1199px: the school across the whole width (island left, card
                    right), the two in the making two across under it
     under 900px:   the school island and its card; the two in the making
                    as compact cards, the island small beside the title */
.f-isles {
  list-style: none; margin: var(--o-space-8) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-6);
}
.f-isle {
  position: relative; display: grid; min-width: 0; cursor: pointer; scroll-margin-top: calc(var(--o-header-h) + var(--o-space-5));
  /* the tilt and the hover lift move the whole place (island and card): a
     transform on the card would make it the containing block of the
     stretched link, and the island would stop being part of the link */
  rotate: var(--tilt, 0deg);
  transition: translate var(--o-t-interact) var(--o-ease);
}
.f-isle__art { position: relative; display: grid; place-items: end center; }
.f-isle__art img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 18px rgb(120 72 60 / .16));
  transition: translate 420ms var(--o-settle);
}
.f-isle__card {
  display: flex; flex-direction: column; gap: var(--o-space-2);
  padding: var(--o-space-5) var(--o-space-5) var(--o-space-4);
  /* paper with a faint felt grain (the grain at about 4.5%: a paper wash
     over it; the stitch is the tag's alone). No position or transform here:
     see .f-isle */
  background:
    linear-gradient(rgb(255 253 248 / .955), rgb(255 253 248 / .955)),
    url(../home/img/magic/felt-grain-256.webp) 0 0 / 256px 256px,
    var(--o-paper);
  color: var(--o-ink);
  border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
  transition: box-shadow var(--o-t-interact) var(--o-ease), border-color var(--o-t-interact) var(--o-ease);
}
.f-isle--schools { --tilt: -1deg; }
.f-isle--parents { --tilt: 1.2deg; }
.f-isle--healthcare { --tilt: -.8deg; }
.f-isle__head { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--o-space-3); row-gap: var(--o-space-2); }
.f-isle__title {
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading); text-wrap: balance;
}
.f-isle__line { color: var(--o-ink-2); text-wrap: pretty; margin-block-end: var(--o-space-2); }
.f-isle__foot {
  margin-block-start: auto; padding-block-start: var(--o-space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-3);
  border-block-start: 1px solid var(--o-line);
}
.f-isle__link { color: inherit; text-decoration: none; font: var(--o-weight-ui) var(--o-text-body) / 1.35 var(--o-font-ui); text-wrap: balance; border-radius: 2px; }
/* the whole of each place (island and card) is the link's target */
.f-isle__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--o-r-card); }
.f-isle__link:focus-visible { outline: none; }
.f-isle .o-arrow { background: var(--o-action); transition: translate var(--o-t-interact) var(--o-ease), background-color var(--o-t-interact) var(--o-ease); }
@media (hover: hover) and (pointer: fine) {
  .f-isle:hover { translate: var(--o-lift-x) var(--o-lift-y); }
  .f-isle:hover .f-isle__card { border-color: var(--o-ink); box-shadow: var(--o-pop); }
  .f-isle:hover .o-arrow { translate: 3px 0; background: var(--o-action-hover); }
  .f-isle:hover .f-isle__art img { translate: 0 -6px; }
}
.f-isle:has(.f-isle__link:focus-visible) { translate: var(--o-lift-x) var(--o-lift-y); }
.f-isle:has(.f-isle__link:focus-visible) .f-isle__card { border-color: var(--o-ink); box-shadow: var(--o-pop); outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); }
.f-isle:has(.f-isle__link:focus-visible) .o-arrow { background: var(--o-action-hover); }
.f-isle:active { translate: 0 0; }
.f-isle:active .f-isle__card { box-shadow: 0 0 0 0 var(--o-ink); transition-duration: var(--o-t-press); }
/* arriving at /#parents or /#healthcare: the card's edge in action green */
.f-isle:target .f-isle__card { border-color: var(--o-action); box-shadow: 0 0 0 2px var(--o-action), var(--o-shadow); }

/* under 900px: the school whole; the two in the making as compact cards,
   the island beside the title and tag */
@media (max-width: 899.98px) {
  .f-isle--schools { gap: var(--o-space-3); }
  .f-isle--schools .f-isle__art img { max-width: 40rem; }
  .f-isle:not(.f-isle--schools) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto auto;
    background:
      linear-gradient(rgb(255 253 248 / .955), rgb(255 253 248 / .955)),
      url(../home/img/magic/felt-grain-256.webp) 0 0 / 256px 256px,
      var(--o-paper);
    border: 1px solid var(--o-line); border-radius: var(--o-r-card); box-shadow: var(--o-shadow);
    padding: var(--o-space-4) var(--o-space-5) var(--o-space-4) var(--o-space-3);
    column-gap: var(--o-space-3);
    transition: translate var(--o-t-interact) var(--o-ease), box-shadow var(--o-t-interact) var(--o-ease), border-color var(--o-t-interact) var(--o-ease);
  }
  .f-isle:not(.f-isle--schools) .f-isle__art { grid-row: 1 / 3; place-items: center; }
  .f-isle:not(.f-isle--schools) .f-isle__art img { filter: drop-shadow(0 8px 8px rgb(120 72 60 / .16)); }
  .f-isle:not(.f-isle--schools) .f-isle__card { display: contents; }
  .f-isle:not(.f-isle--schools) .f-isle__head { grid-column: 2; align-self: end; }
  .f-isle:not(.f-isle--schools) .f-isle__line { grid-column: 2; margin-block: var(--o-space-2) 0; }
  .f-isle:not(.f-isle--schools) .f-isle__foot { grid-column: 1 / -1; margin-block-start: var(--o-space-3); padding-block-start: var(--o-space-3); }
  .f-isle:not(.f-isle--schools) .f-isle__link::after { border-radius: var(--o-r-card); }
  @media (hover: hover) and (pointer: fine) {
    .f-isle:not(.f-isle--schools):hover { border-color: var(--o-ink); box-shadow: var(--o-pop); }
  }
  .f-isle:not(.f-isle--schools):has(.f-isle__link:focus-visible) { border-color: var(--o-ink); box-shadow: var(--o-pop); outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); }
  .f-isle:not(.f-isle--schools):target { border-color: var(--o-action); box-shadow: 0 0 0 2px var(--o-action), var(--o-shadow); }
}
@media (max-width: 899.98px) {
  /* the island beside the title and tag; the words run the card's width */
  .f-isle:not(.f-isle--schools) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .f-isle:not(.f-isle--schools) .f-isle__line { grid-column: 1 / -1; }
  .f-isle:not(.f-isle--schools) .f-isle__art { grid-row: 1; }
}
/* a phone on its side (short and wide): the school island beside its card, capped */
@media (max-width: 899.98px) and (max-height: 560px) and (orientation: landscape) {
  .f-isle--schools { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--o-space-5); }
  .f-isle--schools .f-isle__art img { max-height: 62svh; width: auto; max-width: 100%; }
}
@media (max-width: 380px) {
  .f-isle--schools .f-isle__art img { max-width: 92%; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .f-isles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-isle--schools { grid-column: 1 / -1; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: center; gap: var(--o-space-5); }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .f-isles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-7) var(--o-grid-gap); margin-block-start: var(--o-space-8); }
  .f-isle--schools { grid-column: 1 / -1; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: center; gap: var(--o-space-6); }
  .f-isle:not(.f-isle--schools) { grid-template-rows: auto 1fr; gap: var(--o-space-3); }
  .f-isle:not(.f-isle--schools) .f-isle__art img { max-width: 60%; }
}
@media (min-width: 1200px) {
  .f-isles { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--o-grid-gap); align-items: end; margin-block-start: var(--o-space-9); }
  .f-isle { grid-template-rows: auto 1fr; gap: var(--o-space-3); }
  .f-isle--parents { margin-block-end: var(--o-space-8); }
  .f-isle--healthcare { margin-block-end: var(--o-space-6); }
  .f-isle:not(.f-isle--schools) .f-isle__art img { max-width: 86%; }
  .f-isle__card { min-block-size: 13.5rem; }
}

/* The islands float on one slow breath, each a little out of step (one
   ambient animation), and rest under the cursor or keyboard. front.js adds
   .is-floating in full motion while the hero is on screen. */
.f-hero.is-floating .f-isle__art { animation: f-float 9s ease-in-out infinite; }
.f-hero.is-floating .f-isle--parents .f-isle__art { animation-delay: -3s; }
.f-hero.is-floating .f-isle--healthcare .f-isle__art { animation-delay: -6s; }
.f-isles:is(:hover, :focus-within) .f-isle__art { animation-play-state: paused; }
@keyframes f-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* ================================================================ status
   For Schools: live, said quietly with a solid felt dot (not a pill), so
   the hero has two pills: the two tags. */
.f-status { margin: 0; }
.f-status--live { display: inline-flex; align-items: center; gap: var(--o-space-2); color: var(--o-ink-2); font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); }
.f-status--live::before {
  content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, var(--o-mint), var(--o-action) 70%);
}

/* ======================================================== "In the making"
   A small felt patch, still being sewn on: Joy's sunny family (her island
   is the sandpit, where things get built), a running stitch just inside
   its edge that stops short, and the loose thread hanging from where it
   stopped. On hover or focus of its card the stitches run on a little and
   the thread gives a tug, but the stitching never closes: it's honestly
   not finished. Never on its own, so the page keeps its one ambient
   animation; still under Reduced and Still. No needle (nothing sharp near
   a children's hospital). The words are real text: "Status: In the making". */
@property --f-gap { syntax: "<angle>"; inherits: false; initial-value: 72deg; }
.f-tag {
  position: relative; display: inline-flex; align-items: center;
  min-block-size: 30px; padding: 0 var(--o-space-4);
  border-radius: var(--o-r-pill);
  background: var(--w-joy-soft);
  color: var(--w-joy-deep);
  font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui);
  letter-spacing: .01em; white-space: nowrap;
  rotate: -2deg;
  box-shadow: 0 1px 0 rgb(125 95 11 / .16), 0 5px 10px -6px rgb(125 95 11 / .45);
  isolation: isolate;
}
/* the felt's grain */
.f-tag::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: url(../home/img/magic/felt-grain-256.webp) 0 0 / 128px 128px; opacity: .07; mix-blend-mode: multiply;
}
html[data-contrast="high"] .f-tag { color: var(--o-ink); }
html[data-contrast="high"] .f-tag::before { display: none; }
/* the running stitch, just inside the edge, with a gap at the top right
   where the sewing stopped (a conic mask: the gap's angle is --f-gap) */
.f-tag__stitch {
  --f-gap: 72deg;
  position: absolute; inset: 4px; z-index: -1; width: calc(100% - 8px); height: calc(100% - 8px); overflow: visible; pointer-events: none;
  -webkit-mask: conic-gradient(from 10deg at 50% 50%, transparent 0deg var(--f-gap), #000 var(--f-gap));
          mask: conic-gradient(from 10deg at 50% 50%, transparent 0deg var(--f-gap), #000 var(--f-gap));
  transition: --f-gap 500ms steps(5);
}
.f-tag__stitch rect { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 4 4; opacity: .55; }
/* the loose thread, hanging from where the stitch stopped */
.f-tag__thread {
  position: absolute; inset-block-start: -8px; inset-inline-end: 9%; z-index: -1;
  inline-size: 24px; block-size: 18px; overflow: visible; pointer-events: none;
  transform-origin: 2px 16px;
}
.f-tag__thread path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: .75; }
@media (hover: hover) and (pointer: fine) {
  .f-isle:hover .f-tag__stitch { --f-gap: 40deg; }
  .f-isle:hover .f-tag__thread { animation: f-tug 300ms var(--o-settle) 1; }
}
.f-isle:focus-within .f-tag__stitch { --f-gap: 40deg; }
.f-isle:focus-within .f-tag__thread { animation: f-tug 300ms var(--o-settle) 1; }
@keyframes f-tug { 0%, 100% { rotate: 0deg; } 50% { rotate: -10deg; } }

/* ============================================================ why (value)
   Three felt cards, each with one of the cast popping up over its top edge
   on a soft shadow. The words are centred and short, so the three match;
   the card's one decoration is its running stitch. Three across from 900px,
   stacked on a phone (each card leaves room above it for its Orli). */
.f-why__head .o-lead { max-inline-size: 44rem; }
.f-why__list {
  /* the Orli's width; the room above the list, between stacked cards and
     inside each card's top follows it, so larger text never puts the Orli
     over the words */
  --f-art: 8.5rem;
  list-style: none; margin: calc(var(--f-art) * .72) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--f-art) * .8) var(--o-grid-gap);
}
@media (min-width: 900px) { .f-why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.f-why__card {
  position: relative; isolation: isolate; display: grid; justify-items: center; align-content: start; gap: var(--o-space-2);
  padding: calc(var(--f-art) * .63) var(--o-space-6) var(--o-space-7); min-width: 0; text-align: center;
  background:
    linear-gradient(rgb(255 255 255 / .955), rgb(255 255 255 / .955)),
    url(../home/img/magic/felt-grain-256.webp) 0 0 / 256px 256px,
    var(--o-surface);
  border: 1px solid var(--o-line); border-radius: var(--o-r-card); box-shadow: var(--o-shadow);
}
/* the running stitch just inside the edge (the About page's felt card) */
.f-why__card::after {
  content: ""; position: absolute; inset: 10px; z-index: -1; pointer-events: none;
  border: 2px dashed rgb(50 131 96 / .26); border-radius: calc(var(--o-r-card) - 8px);
}
/* the Orli, half over the card's top edge, on a soft contact shadow */
.f-why__art { position: absolute; inset-block-start: 0; inset-inline-start: 50%; translate: -50% -58%; display: grid; place-items: end center; }
.f-why__art img { position: relative; z-index: 1; display: block; inline-size: var(--f-art); max-inline-size: none; height: auto; }
.f-why__art::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; inline-size: 70%; block-size: 16px;
  translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 57 50 / .24), rgb(60 57 50 / 0));
}
.f-why__title {
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading); text-wrap: balance; max-inline-size: 18ch;
}
.f-why__text { color: var(--o-ink-2); text-wrap: pretty; max-inline-size: 32ch; }
.f-why__aim { margin: var(--o-space-8) auto 0; text-align: center; color: var(--o-ink-2); max-inline-size: 40rem; text-wrap: balance; }
.f-why__more { margin-block-start: var(--o-space-3); text-align: center; }
@media (max-width: 599.98px) {
  .f-why__list { --f-art: 7rem; }
  .f-why__card { padding-inline: var(--o-space-5); padding-block-end: var(--o-space-6); }
  /* one alignment on a phone: the head and its links start at the left, as the hero does */
  .f-why__head.o-section-head--center { text-align: start; align-items: start; }
  .f-why__head .o-lead { margin-inline: 0; }
  .f-why__aim, .f-why__more { text-align: start; margin-inline: 0; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .f-why__list { max-inline-size: 30rem; margin-inline: auto; }
}

/* ============================================================ who (team)
   The team's Orlis as a class photo (about.css's .a-class), framed in the
   sky with two clouds in front, sewn on with the cream running stitch. Nine
   here: the back row is two. Placed in container units, so the group
   scales as one picture. Euan's Orli hops now and then. */
.f-who__in { align-items: center; row-gap: var(--o-space-7); }
.f-who__head { margin-block-end: 0; }
.f-who__head .o-title { max-inline-size: 16ch; }
.f-who__links { column-gap: var(--o-space-6); row-gap: var(--o-space-2); }
/* Instagram: the glyph before the words, set like the arrow link beside it */
.f-insta {
  display: inline-flex; align-items: center; gap: var(--o-space-2); min-block-size: var(--o-target, 44px);
  font: var(--o-weight-ui) var(--o-text-body) / 1.2 var(--o-font-ui); letter-spacing: -.005em;
}
.f-class { position: relative; display: grid; gap: var(--o-space-3); margin: 0; min-width: 0; }
.f-class__frame {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 3 / 2; container-type: inline-size;
  border-radius: var(--o-r-card); box-shadow: var(--o-shadow);
  background: #f6d6bd url(../../hero/school/assets/sky-wide-1280.webp) 30% 90% / cover no-repeat;
}
/* the cream running stitch just inside the frame */
.f-class__frame::after {
  content: ""; position: absolute; inset: 10px; z-index: 6; pointer-events: none;
  border: 2px dashed rgb(255 246 228 / .72); border-radius: calc(var(--o-r-card) - 8px);
}
.f-class__orli {
  position: absolute; z-index: var(--z, 1);
  left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%);
  height: calc(var(--h) * 1cqw);
  translate: -50% 0;
}
.f-class__orli img { display: block; width: auto; height: 100%; max-width: none; }
.f-class__orli::before {
  content: ""; position: absolute; z-index: -1; left: calc(var(--sx, 50) * 1%); bottom: calc(var(--sy, 5) * 1%);
  width: calc(var(--sw, 15) * 1cqw); height: 2.2cqw; translate: -50% 50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(120 72 60 / .2), rgb(120 72 60 / 0));
}
/* (the About page's places, inset a little so the frame's stitch clears them) */
.f-class__orli--lucy    { --x: 36;   --y: 62; --h: 13.5; --sw: 15; --sy: 9; }
.f-class__orli--patrick { --x: 64;   --y: 62; --h: 13.5; --sw: 11; --sx: 48; }
.f-class__orli--ryan    { --x: 20;   --y: 39; --z: 2; --h: 13;   --sw: 12; --sx: 52; --sy: 8; }
.f-class__orli--debbie  { --x: 40;   --y: 39; --z: 2; --h: 14.5; --sw: 12; --sx: 52; --sy: 7; }
.f-class__orli--jazz    { --x: 60;   --y: 39; --z: 2; --h: 14;   --sw: 11; --sx: 47; }
.f-class__orli--james   { --x: 80;   --y: 39; --z: 2; --h: 12.5; --sw: 11; --sx: 56; }
.f-class__orli--karla   { --x: 29;   --y: 15; --z: 3; --h: 18;   --sw: 14; --sx: 49; }
.f-class__orli--mark    { --x: 50;   --y: 15; --z: 3; --h: 18;   --sw: 14; --sx: 52; }
.f-class__orli--euan    { --x: 71;   --y: 15; --z: 3; --h: 18;   --sw: 13; }
.f-class__cloud { position: absolute; z-index: 4; display: block; height: auto; max-width: none; pointer-events: none; opacity: .94; }
.f-class__cloud--l { left: -8cqw; bottom: -8cqw; width: 46cqw; }
.f-class__cloud--r { right: -10cqw; bottom: -7cqw; width: 42cqw; }
.f-class__caption { justify-self: center; color: var(--o-ink-2); text-align: center; }
.f-class.is-bobbing .f-class__orli[data-bob] { animation: f-hop 5.2s var(--o-ease) infinite; }
.f-class.is-bobbing .f-class__orli[data-bob]::before { animation: f-hop-shadow 5.2s var(--o-ease) infinite; }
@keyframes f-hop {
  0%, 74%, 100% { translate: -50% 0; }
  81% { translate: -50% -1.8cqw; }
  88% { translate: -50% 0; }
  92% { translate: -50% -.35cqw; }
  95% { translate: -50% 0; }
}
@keyframes f-hop-shadow {
  0%, 74%, 88%, 100% { scale: 1; opacity: 1; }
  81% { scale: .78; opacity: .7; }
}

/* =================================================================== faq
   The About pattern; three of the cast peek over the closing band from the
   bottom of this section: the band (above them in the page's stacking)
   covers their lower halves. */
.f-faq { position: relative; padding-block-end: calc(var(--o-section) + var(--o-space-6)); }
.f-faq__in { align-items: start; }
.f-faq__head > p:last-child { margin-block-start: calc(var(--o-gap-tight) - var(--o-gap)); }
@media (min-width: 900px) {
  .f-faq__head { position: sticky; top: calc(var(--o-header-h) + var(--o-space-6)); }
}
.f-peek {
  position: absolute; z-index: 0; inset-inline: 0; inset-block-end: -32px; margin: 0;
  display: flex; justify-content: center; align-items: flex-end; gap: var(--o-space-4);
  pointer-events: none;
}
.f-peek__orli { display: block; inline-size: 104px; height: auto; transition: translate 900ms var(--o-settle); transition-delay: calc(var(--i, 0) * 120ms); }
/* Zeke's face sits low in his picture: lift him so it clears the band */
.f-peek__orli--zeke { margin-block-end: 18px; }
.f-peek__orli--joy { --i: 1; inline-size: 116px; }
.f-peek__orli--orla { --i: 2; }
/* full motion: they rise into place once as the band comes into view (front.js) */
.f-peek.is-armed:not([data-in]) .f-peek__orli { translate: 0 60%; }
@media (max-width: 599.98px) {
  .f-peek { inset-block-end: -26px; gap: var(--o-space-3); }
  .f-peek__orli--zeke { margin-block-end: 14px; }
  .f-peek__orli { inline-size: 80px; }
  .f-peek__orli--joy { inline-size: 90px; }
}

/* =================================================================== cta
   The one deep band, in felt (about.css's .a-cta). It sits over the peeking
   Orlis' lower halves. */
.f-cta { position: relative; z-index: 1; isolation: isolate; overflow: clip; }
.f-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../home/img/magic/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .22; mix-blend-mode: soft-light;
}
.f-cta .o-section-head { margin-block-end: 0; }
.f-cta .o-title { max-inline-size: 18ch; }
.f-cta .o-lead { max-inline-size: 46ch; text-wrap: balance; }
/* two standalone links for families and healthcare, white on the band */
.f-cta__also { list-style: none; margin: 0; padding: 0; justify-content: center; column-gap: var(--o-space-6); }
.f-cta__also .o-link--arrow { color: #fff; }

/* the sign-off note for the search and share words (?verify=1 only) */
.f-seo-check { position: relative; padding-block: var(--o-space-4); }

/* =============================================================== the dialog
   "Help shape Orli": the booking dialog's sheet (features/booking), narrow
   and words only, with one of the cast peeking over its top edge. Full
   screen on a phone. */
html.f-in-open { overflow: hidden; }
.f-in {
  /* the dialog itself is see-through: Luna sits behind the sheet, popping
     out over its top edge; the sheet is the white card that scrolls */
  --peek: 3.25rem;
  box-sizing: border-box;
  width: min(34rem, 100vw - 2 * var(--o-space-4));
  max-width: none; max-height: calc(100dvh - 2 * var(--o-space-4));
  margin: auto; padding: var(--peek) 0 0;
  border: 0; background: transparent; color: var(--o-ink);
  overflow: visible;
}
.f-in::backdrop { background: color-mix(in srgb, var(--o-ink) 34%, transparent); }
/* Where Luna can sit over the page header (a phone's full-height sheet, or
   a short window under 720px), a solid backdrop keeps the logo from poking
   out behind her; taller tablets keep the dimmed page */
@media (max-width: 599.98px), (max-width: 719.98px) and (max-height: 56rem) {
  .f-in::backdrop { background: color-mix(in srgb, var(--o-ink) 34%, var(--o-canvas)); }
}
.f-in__sheet {
  position: relative; z-index: 1;
  max-height: calc(100dvh - 2 * var(--o-space-4) - var(--peek));
  overflow: auto; overscroll-behavior: contain;
  background: var(--o-surface);
  border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow-raised);
}
.f-in__peek { position: absolute; z-index: 0; inset-block-start: 0; inset-inline-start: var(--o-space-6); pointer-events: none; }
.f-in__peek img { display: block; inline-size: 6.5rem; height: auto; }
.f-in__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--o-space-4);
  padding: var(--o-space-5) var(--o-space-4) var(--o-space-2) var(--o-space-6);
}
.f-in__title { font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui); letter-spacing: var(--o-track-heading); padding-block-start: var(--o-space-2); }
.f-in__title:focus { outline: none; }
.f-in__title[hidden] { display: none; }
.f-in__body { padding: 0 var(--o-space-6) var(--o-space-6); }
.f-in__body > [data-in-state] { display: grid; gap: var(--o-space-4); }
.f-in__body > [data-in-state][hidden], .f-in [data-in-kind][hidden], .f-in [data-in-org][hidden] { display: none; }
.f-in__lead { color: var(--o-ink-2); text-wrap: pretty; }
.f-in__form { display: grid; gap: var(--o-space-4); }
.f-in__roles { border: 0; margin: 0; padding: 0; min-width: 0; }
.f-in__form .o-input, .f-in__form .o-textarea { width: 100%; }
.f-in__form .o-textarea { min-block-size: 5.5rem; resize: vertical; }
.f-in__adult { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.f-in__note { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty; }
.f-in__hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; opacity: 0; }
.f-in__done { font-size: var(--o-text-lead); line-height: var(--o-lh-lead); text-wrap: pretty; }
.f-in__done:focus { outline: none; }
@media (max-width: 599.98px) {
  /* a sheet from the bottom, leaving room above it for Luna */
  .f-in { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; --peek: 4.5rem; }
  .f-in__sheet { height: 100%; max-height: none; border-radius: var(--o-r-card) var(--o-r-card) 0 0; border-block-end: 0; }
  /* the Close button stays in reach while the form scrolls */
  .f-in__head { position: sticky; top: 0; z-index: 1; background: var(--o-surface); padding-inline-start: var(--o-space-4); }
  .f-in__peek { inset-block-start: var(--o-space-3); inset-inline-start: var(--o-space-4); }
  .f-in__body { padding-inline: var(--o-space-4); }
}

/* ======================================================== small reveals
   front.js arms these (.is-armed) only in full motion and lets them go once
   they're in (data-in): the three cards rise in one after another. */
.f-why__card.is-armed { transition: opacity 760ms var(--o-ease), translate 760ms var(--o-ease); transition-delay: calc(var(--i, 0) * 110ms); }
.f-why__card.is-armed:not([data-in]) { opacity: 0; translate: 0 22px; }
.f-why__card.is-armed:focus-within { opacity: 1; translate: none; transition: none; }

/* ============================================================ motion levels */
html:is([data-motion="reduced"], [data-motion="still"]) :is(.f-isle__art, .f-class__orli, .f-tag__thread) { animation: none !important; }
html:is([data-motion="reduced"], [data-motion="still"]) .f-class__orli::before { animation: none !important; }
html:is([data-motion="reduced"], [data-motion="still"]) .f-isle:hover .f-isle__art img { translate: none; }
html:is([data-motion="reduced"], [data-motion="still"]) .f-isle:is(:hover, :has(.f-isle__link:focus-visible)) { translate: none; }
html:is([data-motion="reduced"], [data-motion="still"]) .f-tag__stitch { --f-gap: 72deg !important; transition: none; }
html[data-motion="still"] :is(.f-isle__card, .f-isle, .f-isle__art img, .f-isle .o-arrow, .f-peek__orli) { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) :is(.f-isle__art, .f-class__orli, .f-tag__thread) { animation: none !important; }
  html:not([data-motion]) .f-class__orli::before { animation: none !important; }
  html:not([data-motion]) .f-isle:hover .f-isle__art img { translate: none; }
  html:not([data-motion]) .f-isle:is(:hover, :has(.f-isle__link:focus-visible)) { translate: none; }
  html:not([data-motion]) .f-tag__stitch { --f-gap: 72deg !important; transition: none; }
}

/* ============================================ high contrast, forced colours */
html[data-contrast="high"] :is(.f-isle__card, .f-why__card) { border-color: var(--o-ink); }
@media (max-width: 899.98px) { html[data-contrast="high"] .f-isle:not(.f-isle--schools) { border-color: var(--o-ink); } }
@media (forced-colors: active) {
  .f-hero__sky, .f-why__card::after, .f-why__art::after,
  .f-class__orli::before, .f-class__frame::after, .f-cta::before, .f-tag::before, .f-tag__stitch, .f-tag__thread, .f-peek { display: none; }
  .f-hero__stage { background: Canvas; }
  :is(.f-isle__card, .f-why__card) { border-color: CanvasText; background: Canvas; }
  .f-isle:not(.f-isle--schools) { background: Canvas; }
  .f-tag { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .f-status--live::before { background: CanvasText; }
  .f-isle:has(.f-isle__link:focus-visible) .f-isle__card { outline-color: Highlight; }
}

/* ===================================================================== print */
@media print {
  .f-hero__sky, .f-in, .f-peek { display: none; }
  html.js .f-hero { margin-block-start: 0; }
  .f-hero__stage { background: none; padding-block-start: var(--o-space-6); }
  .f-isle__card, .f-isle { rotate: none; }
}