/* ═══════════════════════════════════════════════════════════════════════════
   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;

  /* ——— 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;
  }
}

/* ——— 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}

/* ——— 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:rgba(242,239,231,.86);border-bottom-color:rgba(27,26,23,.1)}
.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%)}
}

/* ——— 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) url(/assets/cruxland/cta-bg.webp) 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,rgba(27,26,23,0) 12%,rgba(27,26,23,0) 88%,var(--bg-dark) 100%) center top/1600px 744px no-repeat,
      url(/assets/cruxland/cta-bg.webp) 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) url(/assets/cruxland/cairn-mobile.webp) 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(191,222,227,.55) 45%,rgba(191,222,227,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;animation:cloud-drift 18s ease-in-out infinite alternate}
.page-sky .cloud--b{width:150px;right:-30px;top:120px;filter:blur(1.5px);opacity:.9;animation:cloud-drift 23s ease-in-out -7s infinite alternate}
@keyframes cloud-drift{from{translate:-10px 0}to{translate:14px 0}}
@media(max-width:768px){
  .page-sky{height:520px}
  .page-sky .cloud--a{width:120px;left:-70px;top:0}
  .page-sky .cloud--b{display:none}
}
@media(prefers-reduced-motion:reduce){
  .page-sky .cloud{animation:none;transform:none}
}