/* Solara Match — marketing site. Tokens are a 1:1 lift from the companion
   app's m3.css (Kacper's Design System, figma gAKi49T2HMlWgWQBxDZJEc):
   parchment ground, ink, gold, glass surfaces; Tenor Sans display + Lexend
   body. Light-first like the masters. */
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Lexend:wght@300;400;500&display=swap");

:root {
  /* primitives (Design System Foundations — mode-independent) */
  --gold-base: #CFB97D;
  --gold-pressed: #9D8646;
  --gold-soft: #E4DECD;
  --gold-tint: #F7F7F5;
  --neutral-50: #F7F6F6;
  --neutral-400: #948D82;
  --neutral-600: #605A50;
  --neutral-900: #2B2924;
  --sand-soft: #DFD9D3;

  /* semantic — LIGHT (matches m3.css) */
  --border-glass-rest: rgb(43 41 36 / 30%);
  --border-glass-subtle: rgb(43 41 36 / 14%);
  --surface-glass-rest: rgb(43 41 36 / 8%);
  --surface-glass-strong: rgb(43 41 36 / 30%);
  --surface-button: rgb(43 41 36 / 80%);
  --content-on-surface: #F7F6F6;

  /* aliases consumed by the rules below */
  --bg: #f3eee4;
  --ink: var(--neutral-900);
  --secondary: var(--neutral-600);
  --muted: var(--neutral-400);
  --gold: var(--gold-pressed);        /* text accents — gold-base is decorative */
  --hairline: var(--border-glass-subtle);
  --card: var(--gold-tint);
  --serif: 'Tenor Sans', 'Iowan Old Style', Georgia, serif;
  --sans: 'Lexend', 'Avenir Next', system-ui, sans-serif;
}
/* Dark tokens exist in the app as a token swap; the site ships light-first
   like the masters. (Re-introduce behind an explicit toggle if wanted.) */


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* same veil recipe as the companion's .phone ground */
  background:
    radial-gradient(120% 60% at 50% 0%, rgb(255 255 255 / 55%), rgb(255 255 255 / 0%) 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
}
b, strong { font-weight: 500; }
a { color: inherit; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

/* ---- emblem (the Solara mark, assets/logo.svg) ---- */
.emblem { width: 36px; height: 36px; flex: none; display: block; }

/* ---- nav ---- */
header.site {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.nav { display: flex; align-items: center; gap: 28px; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.wordmark {
  font-family: var(--serif); font-size: 17px; letter-spacing: .38em;
  text-indent: .38em; text-decoration: none; white-space: nowrap;
}
.nav-links { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav-links a { text-decoration: none; font-size: 14px; color: var(--secondary); }
.nav-links a:hover { color: var(--ink); }

/* buttons — the companion's pill vocabulary: glass at rest, ink-80 primary */
.btn {
  display: inline-block; font-size: 14px; letter-spacing: .04em;
  padding: 12px 24px; border-radius: 999px; text-decoration: none;
  background: var(--surface-glass-rest);
  border: 1px solid var(--border-glass-rest); color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--surface-glass-strong); }
.btn.primary {
  background: var(--surface-button); border-color: transparent;
  color: var(--content-on-surface);
}
.btn.primary:hover { background: var(--ink); }

/* ---- hero: the masters' landing stack — silk video + Scrim·white-50 ---- */
.hero { position: relative; padding: 110px 0 84px; text-align: center; overflow: hidden; }
.hero-silk {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgb(255 255 255 / 50%),
    rgb(255 255 255 / 50%) 62%,
    var(--bg));
}
.hero-content { position: relative; z-index: 2; }
.hero-logo { display: block; width: 150px; height: 150px; margin: 0 auto 30px; }

/* ---- signature: two fields drift into meeting (resonance section) ---- */
.fields {
  position: relative; width: min(560px, 88vw); height: 330px; margin: 6px auto 48px;
}
.field-ring {
  position: absolute; top: 10px; width: 280px; height: 280px; border-radius: 50%;
  border: 1px solid var(--gold-base);
  opacity: .8; z-index: 2;
}
.field-ring.a { left: 0; animation: drift-a 14s ease-in-out infinite alternate; }
.field-ring.b { right: 0; animation: drift-b 14s ease-in-out infinite alternate; }
.field-ring.a::after, .field-ring.b::after {
  content: ""; position: absolute; inset: 26px; border-radius: 50%;
  border: 1px solid var(--gold-base); opacity: .35;
}
@keyframes drift-a { from { transform: translateX(0); } to { transform: translateX(64px); } }
@keyframes drift-b { from { transform: translateX(0); } to { transform: translateX(-64px); } }
/* gold halo behind the eclipse; doubles as the fallback when video is off */
.vesica {
  position: absolute; left: 50%; top: 150px; transform: translate(-50%, -50%);
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold-base) 38%, transparent) 0%, transparent 68%);
  animation: vesica-glow 14s ease-in-out infinite alternate;
}
@keyframes vesica-glow { from { opacity: .35; } to { opacity: 1; } }
.harmonic-chip {
  position: absolute; left: 50%; top: 150px; transform: translate(-50%, -50%);
  font-size: 13px; letter-spacing: .06em; padding: 8px 16px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--gold-base); color: var(--ink);
  box-shadow: 0 6px 24px rgb(43 41 36 / 10%);
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .field-ring.a { animation: none; transform: translateX(64px); }
  .field-ring.b { animation: none; transform: translateX(-64px); }
  .vesica { animation: none; opacity: 1; }
  .hero-silk { display: none; }  /* JS also pauses it; scrim ground remains */
  .hero { background: url("assets/bg_silk_poster.webp") center/cover; }
}

