/* ============================================================================
   ionicGRiD — core.css : the ONE copy of the design system.
   Extracted 2026-09-08. Linked by index.html, how-it-works.html and
   ionicSense.html, in that role replacing the hand-copied duplicates each of
   them used to carry inline.

   WHY THIS FILE EXISTS. The site's standing rule is one self-contained file per
   page, no build step. That held while there was one page. By 2026-09 the same
   ~9KB of tokens, reset, nav, buttons and base type existed in four places —
   index.html's inline block, how-it-works.html's verbatim copy of that block,
   shared.css, and the whole lot again in the v3 tree — and PENDING-ITEMS §2.3
   had been carrying "any token change must be hand-copied across N files" as an
   open item for two months. It had already cost something real: shared.css's
   `.gold` was still the pre-shimmer version, so gold headings on the sub-pages
   were quietly not doing what gold headings on the main page do. Nobody edited
   them apart; one of the four copies simply never got an update.

   WHAT IS IN IT, AND WHY EXACTLY THIS MUCH. This is the longest run of lines
   that was byte-identical, IN THE SAME ORDER, at the top of both index.html's
   and how-it-works.html's style blocks — a true common PREFIX, not a
   cherry-picked set. That matters more than it looks: had rules been lifted out
   of the middle, everything that used to precede them would now follow them, and
   in CSS that silently changes which rule wins between two of equal specificity.
   A prefix moved into a stylesheet linked immediately before the page's own
   <style> keeps every page's cascade order exactly as it was, which is why this
   refactor could be made behaviour-neutral and then proved so: computed styles
   for every element on all three pages, before and after, are identical.

   WHERE IT STOPS. At `.hero-bg` — the first line where the two pages genuinely
   disagree, because they have different heroes (index runs the inward field,
   how-it-works runs the prototype-B torus). Everything below that point stays
   inline in each page and is still duplicated between them; that is the second
   half of this problem and it is untouched. platform.html is deliberately not a
   client: it is a light-cream theme with its own tokens and its own local nav,
   and its own note warns against inheriting a border-box reset from anywhere.

   HOW TO EDIT. Change a token here and every page that links it moves together.
   Do NOT re-inline any of this into a page "to keep it self-contained" — that is
   precisely the state this replaced.
   ============================================================================ */


/* ============================================================
   ionicGRiD v2 — Cinematic Chapters, Continuous Field.
   Gold + silver (structure) wed to violet + magenta (flow).
   ============================================================ */

/* Dune Rise — cinematic display face for the hero + footer wordmark (SIL OFL 1.1,
   Jesta Designs / Fontswan; license at /assets/fonts/License.txt). Monocase: it has
   no true lowercase, so "ionicGRiD" reads as a monumental all-caps IONICGRID here —
   an intentional, Arjun-approved break from the Quicksand lowercase-i logotype, which
   is kept in the top nav. font-display:block: the hero text is already held hidden
   until document.fonts.ready by the reveal script, so there is never a Quicksand flash. */
