/* ═══════════════════════════════════════════════════════════════════════════
   Crux design system — shared layer
   Source of truth: Figma "Marketing Site" › Mount Crux (Cruxland Home, desktop
   node 1:125, mobile node 1:344). Token names mirror the Figma variables so a
   value can be traced back to the file.

   Scope is deliberately narrow: tokens, base type, and the components every
   page repeats (nav, footer, button, text link, eyebrow, section head). Page
   layout stays in each page's own inline <style>, as before.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ——— colour ——— */
  --accent:#ff6200;              /* --brand-orange */
  --accent-hover:#e65900;
  --accent-on-dark:#ff8a45;      /* #ff6200 is ~2.9:1 on --bg-dark; this clears AA */
  --ink:#1a1a1a;
  --text-brand-ink:#1b1a17;
  --text-primary:#1a1a1a;
  --text-body:#2a2822;           /* nav labels, body copy on sky */
  --text-secondary:#6e6a61;
  --text-label:#55524b;
  --text-card-mute:#9c9583;      /* card body on --surface-card */
  --text-on-dark:#fbfaf5;
  --text-on-dark-mute:rgba(251,250,245,.72);
  --text-on-dark-faint:rgba(251,250,245,.5);   /* .45 fails AA (4.34:1) on --bg-dark */
  --bg-base:#fafaf9;
  --bg-paper:#f2efe7;
  --bg-paper-alt:#ece7db;
  --bg-dark:#1b1a17;
  --surface-card:#2a2822;
  --surface-card-hover:#33302a;
  --border-subtle:rgba(27,26,23,.09);
  --border-subtle-dk:rgba(251,250,245,.1);
  --border-default-dk:rgba(251,250,245,.16);
  /* Cruxland scene */
  --sky:#bfdee3;
  --sky-peach:#ebbfa5;
  --meadow:#636637;
  --meadow-edge:#adb351;
  --glass:rgba(255,255,255,.2);
  --glass-line:rgba(255,255,255,.55);
  --prompt-line:#9cd9e3;
  --land-seam:#d6cdc2;           /* sky colour at the mountain's top edge */
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  --prompt-shadow:inset 0 2px 10px rgba(209,199,188,.7),0 2px 1px rgba(255,255,255,.25);
  --send-bg:#e5e1d5;
  --send-bg-hover:#dcd7c9;
  --send-line:#b4cdd0;
  --trust-line:rgba(255,255,255,.3);
  --nav-stuck:rgba(242,239,231,.86);
  --nav-stuck-line:rgba(27,26,23,.1);
  /* secondary pages — the one-off inks and papers their inline styles use */
  --text-mute:#423e37;
  --text-faint:#8a857a;
  --text-faint-2:#9a958c;
  --text-chip:#35322c;
  --text-legal:#33302a;
  --text-placeholder:#b3ada1;
  --link-hover:#cc4e00;
  --green:#2f6b4f;
  --danger:#c0392b;
  --danger-ink:#8e2b20;
  --surface-paper:#faf6ec;
  --surface-soft:#f3eee2;
  --surface-raised:#fbfaf5;
  --surface-field:#fffdf6;
  --bg-band:#ece8de;
  --bg-page:#fafaf9;             /* Figma "off-white"; the manifesto ground */
  --bg-ink-band:#1b1a17;         /* dark bands; they stay dark, a step below the night page */
  /* channel triplets, for the many rgba() hairlines and washes */
  --ink-rgb:27,26,23;
  --paper-rgb:242,239,231;
  --sky-rgb:191,222,227;
  /* CTA renders, swapped for night versions in dark mode */
  --cta-img:url(/assets/cruxland/cta-bg.webp);
  --cairn-img:url(/assets/cruxland/cairn-mobile.webp);

  /* ——— type ——— */
  --font-sans:'Commissioner',system-ui,-apple-system,sans-serif;
  --font-display:'Archivo',system-ui,-apple-system,sans-serif;   /* card + note titles */
  --font-serif:'Newsreader',Georgia,serif;                       /* pull quotes */
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;            /* carousel arrows, code */

  /* label — nav items, eyebrows, buttons, text links (Figma: size/nav) */
  --size-label:12px;--lh-label:17px;--track-label:2px;
  --size-lede:22px;--lh-lede:36px;
  --size-body:20px;--lh-body:36px;
  --size-section:44px;--lh-section:47.5px;--track-section:-1px;
  --size-hero:60px;--lh-hero:86.5px;--track-hero:-3.5px;
  --size-cta:74px;--lh-cta:71px;--track-cta:-4px;
  --size-quote:33px;--lh-quote:43px;--track-quote:-.5px;
  --size-card-claim:24px;--lh-card-claim:29.5px;
  --size-note-title:18px;--lh-note-title:23.5px;

  /* ——— layout ——— */
  --content:1240px;
  --pad:clamp(24px,6.95vw,100px);   /* 24 at 390, 100 at 1440 */
  --radius-btn:8px;
  --radius-card:6px;
  --radius-field:16px;
  --radius-glass:40px;
  --nav-h:75px;
}
@media(max-width:768px){
  :root{
    --size-hero:20px;
    --size-lede:18px;--lh-lede:24px;
    --radius-glass:20px;
    --size-cta:48px;--lh-cta:48px;--track-cta:-2px;
  }
}

