/* World pages (space edition). Each world is one big living place behind a story that scrolls (js/living.js); the
   type styles come from css/space.css (.sp-panel, .sp-title, .sp-line). Each page sets its portal colour as --pc on <body>.
   Privacy is a quiet text page (js/world.js). */
.world-page { background: #05050a; color: var(--cream); }

/* The living world (js/living.js), on the Shopify Editions model: the story is ordinary page flow and moves 1:1 with
   the finger; the world sits behind it (sticky), and its camera glides with the scroll. Nothing is pinned, nothing
   fades out while on screen, and the footer follows at the same speed. */
.lw { position: relative; background: #05050a; }
.lw-bg { position: sticky; top: 0; height: 100lvh; overflow: hidden; z-index: 0; }
/* the world: one big image moved as one layer, its living parts (baked video loops) on top. Before living.js places
   it (no JS), it covers the screen like a photo */
.lw-world { position: absolute; inset: 0; transform-origin: 0 0; }
.js .lw-world { opacity: 0; }                                     /* shown by living.js once placed and decoded: no flash */
.lw-world picture { display: contents; }
.lw-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lw-world.is-placed { inset: auto; left: 0; top: 0; will-change: transform; }
.lw-world.is-pixel .lw-img, .lw-world.is-pixel .lw-loop { image-rendering: pixelated; }
/* a loop sits exactly over its part of the image; its edges are the image itself (tools/lw-loops.py bakes them in),
   so it needs no mask: no ghosting where two pictures blend, and nothing extra to redraw on every frame */
.lw-loop { position: absolute; display: block; object-fit: fill; pointer-events: none; }

/* the story: one stop per screen and a half; the words sit low in each stop and scroll through */
.lw-story { position: relative; z-index: 2; margin-top: -100lvh; }
.lw .sp-panel { position: relative; max-width: none; min-height: 150svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--edge) 22svh; }
.lw .sp-panel[data-stop="0"] { min-height: 100svh; padding-bottom: 14svh; }
.lw .sp-panel:last-child { min-height: 130svh; padding-bottom: 30svh; }
/* the words' shade band and entrances are shared with Home (css/space.css .lw-words); each world has its own way in */
.lw .sp-eyebrow { color: var(--pc); }
/*   build  pixel: hard steps, like a game sprite spawning */
.js .lw[data-look="build"] .lw-words > * { transition-timing-function: steps(4, end); }
/*   seed   learning: drifts in on the air */
.js .lw[data-look="seed"] .lw-words > * { transform: translate(-20px, 16px) rotate(-1.5deg); }
/*   lens   websites: swells into focus */
.js .lw[data-look="lens"] .lw-words > * { transform: scale(0.94); transform-origin: 0 50%; }
/*   wind   business: uncovered from left to right */
.js .lw[data-look="wind"] .lw-words > * { transform: none; clip-path: inset(-20% 100% -20% -20%); }
/*   vine   ai: lit from the top as the vine reaches down */
.js .lw[data-look="vine"] .lw-words > * { transform: none; clip-path: inset(-20% -20% 100% -20%); }
/*   wake   about: opens from a centre line, like water parting */
.js .lw[data-look="wake"] .lw-words > * { transform: none; clip-path: inset(50% -20% 50% -20%); }
/*   beam   contact: a beam sweeps across */
.js .lw[data-look="beam"] .lw-words > * { transform: none; clip-path: inset(-20% 100% -20% -20%); transition-duration: 0.5s, 0.5s, 1.2s; }
/* arrived: every look ends whole and in place (this must outrank the looks above) */
.js .lw[data-look] .lw-words.is-in > * { opacity: 1; transform: none; clip-path: inset(-20% -20% -20% -20%); }
/* the portal ring we came through, opening past the edges of the screen as we arrive */
.wp-ring { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; translate: -50% -50%; z-index: 3;
  pointer-events: none; opacity: 0; overflow: visible; }
.wp-ring circle { fill: none; stroke: var(--pc); stroke-width: 1.2; filter: drop-shadow(0 0 6px var(--pc)); }

/* About: the facts as a short list; Contact: the address large */
.sp-facts { list-style: none; padding: 0; display: grid; width: min(100%, 30rem); border-top: 1px solid rgb(255 255 255 / 0.18); }
.sp-facts li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-4); padding-block: 10px; border-bottom: 1px solid rgb(255 255 255 / 0.18); }
.sp-facts .mono { color: rgb(251 246 238 / 0.75); padding-top: 3px; }
.sp-mail { font-size: clamp(1.8rem, 1rem + 3vw, 3.6rem); font-weight: var(--w-heavy); letter-spacing: -0.04em; color: var(--cream); text-decoration: none;
  border-bottom: 3px solid var(--pc); padding-bottom: 4px; }
.sp-mail:hover { color: var(--pc); }

/* Privacy: a quiet page */
.wp-hero { position: relative; display: grid; align-items: end; overflow: hidden; }
.wp-hero.is-quiet { min-height: 62svh; background: radial-gradient(ellipse at 70% 0%, color-mix(in srgb, var(--pc) 22%, transparent), transparent 60%); }
.wp-hero-copy { position: relative; display: grid; gap: var(--s-4); justify-items: start; padding-bottom: clamp(56px, 12vh, 120px); }
.wp-eyebrow { color: var(--pc); }
.wp-title { font-size: clamp(3rem, 1rem + 6vw, 7rem); font-weight: var(--w-heavy); letter-spacing: -0.055em; line-height: 0.92; max-width: 12ch; text-wrap: balance; }
.wp-line { font-size: clamp(1.05rem, 0.92rem + 0.45vw, 1.3rem); line-height: 1.45; font-weight: 500; max-width: 30rem; color: rgb(251 246 238 / 0.92); }
.wp-body { padding-block: var(--section-y); display: grid; gap: var(--s-6); }
.wp-prose { max-width: 42rem; display: grid; gap: var(--s-4); line-height: 1.65; color: rgb(251 246 238 / 0.9); }
.wp-prose h2 { font-size: 1.4rem; font-weight: var(--w-display); letter-spacing: -0.02em; margin-top: var(--s-5); color: var(--cream); }
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.wd > span { display: inline-block; }

@media (max-width: 767px) {
  .wp-title { font-size: clamp(2.6rem, 1rem + 8vw, 3.6rem); }
  .sp-facts li { grid-template-columns: 1fr; gap: 2px; }
}