/* ==========================================================================
   AevoMind — systems sticky-scroll sequence  [PREVIEW, not yet on the live site]
   --------------------------------------------------------------------------
   Adapted from the supplied standalone component. Two deliberate changes:

   1. RECOLOURED to the AevoMind palette — racing green, champagne gold,
      copper — and re-typed to Fraunces / Instrument Sans / Spline Sans Mono
      so it sits inside the existing site rather than beside it.
   2. SCOPED. The original carried a full base reset (html, body, img, a,
      button, ::selection) from its parent site, which would have fought
      css/style.css. Those globals are dropped and everything else is
      namespaced under .constellation, so nothing can leak into the rest of the page.
   ========================================================================== */
:root{
  --c-black:#04100b;   --c-black-rgb:4,16,11;
  --c-stone:#071b13;   --c-stone-rgb:7,27,19;
  --c-grey:#1c3a2c;    --c-grey-rgb:28,58,44;
  --c-brown:#d97e4a;   --c-brown-rgb:217,126,74;
  --c-yellow:#f2edda;  --c-yellow-rgb:242,237,218;
  --c-white:#f2edda;   --c-white-rgb:242,237,218;
  --c-red:#e06a4a;     --c-stroke:#7fae95;
  --c-gold:#e8c547;    --c-gold-rgb:232,197,71;

  --p:1rem;
  --m:.8rem;
  --mm:.64rem;
  --h6:1.25rem;
  --h5:1.5625rem;
  --h4:1.9531rem;
  --h3:2.4414rem;
  --h2:3.0518rem;
  --h1:3.8147rem;
  --h0:4.7684rem;
  --large:max(7.45rem,12.5vw);
  --lh:1.3;
  --large-lh:.78;
  --head-lh:1.05;

  --f-cubic:cubic-bezier(.35,.35,0,1);
  --f-cubic-in:cubic-bezier(.69,0,0,1);
  --f-smooth:cubic-bezier(.5,0,.3,1);
  --f-smooth-alt:cubic-bezier(.6,0,.05,1);
  --f-fast:cubic-bezier(.2,.75,.35,1);
  --f-bounce:cubic-bezier(.6,.5,0,3);

  --g-gap:1rem;
  --g-margin:2rem;
  --g-columns:12;

  --font-t-1:'Fraunces',Georgia,serif;                    /* headings */
  --font-t-2:'Fraunces',Georgia,serif;                    /* display  */
  --font-b:'Instrument Sans','Helvetica Neue',sans-serif; /* body     */
  --font-m:'Spline Sans Mono','SF Mono',monospace;        /* data     */

  --vh:1vh;
  --vw:1vw;
}

/* ---------- base ---------- */











/* ---------- typography ---------- */
.constellation .-h0, .constellation .-h1, .constellation .-h2, .constellation .-h3, .constellation .-h4, .constellation .-h5, .constellation .-h6, .constellation .-hp, .constellation .-hm, .constellation h1, .constellation h2, .constellation h3, .constellation h4, .constellation h5, .constellation h6{font-family:var(--font-t-1);font-weight:400;line-height:var(--head-lh)}
.constellation .-h0{font-size:var(--h0)}
.constellation .-h1{font-size:var(--h1)}
.constellation .-h2{font-size:var(--h2)}
.constellation .-h3{font-size:var(--h3)}
.constellation .-h4{font-size:var(--h4)}
.constellation .-h5{font-size:var(--h5)}
.constellation .-h6{font-size:var(--h6)}
.constellation .-hp{font-size:var(--p)}
.constellation .-hm{font-size:var(--m)}
.constellation .-lrg, .constellation .-lrg-max{font-family:var(--font-t-2);font-weight:400;line-height:var(--large-lh);letter-spacing:-.01em}
.constellation .-lrg{font-size:var(--large)}
.constellation .-lrg-max{font-size:calc(var(--large)*1.25)}
.constellation .-p{font-size:var(--p)}
.constellation .-m{font-size:var(--m)}
.constellation .-mm{font-family:var(--font-b);font-weight:500;font-size:var(--mm);line-height:var(--lh)}
.constellation .-p-hp, .constellation .-p-h6{display:block;font-family:var(--font-b);text-transform:uppercase;letter-spacing:.02em}
.constellation .-p-hp{font-size:var(--p)}
.constellation .-p-h6{font-size:var(--h6)}
.constellation .-up{text-transform:uppercase}
.constellation .-nl{text-decoration:none}
.constellation p{margin:0}