/* ——— Dark mode ———
   Figma: Mount Crux › node 12:262 (desktop homepage at night). Follows the
   OS setting; there is no toggle. Only the homepage is designed, so the
   secondary pages take the same palette through these tokens: paper becomes
   the approach section's slate, paper-alt the quote band's, ink turns light.
   Images that change at night swap through <picture> sources, not CSS. */
@media(prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --ink:#ece7db;
    --text-brand-ink:#fafaf9;
    --text-primary:#ece7db;
    --text-body:#ece7db;
    --text-secondary:#9b9381;
    --text-label:#9b9381;
    --bg-base:#121f28;             /* prompt field */
    --bg-paper:#121a1c;            /* Figma "Our approach" (108:966) */
    --bg-paper-alt:#182326;        /* Figma "What our partners say" */
    --bg-dark:#101b20;             /* CTA ground + footer */
    --surface-card:#182326;
    --surface-card-hover:#1f2d31;
    --border-subtle:rgba(251,250,245,.1);
    /* night scene */
    --sky:#001321;
    --sky-peach:#395464;
    --meadow:#0d2119;
    --land-seam:#1e3544;
    --glass:rgba(255,255,255,.1);
    --glass-line:rgba(255,255,255,.12);
    --glass-shadow:none;
    --prompt-line:#264348;
    --prompt-shadow:inset 0 2px 10px rgba(0,0,0,.2),0 2px 1px rgba(255,255,255,.05);
    --send-bg:#314655;
    --send-bg-hover:#3a5263;
    --send-line:#517175;
    --trust-line:rgba(255,255,255,.14);
    --nav-stuck:rgba(16,27,32,.86);
    --nav-stuck-line:rgba(251,250,245,.1);
    --text-mute:#c4bdae;
    --text-faint:#8f897d;
    --text-faint-2:#8f897d;
    --text-chip:#d8d2c4;
    --text-legal:#d8d2c4;
    --text-placeholder:#6a665e;
    --link-hover:#ff8a45;
    --green:#6fbf97;
    --danger:#ff7a6b;
    --danger-ink:#ffa094;
    --surface-paper:#182326;
    --surface-soft:#141f24;
    --surface-raised:#1b272b;
    --surface-field:#121f28;
    --bg-band:#131e23;
    --bg-page:#121a1c;
    --bg-ink-band:#0a1317;
    --ink-rgb:251,250,245;
    --paper-rgb:18,26,28;
    --sky-rgb:0,19,33;
    --cta-img:url(/assets/cruxland/cta-bg-night.webp);
    --cairn-img:url(/assets/cruxland/cairn-mobile-night.webp);
  }
}