h1.display {
  font-family: var(--serif); font-weight: 400; margin: 0 0 14px;
  font-size: clamp(30px, 5vw, 46px); line-height: 1.22; letter-spacing: .015em;
}
.hero .lede { max-width: 560px; margin: 0 auto 30px; color: var(--secondary); font-size: 17px; }
.store-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
.store-badge {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  border: 1px solid var(--border-glass-rest); border-radius: 14px; padding: 10px 18px;
  background: var(--surface-glass-rest); color: var(--ink); text-align: left;
}
.store-badge small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.store-badge b { font-size: 15px; font-weight: 400; font-family: var(--serif); }
.store-badge svg { width: 24px; height: 24px; fill: var(--ink); flex: none; }
.soon { font-size: 12.5px; color: var(--muted); width: 100%; margin-top: 6px; }

/* ---- sections ---- */
section { padding: 78px 0; }
section + section { border-top: 1px solid var(--hairline); }
.eyebrow {
  font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px;
}
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 14px; line-height: 1.25; }
.section-lede { color: var(--secondary); max-width: 620px; margin: 0 0 40px; }

/* resonance trio */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.trio p { margin: 0; color: var(--secondary); }
.trio b { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--ink); margin-bottom: 8px; }

/* modalities */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.mode {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 20px;
  padding: 22px 20px;
}
/* the m3 icon set, inlined and recolored via currentColor */
.mode .glyph { display: block; width: 34px; height: 34px; margin-bottom: 12px; color: var(--gold-pressed); }
.mode b { display: block; font-weight: 500; font-size: 15px; margin-bottom: 6px; }
.mode p { margin: 0; font-size: 13.5px; color: var(--secondary); line-height: 1.55; }
.bigthree {
  margin-top: 26px; display: inline-flex; gap: 22px; flex-wrap: wrap;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 12px 24px;
  background: var(--surface-glass-rest); font-size: 14.5px;
}
.bigthree span i { font-style: normal; color: var(--gold); margin-right: 6px; }

/* reading tease */
.reading-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.reading-card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 24px;
  padding: 28px; position: relative; overflow: hidden;
}
.reading-card h3 { font-family: var(--serif); font-weight: 400; margin: 0 0 4px; font-size: 20px; }
.reading-card .sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.reading-veil { filter: blur(6px); user-select: none; color: var(--secondary); font-size: 14.5px; }
.reading-lock {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: linear-gradient(to bottom, transparent 20%, color-mix(in srgb, var(--bg) 78%, transparent));
}
.reading-lock .chip {
  font-size: 13px; padding: 9px 18px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--gold-base);
}
.reading-lock small { color: var(--muted); font-size: 12.5px; }

/* paths */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.path {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 22px;
  padding: 26px 24px; position: relative; display: flex; flex-direction: column;
  overflow: hidden;
}
/* each path opens on its own master artwork */
.path-art {
  margin: -26px -24px 20px; height: 150px; flex: none;
  background-size: cover; background-position: center 30%;
}
.path .badge { z-index: 1; background: var(--card); }
.path.popular { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.badge {
  position: absolute; top: 18px; right: 18px; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold);
  border-radius: 999px; padding: 4px 10px;
}
.path h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 0 0 2px; }
.path .price { color: var(--secondary); margin: 0 0 16px; font-size: 15px; }
.path ul { list-style: none; margin: 0 0 10px; padding: 0; font-size: 14px; color: var(--secondary); }
.path li { padding: 7px 0; border-top: 1px solid var(--hairline); }
.path li:first-child { border-top: none; }

/* philosophy quote — over the sacred-union master, under a parchment veil */
section.philosophy {
  padding: 130px 0;
  background:
    linear-gradient(rgb(243 238 228 / 72%), rgb(243 238 228 / 72%)),
    url("assets/bg_union.webp") center 62% / cover;
}
.quote {
  text-align: center; max-width: 680px; margin: 0 auto;
  font-family: var(--serif); font-size: clamp(19px, 2.6vw, 25px); line-height: 1.5;
}
.quote .att { display: block; margin-top: 18px; font-family: var(--sans); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }

/* footer */
footer.site { border-top: 1px solid var(--hairline); padding: 44px 0 60px; font-size: 13.5px; color: var(--secondary); }
.foot { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.foot .brand { gap: 10px; }
.foot .emblem { width: 26px; height: 26px; }
.foot .links { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.foot a { text-decoration: none; color: var(--secondary); }
.foot a:hover { color: var(--ink); }

/* legal / doc pages */
.doc { max-width: 720px; margin: 0 auto; padding: 60px 24px 90px; }
.doc h1 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 0 0 6px; }
.doc .updated { color: var(--muted); font-size: 13px; margin: 0 0 36px; }
.doc h2 { font-size: 20px; margin: 34px 0 10px; }
.doc p, .doc li { color: var(--secondary); font-size: 15.5px; }
.doc ul { padding-left: 20px; }
.doc .contact-card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 18px;
  padding: 22px 24px; margin-top: 26px;
}

/* reveal on scroll (quiet) — hiding is scoped to the .js stamp reveal.js
   puts on <html>, so blocked/failed JS degrades to visible copy, not blank
   sections (CSP script-src 'self' bit us here on 2026-08-21) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 820px) {
  .trio, .reading-split, .paths { grid-template-columns: 1fr; }
  .reading-split { gap: 30px; }
  .nav-links { gap: 16px; }
  .nav-links .hide-m { display: none; }
  .hero { padding-top: 64px; }
}