.constellation .visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- grid ---------- */
.constellation .-w{
  display:grid;
  grid-template-columns:repeat(var(--g-columns),1fr);
  column-gap:var(--g-gap);
  margin:0 var(--g-margin);
}
.constellation .-w>*{
  grid-column:var(--left,1)/span var(--width,var(--g-columns));
  grid-row-start:var(--top,auto);
  min-width:0;
}
.constellation .-gc{
  display:grid;
  grid-template-columns:repeat(var(--columns,12),1fr);
  grid-template-rows:repeat(var(--rows,1),var(--rowsHeight,auto));
  column-gap:var(--g-gap);
  position:relative;
}
.constellation .-gc>*{
  grid-column:var(--left,1)/calc(var(--left,1) + var(--width,1));
  grid-row:var(--top,1)/calc(var(--top,1) + var(--height,1));
  min-width:0;
}

/* ---------- figures ---------- */
.constellation figure.-fit{height:100%;overflow:hidden;position:relative;width:100%}
.constellation figure.-fit img{height:100%;object-fit:cover;width:100%}
.constellation figure img[data-lazy]{opacity:0}
.constellation figure img{opacity:1;transition:opacity .9s var(--f-cubic)}
.constellation figure img.-lazy-wait{opacity:0}

/* ---------- split text primitives ---------- */
.constellation .-s-char{display:inline-block;white-space:pre}
.constellation .-s-line{display:block;overflow:hidden}
.constellation .-s-word{display:inline-block;white-space:pre}

/* big display chars: hidden until section .-in */
.constellation [data-reveal] .-lrg .-s-char, .constellation [data-reveal] .-lrg-max .-s-char{
  filter:blur(.05em);
  opacity:0;
  transform:translate3d(calc(var(--dx,0)*1em),calc(var(--dy,.35)*.6em),0) scale(1.08);
  transition:opacity 1.2s var(--f-cubic),transform 1.2s var(--f-cubic),filter 1.2s var(--f-cubic);
  transition-delay:calc(var(--cd,0)*.7s);
  will-change:transform,filter;
}
.constellation [data-reveal].-in .-lrg .-s-char, .constellation [data-reveal].-in .-lrg-max .-s-char{
  filter:blur(0);
  opacity:1;
  transform:translateZ(0) scale(1);
}
/* generic char splits (buttons keep their own behaviour) */
.constellation [data-reveal] [data-split="char"]:not(.-lrg):not(.-lrg-max):not(.text) .-s-char{
  opacity:0;
  transform:translate3d(0,.6em,0);
  transition:opacity .9s var(--f-cubic),transform .9s var(--f-cubic);
  transition-delay:calc(var(--cd,0)*.5s + var(--ci,0)*12ms);
}
.constellation [data-reveal].-in [data-split="char"]:not(.-lrg):not(.-lrg-max):not(.text) .-s-char{
  opacity:1;transform:translateZ(0);
}
/* line splits */
.constellation [data-reveal] .-s-line .-s-word{
  transform:translate3d(0,1.5em,0);
  transition:transform .9s var(--f-cubic);
  transition-delay:calc(var(--li,0)*90ms + var(--l-delay,0)*150ms);
}
.constellation [data-reveal].-in .-s-line .-s-word{transform:translateZ(0)}
/* simple reveal blocks */
.constellation .-a-to-top, .constellation .-a-to-bottom{
  opacity:0;
  transition:opacity 1.2s var(--f-cubic),transform 1.2s var(--f-cubic);
  transition-delay:calc(var(--l-delay,0)*1s);
}
.constellation .-a-to-top{transform:translate3d(0,2.5rem,0)}
.constellation .-a-to-bottom{transform:translate3d(0,-2.5rem,0)}
.constellation [data-reveal].-in .-a-to-top, .constellation [data-reveal].-in .-a-to-bottom{opacity:1;transform:translateZ(0)}