/* ——— base ——— */
.crux{
  margin:0;background:var(--bg-paper);color:var(--text-brand-ink);
  font-family:var(--font-sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.crux ::selection{background:var(--accent);color:var(--text-on-dark)}
.wrap{max-width:calc(var(--content) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad);box-sizing:border-box}

/* ——— label type: the site's most repeated voice ——— */
.label,
.eyebrow{
  font-family:var(--font-sans);font-weight:700;
  font-size:var(--size-label);line-height:var(--lh-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
}
.eyebrow{margin:0;color:var(--text-body)}
.eyebrow--accent{color:var(--accent)}
.eyebrow--dark{color:var(--accent-on-dark)}

/* SectionHead — heading preceded by the 34px orange dash */
.sec-head{
  display:flex;align-items:center;gap:14px;margin:0;
  font-family:var(--font-display);font-weight:600;
  font-size:22px;line-height:23.5px;color:inherit;
}

/* ——— buttons ——— */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-sans);font-weight:700;
  font-size:var(--size-label);line-height:var(--lh-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:#fff;background:var(--accent);text-decoration:none;
  padding:18px 34px;border-radius:var(--radius-btn);border:0;cursor:pointer;
  transition:background .2s;white-space:nowrap;
}
.btn:hover{background:var(--accent-hover);color:#fff}
.btn--sm{padding:10px 18px}
.btn:focus-visible,.tlink:focus-visible,.nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* text link — orange label with a hairline underline */
.tlink{
  display:inline-flex;align-items:center;
  font-family:var(--font-sans);font-weight:700;
  font-size:var(--size-label);line-height:var(--lh-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.tlink:hover{color:var(--accent-hover)}

/* ——— brand lockup: clay C + wordmark (Figma "wordmark") ——— */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{display:block;width:34px;height:39px}
.brand-word{display:block;width:120px;height:14.35px}
.brand picture{display:block}   /* the nav swaps in the light wordmark at night */

/* ——— NAV ———
   Sticky and transparent at the top of the page, so it sits on whatever ground
   the page opens with (the sky on the homepage). Picks up a paper backing once
   the page scrolls, so the labels keep their contrast over dark sections. */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s;
}
.nav.is-stuck{background:var(--nav-stuck);border-bottom-color:var(--nav-stuck-line)}
.nav-in{
  max-width:calc(var(--content) + 2 * var(--pad));margin:0 auto;box-sizing:border-box;
  padding:18px var(--pad);min-height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a:not(.btn){
  font-family:var(--font-sans);font-weight:700;
  font-size:var(--size-label);line-height:var(--lh-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-body);text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.nav-links a:not(.btn):hover{color:var(--accent)}
.nav-links a[aria-current="page"]{border-bottom-color:var(--accent)}
.nav-row{display:flex;align-items:center;gap:36px}

/* Mobile: the stacked Figma block — wordmark, three links, full-width CTA.
   Too tall (~170px) to pin, so it scrolls away with the page. */
@media(max-width:768px){
  .nav{position:relative;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.is-stuck{background:transparent;border-bottom-color:transparent}
  .nav-in{flex-direction:column;gap:32px;padding:18px var(--pad) 0;min-height:0}
  .nav-links{flex-direction:column;gap:24px;width:100%}
  .nav-links .btn{width:100%;box-sizing:border-box}
  /* 44px tap targets without changing the row's visual height */
  .nav-row a{position:relative}
  .nav-row a::after{content:'';position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
}

/* Compact nav, built by crux.js. Mobile only: it slides down once the
   stacked nav has scrolled out of view, so the links are always in reach. */
.nav-mini{display:none}
@media(max-width:768px){
  html{scroll-padding-top:64px}   /* in-page anchors land below the bar */
  .nav-mini{
    display:block;position:fixed;top:0;left:0;right:0;z-index:60;
    background:var(--nav-stuck);border-bottom:1px solid var(--nav-stuck-line);
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    transform:translateY(-100%);visibility:hidden;
    transition:transform .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s;
  }
  .nav-mini.is-on{transform:none;visibility:visible;transition:transform .25s cubic-bezier(.16,1,.3,1),visibility 0s}
  .nav-mini-in{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:56px;padding:8px var(--pad);box-sizing:border-box;
  }
  .nav-mini-home{display:block;flex:none}
  .nav-mini-home img{display:block;width:28px;height:auto}
  .nav-mini-links{display:flex;align-items:center;gap:20px}
  .nav-mini-links a{
    position:relative;
    font-family:var(--font-sans);font-weight:700;
    font-size:var(--size-label);line-height:var(--lh-label);
    letter-spacing:var(--track-label);text-transform:uppercase;
    color:var(--text-body);text-decoration:none;padding-bottom:2px;
    border-bottom:1px solid transparent;
  }
  .nav-mini-links a[aria-current="page"]{border-bottom-color:var(--accent)}
  .nav-mini-links a:hover{color:var(--accent)}
  .nav-mini a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  /* 44px tap targets without changing the bar's height */
  .nav-mini-links a::after,.nav-mini-home::after{content:'';position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
  .nav-mini-home{position:relative}
}
@media(prefers-reduced-motion:reduce){
  .nav-mini,.nav-mini.is-on{transition:none}
}

/* ——— Light/dark toggle, top-right corner (built by crux.js) ———
   Small and quiet: a hairline ring and a line icon, most of the way to the
   page's ink until it's hovered or focused. Moon by day, sun by night; the
   swap turns and fades. Centred on the nav row, it scrolls away with the
   top of the page. */
.scheme-toggle,.corner-game{
  position:absolute;top:calc((var(--nav-h) - 30px) / 2);right:16px;z-index:70;
  width:30px;height:30px;padding:0;border-radius:50%;
  display:grid;place-items:center;
  background:transparent;color:var(--text-body);
  border:1px solid rgba(var(--ink-rgb),.16);
  opacity:.72;cursor:pointer;
  transition:opacity .2s,color .2s,border-color .2s,background-color .2s;
}
.scheme-toggle:hover,.scheme-toggle:focus-visible,.corner-game:hover,.corner-game:focus-visible{opacity:1;color:var(--accent);border-color:var(--accent);background:rgba(var(--ink-rgb),.04)}
.scheme-toggle:focus-visible,.corner-game:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* the game link sits just left of the toggle */
.corner-game{right:54px;text-decoration:none}
.scheme-toggle svg{grid-area:1/1;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.3,1)}
.scheme-sun{opacity:0;transform:rotate(-90deg) scale(.6)}
@media(prefers-color-scheme:dark){
  .scheme-moon{opacity:0;transform:rotate(90deg) scale(.6)}
  .scheme-sun{opacity:1;transform:none}
}
@media(max-width:768px){
  .scheme-toggle,.corner-game{top:22px;right:14px}   /* level with the stacked nav's wordmark */
  .corner-game{right:52px}
}
@media(prefers-reduced-motion:reduce){
  .scheme-toggle,.scheme-toggle svg,.corner-game{transition:none}
}

/* ——— FOOTER — dark bar: lockup left, legal right (stacks on mobile) ——— */
.foot{background:var(--bg-dark);color:var(--text-on-dark)}
.foot-in{
  max-width:calc(var(--content) + 2 * var(--pad));margin:0 auto;box-sizing:border-box;
  padding:24px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.foot-links{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;
  font-family:var(--font-sans);font-weight:700;
  font-size:var(--size-label);line-height:var(--lh-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
}
.foot-links a{color:var(--text-on-dark-mute);text-decoration:none}
.foot-links a:hover{color:var(--text-on-dark)}
.foot-links span{color:var(--text-on-dark-faint)}
@media(max-width:768px){
  .foot-in{flex-direction:column;justify-content:center;gap:24px}
  .foot-links{justify-content:center}
}

/* Clay "stop-motion" wiggle — a few held poses rather than a smooth tween,
   so it reads as frames being swapped by hand. Used on hover by illustrations. */
@keyframes clay-wiggle{
  0%,100%{transform:rotate(0) translate(0,0)}
  20%{transform:rotate(-2.5deg) translate(-1px,-2px)}
  40%{transform:rotate(2deg) translate(1px,-3px)}
  60%{transform:rotate(-1.5deg) translate(0,-1px)}
  80%{transform:rotate(1deg) translate(1px,-2px)}
}
@media(prefers-reduced-motion:reduce){
  .nav{transition:none}
}

/* ——— Secondary pages ———
   Their first block used to clear a fixed nav with ~170px of top padding.
   The nav is in flow now; on phones it stacks above the content, so the
   block only needs ordinary breathing room. */
@media(max-width:768px){
  .crux-page #main-content,
  .crux-page #dispatch{padding-top:40px !important}
}

/* ——— CTA — "Let's build what's next." over the clay cairn ———
   Closes every page. The render ends in the footer's exact ground (#1b1a17),
   so the dark footer below reads as part of the same scene. */
.crux-cta{
  background:var(--bg-dark) var(--cta-img) center top/cover no-repeat;
  color:var(--text-on-dark);text-align:left;
  min-height:582px;padding:142px 0 60px;box-sizing:border-box;
}
.crux-cta h2{
  margin:24px 0 0;font-family:var(--font-sans);font-weight:600;color:var(--text-on-dark);
  font-size:clamp(48px,5.14vw,var(--size-cta));line-height:.96;letter-spacing:var(--track-cta);
}
.crux-cta h2 span{color:var(--accent)}
.crux-cta .btn{margin-top:48px}
.crux-page .crux-cta{padding-left:0 !important;padding-right:0 !important}
/* Past 1600px, `cover` keeps scaling the render with the width, and the
   section's height crops the base of the cairn. Pin it at its 1600px size
   instead, and fade its left and right edges into the ground, where the
   dunes are a shade lighter than the page. 744px = 1600 x 1116/2400. */
@media(min-width:1600px){
  .crux-cta{
    background:
      linear-gradient(90deg,var(--bg-dark) 0,transparent 12%,transparent 88%,var(--bg-dark) 100%) center top/1600px 744px no-repeat,
      var(--cta-img) center top/1600px auto no-repeat,
      var(--bg-dark);
  }
}
@media(max-width:768px){
  .crux-cta{
    text-align:center;min-height:0;padding:48px 0 360px;
    background:var(--bg-dark) var(--cairn-img) no-repeat;
    background-size:900px auto;background-position:calc(50% - 162px) calc(100% - 4px);
  }
  .crux-cta .eyebrow{max-width:22ch;margin:0 auto}
  .crux-cta h2 span{display:block}
  .crux-cta .btn{margin-top:24px;width:100%;box-sizing:border-box}
}

/* ——— Page sky ———
   Secondary pages open on the same sky as the homepage, then settle onto
   paper within the first screen. Toned down on purpose: two clouds, no
   mountain. Sits at z-index -1, so any section with its own ground covers
   it and transparent ones let it show through.
   It positions against the document, not <body>: don't make <body>
   position:relative. Combined with the pages' overflow-x:clip, that makes
   iOS WebKit (every iPhone browser) stop painting below the first screen. */
.page-sky{
  position:absolute;top:0;left:0;right:0;height:720px;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,var(--sky) 0,var(--sky) 90px,rgba(var(--sky-rgb),.55) 45%,rgba(var(--sky-rgb),0) 100%);
}
.page-sky .cloud{position:absolute;height:auto}
.page-sky .cloud img{display:block;width:100%;height:auto}
.page-sky .cloud--a{width:200px;left:-40px;top:96px;--x0:-40px;animation:cloud-cross 288s linear -67s infinite}
.page-sky .cloud--b{width:150px;right:-30px;top:120px;filter:blur(1.5px);opacity:.9;--x0:calc(100vw - 120px);animation:cloud-cross 575s linear -473.2s infinite}
/* Idle drift, shared by every cloud: one way, left to right, wrapping
   round; no cloud turns back. --x0 is where the cloud is laid out (its
   left), so the path is the same screen-wide sweep whatever that is, and
   a negative delay (the fraction of the loop) starts it on its spot.
   Durations give the parallax: near clouds quicker, far ones slower. */
@keyframes cloud-cross{from{translate:calc(-40vw - var(--x0,0px)) 0}to{translate:calc(120vw - var(--x0,0px)) 0}}
/* Claymation: on top of the drift, each cloud flips between ten tiny
   poses (<1px, <0.4deg), held ~0.12s each like hand-moved frames, in an
   order that doesn't read as a pattern. Each cloud has its own cycle
   length and offset, so they never fall into step. Runs on the image's
   own translate/rotate, so it stacks with both the drift (the wrapper)
   and the day/night move (the image's transform). */
.cloud img{animation:clay-boil var(--boil-dur,1.2s) steps(1,end) var(--boil-delay,0s) infinite}
.cloud--1,.page-sky .cloud--a{--boil-dur:1.2s}
.cloud--2,.page-sky .cloud--b{--boil-dur:1.3s;--boil-delay:-.4s}
.cloud--3{--boil-dur:1.1s;--boil-delay:-.7s}
.cloud--haze{--boil-dur:1.25s;--boil-delay:-.2s}
.cloud--near{--boil-dur:1.15s;--boil-delay:-.55s}
.cloud--near2{--boil-dur:1.35s;--boil-delay:-.9s}
@keyframes clay-boil{
  0%{translate:0 0;rotate:0deg}
  10%{translate:.5px -.4px;rotate:-.3deg}
  20%{translate:-.3px .5px;rotate:.2deg}
  30%{translate:.6px .2px;rotate:.35deg}
  40%{translate:-.5px -.3px;rotate:-.15deg}
  50%{translate:.2px .6px;rotate:-.35deg}
  60%{translate:-.6px .1px;rotate:.25deg}
  70%{translate:.3px -.6px;rotate:.05deg}
  80%{translate:-.2px -.1px;rotate:-.3deg}
  90%{translate:.4px .4px;rotate:.3deg}
}
@media(max-width:768px){
  .page-sky{height:520px}
  .page-sky .cloud--a{width:120px;left:-70px;top:0;--x0:-70px;animation-delay:-39.7s}
  .page-sky .cloud--b{display:none}
}
@media(prefers-reduced-motion:reduce){
  .page-sky .cloud{animation:none;transform:none}
}
@media(prefers-color-scheme:dark){
  .page-sky .cloud{visibility:hidden}   /* the night sky has none. Not display:none: that would restart the drift each time they come back */
}

/* ——— Day ↔ night, when the scheme changes with the page open ———
   Figma prototype: Mount Crux › Prototype (118:1471), Smart Animate
   between the light and dark home frames. crux.js puts .to-dark or
   .to-light on <html> for the length of it. Everything moves together, on
   one curve: night falls and the clouds rise straight up off the screen;
   day breaks and they come straight back down from above it. No scaling,
   no fade. The wrapper keeps its idle drift (translate); these move the
   image inside it (transform), so the two don't fight. The homepage's moon
   has its own half, in index.html. */
:root{--tt:1.2s;--te:cubic-bezier(.65,0,.35,1)}
html.to-dark .cloud{visibility:visible}
html.to-dark .cloud img{animation:cloud-leave var(--cloud-tt,var(--tt)) var(--te) both,clay-boil var(--boil-dur,1.2s) steps(1,end) var(--boil-delay,0s) infinite}
html.to-light .cloud img{animation:cloud-enter var(--cloud-tt,var(--tt)) var(--te) both,clay-boil var(--boil-dur,1.2s) steps(1,end) var(--boil-delay,0s) infinite}
/* Parallax: every cloud travels the same distance, so the nearer ones
   (big, sharp, in front) take less time and the farther ones (small,
   blurred, behind the peaks) more. The moon keeps the base --tt. */
.land-top .cloud--1,.land-top .cloud--2,.mount .cloud--near,.page-sky .cloud--a{--cloud-tt:calc(var(--tt) * .55)}
.land-top .cloud--3,.mount .cloud--haze,.page-sky .cloud--b{--cloud-tt:calc(var(--tt) * 2)}
/* Cloud 2 also drifts 100px left on its way up, as in the frames */
.land-top .cloud--2{--cloud-dx:-100px}
@keyframes cloud-leave{to{transform:translate(var(--cloud-dx,0px),-120vh)}}
@keyframes cloud-enter{from{transform:translate(var(--cloud-dx,0px),-120vh)}to{transform:none}}
/* held on the first frame until the visitor is looking (see crux.js) */
html.to-wait .cloud img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  html.to-dark .cloud{visibility:hidden}
  .cloud img{animation:none !important}
}