/* ==========================================================================
   Vesper orbit hero — sits above the Tranquil Builders site
   Loaded AFTER style.css. The scrub engine ships its rules inside @layer sw,
   so everything here (unlayered) wins without needing !important.
   ========================================================================== */

/* The body overflow fix that restores position:sticky now lives in style.css,
   so every page gets it — not just this one. */

.sw-root{
  /* A warm near-black ground: the dusk renders keep their own light against it,
     and the site's cream page reads as a deliberate cut when it slides over. */
  --sw-bg:#17110F;
  --sw-ink:#F4EDE3;
  --sw-ink-soft:#A9998A;
  --sw-accent:#C9A27C;              /* matches the site's dark-theme accent */
  --sw-font-display:'General Sans','Inter',sans-serif;
  --sw-font-body:'Inter',sans-serif;
}

/* The site already provides a fixed nav and a scroll-progress bar — suppress the
   engine's own chrome so there is exactly one of each on the page. */
.sw-topbar,
.sw-scrollbar{ display:none !important; }

/* ------------------------------- copy ---------------------------------- */
.sw-copy__title{
  font-family:var(--sw-font-display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:-.03em;
  line-height:1.05;
  font-size:clamp(2.1rem,4.6vw,4rem);
}
.sw-copy__eyebrow{
  font-family:var(--sw-font-body);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--sw-accent);
}
.sw-copy__num{ color:var(--sw-ink-soft); }
.sw-copy__body{ font-weight:300; line-height:1.6; }
.sw-copy__tags li{
  border-radius:999px;
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--sw-accent) 90%,#fff);
  background:color-mix(in srgb,var(--sw-accent) 12%,transparent);
  border-color:color-mix(in srgb,var(--sw-accent) 36%,transparent);
}
.sw-btn{ border-radius:999px; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; font-weight:500; }
.sw-btn--primary{ background:var(--sw-accent); color:#17110F; }
.sw-btn--ghost{ color:var(--sw-ink); border-color:rgba(255,255,255,.6); }

/* Directional scrim — wide enough that white type stays legible over a bright sky */
.sw-copylayer::before{
  width:min(62vw,860px);
  background:linear-gradient(96deg,
    color-mix(in srgb,var(--sw-bg) 93%,transparent) 0%,
    color-mix(in srgb,var(--sw-bg) 75%,transparent) 36%,
    color-mix(in srgb,var(--sw-bg) 30%,transparent) 64%,
    transparent 90%);
}
.sw-route__label{
  background:color-mix(in srgb,#17110F 82%,transparent);
  color:var(--sw-ink);
  border-color:color-mix(in srgb,var(--sw-accent) 24%,transparent);
}
.sw-hint{ color:var(--sw-ink-soft); }
.sw-hint i{ border-color:rgba(244,237,227,.34); }

/* --------------------- handoff to the site content ---------------------- */
/* The engine's stage is position:fixed at z-index 10 (chrome up to 60), so it
   would sit over anything that follows. Giving the page an opaque ground and a
   higher stacking context lets it slide up over the film as you scroll out of
   the hero. The site nav stays above both at z-index 1000. */
.site-main{
  position:relative;
  z-index:100;
  background:var(--bg);
}
.site-footer{ position:relative; z-index:100; }

/* The orbit is the page's opening statement; on phones the copy moves to the
   bottom (engine default) and the scrim flips to vertical, so nothing else
   needs changing here. */
@media (max-width:860px){
  .sw-copylayer::before{ width:100%; }
}