/* text swap transitions (sequencer-driven texts) */
.constellation .-t-enter-from .-s-word{transform:translate3d(0,1.5em,0)}
.constellation .-t-enter-active .-s-word{transition:transform .9s var(--f-cubic);transition-delay:calc(.3s + 75ms*var(--t-delay,0) + 75ms*var(--li,0))}
.constellation .-t-leave-active .-s-word{transition:transform .9s var(--f-smooth)}
.constellation .-t-leave-to .-s-word{transform:translate3d(0,1.5em,0)}
.constellation .-t-enter-from.-chars .-s-char{opacity:0;transform:translate3d(calc(.1em*var(--ci,0)),.5em,0) scale(1.5)}
.constellation .-t-enter-active.-chars .-s-char{transition:opacity .9s var(--f-cubic),transform .9s var(--f-cubic);transition-delay:calc(var(--ci,0)*75ms)}
.constellation .-t-leave-active.-chars .-s-char{transition:opacity .9s var(--f-cubic),transform .9s var(--f-cubic);transition-delay:calc(var(--ci,0)*75ms)}
.constellation .-t-leave-to.-chars .-s-char{opacity:0;transform:translate3d(calc(-.1em*var(--ci,0)),-.5em,0) scale(1.5)}


/* ---------- places / systems sequence ---------- */
/* ---------- places ---------- */
.constellation .c-places{background-color:var(--c-black);color:var(--c-yellow);position:relative}
.constellation .c-places .places-path{aspect-ratio:1440/1080;inset:calc(var(--large)*-1) 0 auto 0;pointer-events:none;position:absolute;width:100%;z-index:1}
.constellation .c-places .title{
  align-items:center;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;text-align:center;z-index:2;
}
.constellation .c-places .title span{position:relative}
.constellation .c-places .title span.line-2{margin:-1em;padding:1em;mask-image:linear-gradient(180deg,#000 40%,transparent 65%)}
.constellation .c-places .caption{
  align-items:center;display:flex;flex-direction:column;height:0;
  position:relative;text-align:center;z-index:3;
}
.constellation .c-places .caption span{display:block}
.constellation .c-places .caption span:first-child{translate:-.25em 0}
.constellation .c-places .caption span:nth-child(2){translate:2em 0}
.constellation .c-places .caption span:nth-child(3){translate:-.5em 0}
.constellation .c-places .places-story{contain:paint layout;position:relative;width:100%}
.constellation .c-places .places-story:before{
  background-image:linear-gradient(to bottom,var(--c-black),transparent);
  content:"";height:calc(var(--vh)*20);position:absolute;top:0;width:100%;z-index:1;
}
.constellation .c-places .places-story .gl{
  align-items:flex-start;display:flex;height:0;pointer-events:none;
  position:sticky;top:0;z-index:0;
}
.constellation .c-places .places-story .gl .relief-bg{height:calc(var(--vh)*100);width:100%;opacity:calc(1 - var(--progress-ending,0))}
.constellation .c-places .places-story .gl .relief-bg canvas{display:block;height:100%;width:100%}
.constellation .c-places .places-story .-w{position:relative;z-index:2}
.constellation .c-places .places-story .sticky-container{--width:12;height:calc(var(--vh)*400)}
.constellation .c-places .places-story .sticky-container .-gc{
  grid-template-rows:repeat(20,1fr);
  height:calc(var(--vh)*100);
  position:sticky;
  row-gap:var(--g-gap);
  top:0;
}
.constellation .c-places .places-story .sticky-container .-gc .i{border-radius:.4rem;display:block;will-change:transform}
.constellation .c-places .places-story .sticky-container .-gc .i-1{--top:3;--height:4;--left:8;--width:2;
  transform:translate(calc(min(var(--progress,0)*2,1)*var(--vw)*30),calc(min(var(--progress,0)*2,1)*var(--vh)*-30))}
.constellation .c-places .places-story .sticky-container .-gc .i-2{--top:5;--height:6;--left:10;--width:3;
  transform:translate(calc(min(var(--progress,0)*2,1)*var(--vw)*30),calc(min(var(--progress,0)*2,1)*var(--vh)*-10))}
.constellation .c-places .places-story .sticky-container .-gc .i-3{--top:11;--height:8;--left:10;--width:3;
  transform:translate(calc(min(var(--progress,0)*2,1)*var(--vw)*35),calc(min(var(--progress,0)*2,1)*var(--vh)*10))}
.constellation .c-places .places-story .sticky-container .-gc .i-4{--top:15;--height:5;--left:4;--width:3;
  transform:translate(calc(min(var(--progress,0)*2,1)*var(--vw)*-20),calc(min(var(--progress,0)*2,1)*var(--vh)*30))}
.constellation .c-places .places-story .sticky-container .-gc .i-5{--top:13;--height:5;--left:1;--width:3;
  transform:translate(calc(min(var(--progress,0)*2,1)*var(--vw)*-30),calc(min(var(--progress,0)*2,1)*var(--vh)*10))}
.constellation .c-places .places-story .sticky-container .-gc .i-6{--top:5;--height:8;--left:1;--width:3;
  transform:translate(calc(min(var(--progress,0)*2,1)*var(--vw)*-35),calc(min(var(--progress,0)*2,1)*var(--vh)*-30))}
.constellation .c-places .places-story .sticky-container .-gc .sequence-container{
  --left:1;--width:12;--top:1;--height:20;
  --sc-offset-y:calc(30% - var(--g-gap)/1.5);
  --sc-offset-x:calc(25% + var(--g-gap)/4);
  --sc-calc-x:calc(var(--sc-offset-x)*(1 - min(var(--progress,0)*2,1)));
  --sc-calc-y:calc(var(--sc-offset-y)*(1 - min(var(--progress,0)*2,1)) + var(--g-gap));
  clip-path:inset(var(--sc-calc-y) var(--sc-calc-x) var(--sc-calc-y) var(--sc-calc-x) round .4rem);
  height:100%;
  overflow:hidden;
  position:relative;
}
.constellation .c-places .sequence-controller{
  --sctl-offset-x:calc(41.66667% + var(--g-gap)/2.5);
  --sctl-calc-y:calc(50%*var(--progress-ending,0) + var(--g-gap));
  --sctl-calc-x:calc(var(--sctl-offset-x)*var(--progress-ending,0));
  clip-path:inset(var(--sctl-calc-y) var(--sctl-calc-x) var(--g-gap) var(--sctl-calc-x) round .8rem .8rem .4rem .4rem);
  display:grid;
  height:100%;
  place-items:center;
  position:relative;
  scale:calc(.75 + min(var(--progress,0)*2,1)*.25);
  width:100%;
  will-change:transform;
}
.constellation .c-places .sequence-controller figure{
  grid-area:1/1;height:100%;position:relative;
  scale:calc(1 - var(--progress-ending,0)/2);
  transform-origin:50% 100%;
  visibility:hidden;width:100%;
}
.constellation .c-places .sequence-controller figure img{
  transform:translateZ(0) scale(1.5,1.2);
  transform-origin:100% 50%;
  transition:transform 1.5s var(--f-cubic);
}
.constellation .c-places .sequence-controller figure.-leaving{visibility:visible;z-index:2}
.constellation .c-places .sequence-controller figure.-entering{clip-path:inset(0 100% 0 0)!important;visibility:visible}
.constellation .c-places .sequence-controller figure.-leaving~.-entering{clip-path:inset(0 0 0 100%)!important}
.constellation .c-places .sequence-controller figure.-active{
  clip-path:inset(0 0 0 0);
  transition:clip-path .9s var(--f-cubic);
  visibility:visible;z-index:3;
}
.constellation .c-places .sequence-controller figure.-active img{transform:translateZ(0) scale(1)}
.constellation .c-places .sequesnce-nav{
  --left:4;--width:6;--top:1;--height:20;
  align-self:end;
  position:relative;
  transform:translate3d(0,calc(var(--vh)*-35 - (var(--vh)*-35 + var(--h0))*var(--progress,0)),0);
  z-index:20;
}
.constellation .c-places .sequesnce-nav .place-name{
  display:grid;line-height:.7;margin-left:var(--g-gap);
  place-items:center start;white-space:nowrap;
}
.constellation .c-places .sequesnce-nav .place-name>*{grid-area:1/1}
.constellation .c-places .sequesnce-nav nav{
  align-items:center;border-top:1px solid rgba(var(--c-yellow-rgb),.2);
  display:grid;gap:var(--g-gap);grid-template-columns:repeat(6,1fr);
  padding-top:calc(var(--g-gap)/2);
}
.constellation .c-places .sequesnce-nav nav button{
  background-color:var(--c-black);
  border-radius:50%;
  clip-path:circle(calc(50% - 1px) at 50%);
  display:grid;
  grid-row-start:1;
  justify-self:center;
  overflow:hidden;
  padding:1rem;
  place-items:center;
  position:relative;
}
.constellation .c-places .sequesnce-nav nav button:before{
  background-color:var(--c-yellow);border-radius:50%;content:"";inset:0;position:absolute;
  scale:1 0;transform-origin:50% 100%;transition:scale 1.2s var(--f-cubic-in);z-index:1;
}
.constellation .c-places .sequesnce-nav nav button:hover:before{scale:1 1;transition:scale .9s var(--f-cubic)}
.constellation .c-places .sequesnce-nav nav button svg{
  fill:var(--c-yellow);grid-area:1/1;height:2.5rem;position:relative;
  transform-origin:50% 400%;transition:rotate 1.2s var(--f-cubic-in);width:2.5rem;z-index:1;
}
.constellation .c-places .sequesnce-nav nav button svg:first-child{rotate:calc(0deg*var(--direction,1))}
.constellation .c-places .sequesnce-nav nav button svg:nth-child(2){fill:var(--c-black);rotate:calc(-90deg*var(--direction,1))}
.constellation .c-places .sequesnce-nav nav button:hover svg{transition:rotate .9s var(--f-cubic)}
.constellation .c-places .sequesnce-nav nav button:hover svg:first-child{rotate:calc(90deg*var(--direction,1))}
.constellation .c-places .sequesnce-nav nav button:hover svg:nth-child(2){rotate:calc(0deg*var(--direction,1))}
.constellation .c-places .sequesnce-nav nav button.prev{grid-column:3/4}
.constellation .c-places .sequesnce-nav nav button.next{grid-column:4/5}
.constellation .c-places .sequesnce-nav nav button.next:after{
  background-image:conic-gradient(from 0deg,var(--c-black),var(--c-yellow) calc(var(--slide-progress,0deg)),transparent 0);
  border-radius:50%;content:"";display:block;inset:0;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  padding:2px;position:absolute;
  transition:opacity .6s var(--f-cubic);
}
.constellation .c-places .sequesnce-nav nav button.next:hover:after{opacity:0}
.constellation .c-places .sequesnce-nav nav .order{
  align-items:center;display:flex;grid-column:6/7;grid-row-start:1;
  justify-content:center;justify-self:center;padding:1rem;position:relative;
}
.constellation .c-places .sequesnce-nav nav .order:before, .constellation .c-places .sequesnce-nav nav .order:after{
  border:1px solid rgba(var(--c-yellow-rgb),.2);border-radius:50%;content:"";
  display:block;padding:50% 0;position:absolute;width:100%;
}
.constellation .c-places .sequesnce-nav nav .order:after{border-color:rgba(var(--c-yellow-rgb),.1);padding:60% 0;width:120%}
.constellation .c-places .sequesnce-nav nav .order>span{display:flex}
.constellation .c-places .progress-end{height:1px}

/* ---------- responsive ---------- */
@media (max-width:859px){
  :root{--g-columns:6;--g-margin:1rem;--large:max(4.6rem,17vw)}
  .constellation .c-places .places-story .sticky-container .-gc .sequence-container{--width:6}
  .constellation .c-places .sequesnce-nav{--left:1;--width:6;transform:none;align-self:end;margin-bottom:var(--h5)}
}

/* ---------- host integration ----------
   The original ran on its own page with .scroll-room spacers. Here the
   surrounding chapters provide the lead-in and lead-out, so those are gone.
   These rules make the section sit correctly inside our stacking context. */
.constellation{position:relative;z-index:2;}
.constellation *,.constellation *:before,.constellation *:after{box-sizing:border-box;}
.constellation img{display:block;max-width:100%;}
.constellation figure{margin:0;}
.constellation a{color:inherit;}
.constellation button{background:transparent;border:none;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;padding:0;}

/* Gold accents, so it reads as ours rather than as a borrowed component. */
.constellation .c-places .caption{color:var(--c-gold);font-family:var(--font-m);letter-spacing:.24em;}
.constellation .c-places .title .-lrg em,
.constellation .c-places .title .line-2{color:var(--c-gold);}
.constellation .c-places .sequesnce-nav .place-name{font-family:var(--font-t-1);}
.constellation .c-places .sequesnce-nav nav .order{font-family:var(--font-m);}

/* ---------- fixes found by testing it in a real browser ---------- */

/* The title started flush against the top of the section, so on the homepage
   the fixed site header sat over it and "The" was cut in half. Give the
   section enough top room to clear the header at every breakpoint. */
.constellation .c-places{padding-top:clamp(96px,14vh,190px);}

/* The caption originally stacked four words in a zero-height flex column, which
   the engine's parallax then offset — the words collided ("FivSystems"). It is
   now one centred line, which is both robust and reads better. */
.constellation .c-places .caption{
  height:auto;
  flex-direction:row;justify-content:center;
  margin-top:clamp(18px,2.4vh,34px);
  font-family:var(--font-m);
  font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.24em;
  text-transform:uppercase;
}
.constellation .c-places .caption span{display:inline-block;white-space:nowrap;}

/* Keep the sequence clear of the header too once it is sticky at top:0. */
.constellation .c-places .places-story .sticky-container .-gc{
  padding-top:clamp(56px,7vh,84px);
}

/* The system name and counter sit directly on the photograph, and our images
   vary from near-black (connections) to very bright (umbrella). On the bright
   ones the cream text disappeared. A soft shadow costs nothing on the dark
   images and rescues legibility on the light ones. */
.constellation .c-places .sequesnce-nav .place-name,
.constellation .c-places .sequesnce-nav nav .order{
  text-shadow:0 1px 14px rgba(4,16,11,.85), 0 1px 3px rgba(4,16,11,.9);
}
.constellation .c-places .sequesnce-nav nav .order:before{
  border-color:rgba(242,237,218,.42);
}
.constellation .c-places .sequesnce-nav nav button svg{
  filter:drop-shadow(0 1px 6px rgba(4,16,11,.8));
}

/* The grid size used to be hardcoded inline on .-gc as --columns:12. An inline
   custom property beats any stylesheet rule, so the mobile breakpoint's
   6-column grid never took effect and the slider rendered at half width on
   phones — 171px inside a 390px viewport. (The component shipped with this
   fault; its README describes the intended full-width behaviour that never
   actually happened.) Declaring it here instead lets the media query win. */
.constellation .c-places .places-story .sticky-container .-gc{--columns:12;--rows:20;}
@media (max-width:859px){
  .constellation .c-places .places-story .sticky-container .-gc{--columns:6;}
}

/* Between 860px and ~1200px the satellites crowd the centre slide, so make
   them smaller. NOTE: this MUST NOT touch `transform` — the whole fly-away
   choreography lives in `transform: translate(...)` on .i-1….i-6, and setting
   transform here silently replaces it, freezing the satellites in place.
   (That is exactly what happened; caught on review.) Resize via the grid
   custom properties instead, which compose rather than override. */
@media (min-width:860px) and (max-width:1200px){
  .constellation .c-places .places-story .sticky-container .-gc .i-1{--width:2;--height:3;}
  .constellation .c-places .places-story .sticky-container .-gc .i-2{--width:2;--height:5;}
  .constellation .c-places .places-story .sticky-container .-gc .i-3{--width:2;--height:6;}
  .constellation .c-places .places-story .sticky-container .-gc .i-4{--width:2;--height:4;}
  .constellation .c-places .places-story .sticky-container .-gc .i-5{--width:2;--height:4;}
  .constellation .c-places .places-story .sticky-container .-gc .i-6{--width:2;--height:6;}
}

/* ---------- phone layout ----------
   Below 860px the satellites are gone, so the choreography is just one image
   growing. Two things made that read badly:

   1. The slide filled the full 20-row grid slot — a 358x785 portrait frame.
      Our photography is 1600x1073 landscape, so object-fit:cover threw away
      about 70% of every image and left a narrow vertical slice. Give the frame
      an aspect ratio close to the source instead.
   2. It reserved 400vh of scroll — 4.4 screen-heights of thumb-work on a phone
      for a single image. Cut it to a little under two.
*/
@media (max-width:859px){
  .constellation .c-places .places-story .sticky-container{height:calc(var(--vh)*280);}
  .constellation .c-places .places-story .sticky-container .-gc .sequence-container{
    aspect-ratio:3/2;
    height:auto;
    align-self:center;
  }
  /* The name and counter sit under the picture on phones rather than over it,
     where there is no room for both. */
  .constellation .c-places .sequesnce-nav{
    align-self:center;
    margin-bottom:0;
    margin-top:clamp(14px,3vh,26px);
  }
  .constellation .c-places{padding-top:clamp(72px,10vh,120px);}
}

/* Phone: put the picture and its controls in separate bands of the grid, and
   lay the controls out as a simple centred row. On the desktop layout the nav
   floats over the image, which works when the image is 900px tall; over a
   239px one the name, both arrows and the counter collided. */
@media (max-width:859px){
  .constellation .c-places .places-story .sticky-container .-gc .sequence-container{
    --top:5;--height:8;
    align-self:center;
  }
  .constellation .c-places .sequesnce-nav{
    --left:1;--width:6;--top:14;--height:4;
    align-self:start;
    transform:none;
    margin:0;
  }
  .constellation .c-places .sequesnce-nav .place-name{
    display:block;text-align:center;
    font-size:clamp(17px,4.6vw,21px);
    margin-bottom:14px;
  }
  .constellation .c-places .sequesnce-nav nav{
    display:flex;align-items:center;justify-content:center;gap:20px;
    grid-template-columns:none;
    border-top:none;padding-top:0;
  }
  .constellation .c-places .sequesnce-nav nav .prev,
  .constellation .c-places .sequesnce-nav nav .next{padding:.85rem;}
  .constellation .c-places .sequesnce-nav nav .order{
    grid-column:auto;padding:.85rem;margin-left:4px;
  }
}

/* ============================================================
   PHONE CHOREOGRAPHY
   ------------------------------------------------------------
   The component shipped hiding all six satellites below 1024px,
   which left phones with a single image growing and nothing else
   happening. Their desktop positions are set on a 12-column grid
   and are meaningless at 6 columns, so the phone layout is
   authored separately here.

   The 20-row grid is divided into four bands that cannot collide:
     rows 1-5    three satellites, flying up and out
     rows 7-13   the centre slide (3:2, matches the photography)
     rows 14-17  three satellites, flying down and out
     rows 18-20  the name and controls

   Everything is in --vw/--vh so it scales with the device.
   ============================================================ */
@media (max-width:859px){

  /* Centre slide. The desktop opening inset (30%/25%) leaves the
     picture looking like a stamp on a phone, so open it wider. */
  .constellation .c-places .places-story .sticky-container .-gc .sequence-container{
    --left:1;--width:6;--top:7;--height:7;
    --sc-offset-y:calc(14% - var(--g-gap)/1.5);
    --sc-offset-x:calc(12% + var(--g-gap)/4);
    aspect-ratio:3/2;height:auto;align-self:center;
  }

  .constellation .c-places .places-story .sticky-container .-gc .i{
    display:block;border-radius:.4rem;will-change:transform;
  }

  /* --- band 1: three above, flying up and out --- */
  .constellation .c-places .places-story .sticky-container .-gc .i-1{
    --top:1;--height:2;--left:1;--width:2;
    transform:translate(calc(min(var(--progress,0)*1.25,1)*var(--vw)*-26),
                        calc(min(var(--progress,0)*1.25,1)*var(--vh)*-30));
  }
  .constellation .c-places .places-story .sticky-container .-gc .i-2{
    --top:1;--height:3;--left:4;--width:2;
    transform:translate(calc(min(var(--progress,0)*1.25,1)*var(--vw)*30),
                        calc(min(var(--progress,0)*1.25,1)*var(--vh)*-26));
  }
  .constellation .c-places .places-story .sticky-container .-gc .i-3{
    --top:4;--height:2;--left:2;--width:2;
    transform:translate(calc(min(var(--progress,0)*1.25,1)*var(--vw)*10),
                        calc(min(var(--progress,0)*1.25,1)*var(--vh)*-40));
  }

  /* --- band 3: three below, flying down and out --- */
  .constellation .c-places .places-story .sticky-container .-gc .i-4{
    --top:14;--height:3;--left:4;--width:2;
    transform:translate(calc(min(var(--progress,0)*1.25,1)*var(--vw)*28),
                        calc(min(var(--progress,0)*1.25,1)*var(--vh)*30));
  }
  .constellation .c-places .places-story .sticky-container .-gc .i-5{
    --top:14;--height:2;--left:1;--width:2;
    transform:translate(calc(min(var(--progress,0)*1.25,1)*var(--vw)*-28),
                        calc(min(var(--progress,0)*1.25,1)*var(--vh)*28));
  }
  .constellation .c-places .places-story .sticky-container .-gc .i-6{
    --top:15;--height:2;--left:2;--width:3;
    transform:translate(calc(min(var(--progress,0)*1.25,1)*var(--vw)*-6),
                        calc(min(var(--progress,0)*1.25,1)*var(--vh)*38));
  }

  /* --- band 4: controls, clear of every flight path --- */
  .constellation .c-places .sequesnce-nav{
    --left:1;--width:6;--top:17;--height:4;
    align-self:start;
  }

  /* The desktop rule reserves up to 84px above the grid to clear the fixed
     header. The phone header is shorter, and that reserve was pushing the
     controls 11px past the bottom of the viewport. */
  .constellation .c-places .places-story .sticky-container .-gc{
    padding-top:40px;
  }
}