@font-face{
  font-family:"Dune Rise";
  src:url("/assets/fonts/Dune_Rise.woff2") format("woff2"),
      url("/assets/fonts/Dune_Rise.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:block;
}

:root{
  --void:#04050B; --void-2:#080B16; --void-3:#0a0d1a;
  --indigo:#0C1838; --ocean:#0E2C5E;
  --violet-deep:#1E1140; --violet:#4A2C8F; --violet-lum:#8A6CFF; --magenta:#C657C4;
  --gold-deep:#B5862F; --gold:#DDB65E; --gold-lite:#F3DC93; --gold-glow:#FBEFC8;
  --silver:#D2D6E2; --silver-dim:#959DB4;
  --ivory:#F6F2E9; --ink:rgba(246,242,233,.85); --ink-dim:rgba(246,242,233,.56);

  --gold-grad:linear-gradient(110deg,#B5862F 0%,#E7C56E 26%,#FBEFC8 50%,#E7C56E 74%,#B5862F 100%);
  --display:"Bricolage Grotesque",var(--sans);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --wordmark:"Quicksand",var(--sans);
  --dune:"Dune Rise",var(--wordmark);
  --mono:"Spline Sans Mono",ui-monospace,Menlo,monospace;
  --ease-site:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(22px,6vw,72px);
  --maxw:1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0; font-family:var(--sans); font-weight:400; color:var(--ink);
  background:var(--void); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; line-height:1.72; font-size:clamp(16px,1.05vw,18px);
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1300px 860px at 50% -10%, rgba(138,108,255,.22), transparent 60%),
    radial-gradient(1100px 760px at 88% 12%, rgba(14,44,94,.40), transparent 58%),
    radial-gradient(1200px 1100px at 6% 86%, rgba(198,87,196,.12), transparent 60%),
    radial-gradient(900px 720px at 94% 98%, rgba(221,182,94,.07), transparent 60%),
    linear-gradient(180deg,#04050B 0%,#080B16 36%,#0a0d1a 66%,#050610 100%);
}
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(135% 120% at 50% 38%, transparent 56%, rgba(2,3,8,.6) 100%);}
#atmo{position:fixed; inset:0; z-index:0; pointer-events:none;}
#veil{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;}
#content{position:relative; z-index:1;}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.06; margin:0; letter-spacing:-.01em; color:var(--ivory);}
.gold{background-image:linear-gradient(100deg, transparent 38%, var(--silver) 50%, transparent 62%), var(--gold-grad); background-size:260% 100%, auto; background-repeat:no-repeat, padding-box; background-position:160% center, 0 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:td-shimmer 3.6s linear infinite;}
p{margin:0 0 1.2em;}
em{font-style:italic; color:var(--ivory);}
strong{font-weight:500; color:var(--ivory);}
/* Emphasis on this site works by BRIGHTNESS: body copy sits at 85% ivory and
   <strong> lifts it to full ivory, with weight 500 doing very little. A .lede
   is ALREADY full ivory, so there the colour lift is a no-op and weight is the
   only lever left — 400 vs 500 is invisible at lede size. Bump to 600 (matching
   the #harvest-slot strong precedent). #field is currently the only lede
   containing <strong>, so this changes nothing elsewhere. */
.lede strong{font-weight:600;}
/* Lead-paragraph variant: same SIZE and measure as .body, but .lede's full
   ivory (vs body's 85%) still marks it as the lead. Added 2026-08-22 because
   #field was stacking FOUR sizes (59/34/28/15px at 1280) — and the 34 vs 28
   step was too small to read as hierarchy while 28 to 15 was a cliff. The h2
   and h3 are a legitimate title pair; everything below them is prose and
   should be one size. */
.lede.lede-body{font-size:clamp(1rem,1.19vw,1.14rem); line-height:1.6;}
a{color:var(--gold-lite); text-decoration:none;}
.lede{font-family:var(--sans); font-size:clamp(1.23rem,2.3vw,1.74rem); line-height:1.42; color:var(--ivory); font-weight:400;}
.body{font-size:clamp(1rem,1.19vw,1.14rem); color:var(--ink); max-width:64ch;}
.dim{color:var(--ink-dim);}
.mono{font-family:var(--mono); font-weight:400; letter-spacing:.05em;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}
section{position:relative; z-index:1; padding:clamp(108px,15vh,190px) 0;}
.section-tight{padding:clamp(78px,10vh,130px) 0;}
.s-head{display:flex; flex-direction:column; gap:24px; margin-bottom:60px;}
.s-head h2{font-size:clamp(2rem,4.6vw,3.7rem); max-width:18ch; font-variation-settings:"opsz" 96;}
.s-head.center{align-items:center; text-align:center;}
#field .s-head h2{max-width:44ch;}
#turning .s-head h2{max-width:44ch;}
.s-head.center h2{max-width:24ch;}

/* ---------- Nav ---------- */
header.nav{position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gutter); border-bottom:1px solid transparent;
  transition:opacity .5s var(--ease-site), transform .5s var(--ease-site), background .5s ease, border-color .5s ease;}
header.nav.is-hidden{opacity:0; transform:translateY(-10px); pointer-events:none;}
header.nav.glass{background:rgba(10,13,26,.45); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(251,239,200,.14), 0 8px 32px rgba(4,2,10,.35);}
.brand{display:flex; align-items:center; gap:13px; cursor:pointer;}
.brand img.mk{height:34px; width:auto; filter:drop-shadow(0 0 10px rgba(221,182,94,.28));}
.brand .wm-txt{font-family:var(--wordmark); font-weight:600; font-size:1.18rem; letter-spacing:.012em; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.foot-brand .wm-txt{font-family:var(--dune); font-weight:400; font-size:1.24rem; letter-spacing:.07em; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
nav.links{display:flex; gap:36px; align-items:center;}
nav.links a{font-family:var(--sans); font-weight:400; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); transition:color .3s ease; padding:12px 0;}
nav.links a:hover{color:var(--gold-lite);}
nav.links a.cta{color:var(--ivory); border:1px solid rgba(221,182,94,.42); border-radius:100px; padding:10px 22px; letter-spacing:.12em;}
nav.links a.cta:hover{border-color:var(--gold); background:rgba(221,182,94,.09); color:var(--gold-glow);}
.menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:12px; min-width:44px; min-height:44px; align-items:center; justify-content:center;}
.menu-toggle span{width:24px; height:1.6px; background:var(--gold-lite); display:block;}

/* ---------- Buttons ---------- */
.btn{font-family:var(--sans); font-weight:500; font-size:.84rem; letter-spacing:.14em; text-transform:uppercase; padding:17px 36px; border-radius:100px; transition:all .4s var(--ease-site); display:inline-flex; align-items:center; gap:10px; cursor:pointer;}
/* Sleeker than the sitewide 17px/36px .btn default (2026-07-26 — single centred hero CTA now, so
   it can read lighter/slimmer than a paired button row). Scoped to .hero-cta only — .btn itself
   (nav cta, invite section, etc.) is untouched. */
.hero-cta .btn{width:250px; justify-content:center; padding:13px 36px;}
.btn-gold{background:var(--gold-grad); color:#1a1305 !important; box-shadow:0 8px 32px rgba(221,182,94,.20);}
.btn-gold:hover{transform:translateY(-3px); box-shadow:0 16px 44px rgba(221,182,94,.34);}
.btn-ghost{border:1px solid rgba(210,214,226,.34); color:var(--ivory); background:rgba(8,5,16,.46); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-glow); background:rgba(221,182,94,.06); transform:translateY(-3px);}

@media (min-width:761px){ .pillars:has(.pillar:nth-child(2):last-child){grid-template-columns:repeat(2,1fr); max-width:760px; margin-left:auto; margin-right:auto;} }

/* ---------- Hero (ported from v1 — LOCKED, do not retune) ---------- */
.hero{min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 0 80px; overflow:hidden; position:relative; isolation:isolate;}
.hero-bg{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
