/* ============================================================
   LONGEVITY brand family — shared layer
   Source DNA: conference2026.longevity.science (longevity-2026 repo)
   Pages import this FIRST, then override the theme hooks in :root
   to re-arrange the same palette (never introduce foreign colors).
   ============================================================ */

:root{
  /* -- core brand palette (fixed across the family) -- */
  --paper:  #F5F1E8;     /* warm cream base */
  --paper2: #EDE7D9;
  --ink:    #1B1A16;
  --ink2:   #5c574d;
  --dark:   #1D2D32;     /* deep teal slab */
  --dark2:  #26383E;
  --mist:   #F1ECE0;
  --mist2:  rgba(241,236,224,.64);
  --violet: #AA8E48;     /* brand gold accent (legacy token name) */
  --gold2:  #CBAA5D;     /* lighter gold, on dark */
  --mint:   #A0CE6F;     /* vitality green */
  --palm:   #24382C;     /* deep palm green slab (retreat sibling of --dark) */
  --palm2:  #2E4536;
  --sand:   #EDE3CF;     /* warm sand panel */
  --sage:   #5F7D4F;     /* mid sage green (on light) */

  /* -- theme hooks (pages re-arrange) -- */
  --bg: var(--paper);            /* page base */
  --fg: var(--ink);              /* page text */
  --slab-bg: var(--dark);        /* dark-section color */
  --slab-fg: var(--mist);
  --accent: var(--violet);       /* primary accent (sec-idx, dots, bars) */
  --accent-2: var(--mint);       /* secondary accent */

  --sans: 'Assistant', system-ui, -apple-system, sans-serif;
  --display: 'LevitExt', 'Assistant', system-ui, sans-serif;
  --mono: 'LevitMono', ui-monospace, monospace;
  --wrap: 1380px; --pad: clamp(20px,4vw,64px);
  --r: 20px;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* fonts — Levit: Hagilda web license (client-purchased 2026-07-06, conference site).
   NOTE: verify license scope covers additional longevity.science subdomains. */
@font-face{ font-family:'Assistant'; font-weight:200 800; font-style:normal; font-display:swap; src:url('/shared/fonts/Assistant-VF-hebrew.woff2') format('woff2'); unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face{ font-family:'Assistant'; font-weight:200 800; font-style:normal; font-display:swap; src:url('/shared/fonts/Assistant-VF-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Assistant'; font-weight:200 800; font-style:normal; font-display:swap; src:url('/shared/fonts/Assistant-VF-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'LevitExt'; src:url('/shared/fonts/Levit_1950-BlackExtended.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face{ font-family:'LevitMono'; src:url('/shared/fonts/Levit_Blended-BoldMono.woff2') format('woff2'); font-weight:700; font-display:swap; }

/* ---------- base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{ font-family:var(--sans); background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; overflow-x:clip; max-width:100vw; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
b{ font-weight:700; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.mono{ font-family:var(--mono); font-weight:700; }

/* ---------- preloader ---------- */
.loader{ position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.3rem; transition:opacity .7s var(--ease), visibility .7s; }
.loader.done{ opacity:0; visibility:hidden; }
.loader__row{ display:flex; align-items:baseline; gap:1rem; }
.loader__word{ font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,4vw,2.6rem); letter-spacing:.2em; padding-inline-start:.2em; }
.loader__pct{ font-size:1rem; color:var(--ink2); font-variant-numeric:tabular-nums; }
.loader__bar{ width:min(260px,60vw); height:2px; background:rgba(22,23,28,.12); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:var(--accent); }

/* ---------- nav ---------- */
.nav{ position:fixed; inset-block-start:0; inset-inline:0; z-index:80; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:clamp(16px,2vw,26px) var(--pad); transition:color .4s, background .4s, backdrop-filter .4s, transform .45s var(--ease); }
.nav.hide{ transform:translateY(-115%); }
.nav.inv{ color:var(--mist); }
.nav.stuck{ background:rgba(236,232,245,.62); backdrop-filter:blur(16px) saturate(150%); }
.nav.stuck.inv{ background:rgba(17,16,22,.5); }
.nav__brand{ font-weight:800; letter-spacing:.24em; padding-inline-start:.24em; font-size:1.04rem; }
.nav__links{ display:flex; gap:2rem; margin-inline:auto; }
.nav__links a{ font-size:1rem; font-weight:500; opacity:.66; transition:opacity .25s; }
.nav__links a:hover{ opacity:1; }
.nav__pill{ display:inline-flex; align-items:center; gap:.6em; padding:.72em 1.35em; border-radius:100px; font-weight:600; font-size:.95rem; transition:transform .35s var(--ease); }
.nav__pill, .nav.inv .nav__pill{ color:var(--ink); background:var(--mist); }
.nav:not(.inv) .nav__pill{ color:var(--mist); background:var(--ink); }
.nav__pill span{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.nav__pill:hover{ transform:translateY(-2px); }
.nav__pill.magnetic{ transition:background .4s, color .4s; will-change:transform; }
.nav__pill.magnetic:hover{ transform:none; }
.nav__pill--lg{ font-size:1.1rem; padding:.95em 1.9em; }
@media (max-width:820px){ .nav__links{ display:none; } }

/* ---------- bottom CTA dock + WhatsApp fab ---------- */
.cta-dock{ position:fixed; z-index:75; bottom:clamp(16px,3vh,28px); left:50%; transform:translate(-50%,26px); opacity:0; pointer-events:none; display:inline-flex; align-items:center; gap:.6em; padding:1em 1.85em; border-radius:100px; background:var(--ink); color:var(--mist); font-family:var(--sans); font-weight:600; font-size:1rem; letter-spacing:.01em; box-shadow:0 18px 44px -16px rgba(20,19,25,.6); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.cta-dock.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.cta-dock span{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.cta-dock.show:hover{ transform:translate(-50%,-3px); }
.wa-fab{ position:fixed; z-index:74; bottom:clamp(16px,3vh,28px); left:clamp(16px,3vw,28px); width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -10px rgba(37,211,102,.6); transition:transform .3s var(--ease); }
.wa-fab:hover{ transform:scale(1.08); }

/* ---------- scroll-progress bar ---------- */
.scrollbar{ position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:90; background:transparent; pointer-events:none; }
.scrollbar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform-origin:right center; will-change:width; }
@media (prefers-reduced-motion: reduce){ .scrollbar{ display:none; } }

/* ---------- section heads (family signature) ---------- */
.sec-head{ max-width:60ch; margin-bottom:clamp(2.4rem,5vw,4.2rem); }
.sec-idx{ font-family:var(--mono); font-weight:700; font-size:.86rem; letter-spacing:.08em; color:var(--accent); margin-bottom:1.2rem; }
.sec-title{ font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,6vw,5rem); line-height:.98; letter-spacing:-.03em; }
.sec-note{ margin-top:1.4rem; max-width:46ch; font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.55; color:var(--ink2); }
.sec-head--light .sec-note{ color:var(--mist2); }
.sec-head--light .sec-idx{ color:var(--accent-2); }

/* ---------- slabs + curve + marquee (family signature) ---------- */
.slab{ position:relative; background:var(--slab-bg); color:var(--slab-fg); padding-block:clamp(90px,12vw,180px); }
/* physical left: inset-inline-start in RTL + translateX(-50%) double-shifts the arc offscreen */
.slab__curve{ position:absolute; inset-block-start:0; left:50%; transform:translate(-50%,-60%); width:170%; height:clamp(160px,20vw,320px); background:var(--bg); border-radius:50%; z-index:1; }
.slab > *:not(.slab__curve){ position:relative; z-index:2; }

.marquee{ overflow:hidden; padding-block:clamp(1rem,2vw,1.8rem); border-block:1px solid rgba(241,236,224,.12); direction:ltr; }
.marquee__track{ display:flex; white-space:nowrap; width:max-content; direction:ltr; }
.mq-set{ direction:rtl; flex:0 0 auto; }
.marquee__track span{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,5vw,4.2rem); letter-spacing:-.02em; display:inline-flex; align-items:center; padding-inline-end:.3em; }
.marquee__track em{ color:var(--accent); font-style:normal; margin-inline:.5em; font-size:.7em; }

/* ---------- intro block ---------- */
.intro{ padding-block:clamp(2.6rem,6vw,5rem) clamp(2rem,4vw,3rem); }
.intro__kick{ font-family:var(--mono); font-weight:700; font-size:clamp(.72rem,.9vw,.86rem); letter-spacing:.16em; color:var(--accent); margin-bottom:clamp(.9rem,1.8vw,1.4rem); }
.intro__txt{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,3.6vw,3rem); line-height:1.22; letter-spacing:-.02em; max-width:24ch; }
.intro__txt em{ font-style:normal; color:var(--accent-2); }
.intro__body{ margin-top:1.5rem; max-width:50ch; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.65; color:var(--mist2); }

/* ---------- drag gallery row (family signature) ---------- */
.gal-row{ display:flex; direction:ltr; gap:clamp(.7rem,1.1vw,1rem); overflow-x:auto; padding-inline:var(--pad); height:clamp(220px,26vw,360px); cursor:grab; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.gal-row::-webkit-scrollbar{ display:none; }
.gal-row.grabbing{ cursor:grabbing; }
.gal-row.grabbing .gal-img{ pointer-events:none; }
.gal-img{ position:relative; flex:0 0 clamp(280px,30vw,420px); height:100%; border-radius:var(--r); overflow:hidden; transition:flex-basis .55s var(--ease); }
.gal-img img{ width:100%; height:100%; object-fit:cover; }
.gal-img:hover{ flex-basis:clamp(340px,36vw,520px); }

/* ---------- CTA buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:.95em 1.9em; border-radius:100px; font-weight:700; font-size:1.05rem; background:var(--ink); color:var(--mist); transition:transform .35s var(--ease), filter .3s; }
.btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn span{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.btn--gold{ background:var(--violet); color:#231d0c; }
.btn--gold span{ background:#231d0c; }
.btn--mint{ background:var(--mint); color:#16261A; }
.btn--mint span{ background:#16261A; }
.btn--ghost{ background:transparent; box-shadow:inset 0 0 0 1.5px currentColor; color:inherit; }

/* ---------- footer (family signature) ---------- */
.foot{ position:relative; background:var(--slab-bg); color:var(--slab-fg); padding-block:clamp(110px,14vw,190px) clamp(30px,4vw,44px); margin-top:clamp(120px,16vw,220px); }
.foot__curve{ position:absolute; inset-block-start:0; left:50%; transform:translate(-50%,-60%); width:170%; height:clamp(160px,20vw,320px); background:var(--bg); border-radius:50%; }
.foot__in{ position:relative; z-index:2; }
.foot__cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; margin-bottom:clamp(3rem,6vw,5rem); }
.foot__big{ font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,7vw,6rem); line-height:.98; letter-spacing:-.03em; }
.foot__cols{ display:flex; gap:clamp(2.5rem,7vw,7rem); flex-wrap:wrap; margin-bottom:clamp(2.6rem,5vw,4rem); }
.foot__cols > div{ display:flex; flex-direction:column; gap:.65rem; }
.foot__h{ font-family:var(--mono); font-weight:700; font-size:.8rem; letter-spacing:.1em; color:var(--accent-2); margin-bottom:.35rem; }
.foot__cols a{ color:var(--mist2); font-size:.98rem; transition:color .25s; }
.foot__cols a:hover{ color:var(--mist); }
.foot__base{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; padding-top:1.6rem; border-top:1px solid rgba(241,236,224,.14); color:var(--mist2); font-size:.88rem; }
.foot__legal{ display:flex; gap:1.4rem; }
.foot__legal a{ text-decoration:underline; text-underline-offset:3px; opacity:.85; }
.foot__credit a{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- reveal base states (JS enhances) ---------- */
html.js-split .sec-title, html.js-split .intro__txt, html.js-split .intro__body, html.js-split .foot__big{ visibility:hidden; }
html.js-split .split-ready{ visibility:visible; }
.sline{ will-change:transform; }

/* ---------- grain (family texture) ---------- */
.grain{ position:fixed; inset:0; z-index:120; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- accessibility widget ---------- */
.a11y{ position:fixed; z-index:80; left:clamp(16px,3vw,28px); bottom:calc(clamp(16px,3vh,28px) + 66px); }
.a11y__btn{ width:54px; height:54px; border-radius:50%; border:none; cursor:pointer; background:var(--dark); color:var(--mist); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -10px rgba(29,45,50,.65); transition:transform .3s var(--ease), background .3s; }
.a11y__btn:hover{ transform:translateY(-2px); background:var(--dark2); }
.a11y__btn:focus-visible, .a11y__opt:focus-visible, .a11y__link:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.a11y__panel{ position:absolute; bottom:64px; left:0; width:230px; background:var(--dark); color:var(--mist); border-radius:16px; padding:.9rem; box-shadow:0 24px 60px -20px rgba(20,25,28,.65); }
.a11y__title{ font-weight:700; font-size:.92rem; color:var(--gold2); margin:0 .3rem .55rem; }
.a11y__opt{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; color:var(--mist2); font-family:var(--sans); font-size:.92rem; padding:.55rem .3rem; cursor:pointer; border-radius:8px; text-align:start; }
.a11y__opt:hover{ background:rgba(241,236,224,.07); color:var(--mist); }
.a11y__opt i{ width:30px; height:16px; border-radius:100px; background:rgba(241,236,224,.18); position:relative; flex:0 0 auto; transition:background .25s; }
.a11y__opt i::after{ content:""; position:absolute; top:2px; inset-inline-start:2px; width:12px; height:12px; border-radius:50%; background:var(--mist); transition:transform .25s; }
.a11y__opt.on i{ background:var(--violet); }
.a11y__opt.on i::after{ transform:translateX(-14px); }
.a11y__reset{ border-top:1px solid rgba(241,236,224,.14); margin-top:.35rem; padding-top:.7rem; color:var(--mist2); }
.a11y__link{ display:block; font-size:.82rem; color:var(--mint); text-decoration:underline; text-underline-offset:3px; margin:.5rem .3rem 0; }

/* ---------- a11y modes ---------- */
html.a11y-font-1{ font-size:112.5%; }
html.a11y-font-2{ font-size:125%; }
html.a11y-links a{ text-decoration:underline !important; text-underline-offset:3px; }
html.a11y-gray img, html.a11y-gray canvas, html.a11y-gray video{ filter:grayscale(1); }
html.a11y-gray{ --violet:#8a8578; --mint:#9aa392; --accent:#8a8578; --accent-2:#9aa392; }
html.a11y-contrast{ --paper:#ffffff; --paper2:#ffffff; --bg:#ffffff; --ink:#000000; --fg:#000000; --ink2:#111111; --dark:#000000; --dark2:#111111; --slab-bg:#000000; --palm:#000000; --mist:#ffffff; --slab-fg:#ffffff; --mist2:rgba(255,255,255,.95); --violet:#6d5600; --mint:#14530f; --accent:#6d5600; --accent-2:#14530f; --sand:#ffffff; --sage:#14530f; }
html.a11y-contrast .slab, html.a11y-contrast .foot{ --violet:#e3c56b; --mint:#b7e392; --accent:#e3c56b; --accent-2:#b7e392; }

/* ---------- responsive helpers ---------- */
@media (max-width:640px){
  .foot__cta{ flex-direction:column; align-items:flex-start; }
}

/* ---------- event facts bar (family signature, from conference .evt) ---------- */
.evt{ padding-block:clamp(1rem,2vw,2rem) 0; }
.evt__bar{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.4rem); align-items:stretch; justify-content:space-between; border:1px solid rgba(241,236,224,.16); border-radius:var(--r); padding:clamp(1.2rem,2.4vw,2rem) clamp(1.2rem,2.6vw,2.4rem); }
.evt__cell{ display:flex; flex-direction:column; gap:.3rem; min-width:150px; }
.evt__cap{ font-family:var(--mono); font-weight:700; font-size:.78rem; letter-spacing:.12em; color:var(--accent-2); }
.evt__v{ font-family:var(--display); font-weight:800; font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.01em; }
.evt__v.mono{ font-family:var(--mono); }
.evt__s{ font-size:.95rem; color:var(--mist2); }
@media (max-width:640px){ .evt__bar{ flex-direction:column; gap:1.2rem; } }

/* ---------- view gate (client preview, pre-approval) ----------
   Soft view-password: keeps casual visitors out while pages are unapproved.
   Not hard security (static site) — pages are also noindex. */
.gate{ position:fixed; inset:0; z-index:300; background:var(--paper); display:flex; align-items:center; justify-content:center; transition:opacity .5s var(--ease), visibility .5s; }
.gate.ok{ opacity:0; visibility:hidden; }
.gate__box{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; text-align:center; padding:2rem; }
.gate__brand{ font-family:var(--display); font-weight:900; font-size:clamp(1.7rem,5vw,2.8rem); letter-spacing:.16em; padding-inline-start:.16em; color:var(--ink); }
.gate form{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.gate input{ background:#fff; border:1px solid rgba(22,23,28,.15); border-radius:100px; padding:.92em 1.4em; font-family:var(--sans); font-size:1rem; min-width:210px; color:var(--ink); }
.gate input:focus{ outline:none; border-color:var(--violet); }
.gate button{ background:var(--ink); color:var(--paper); border:none; border-radius:100px; padding:.92em 1.6em; font-family:var(--sans); font-weight:600; cursor:pointer; }
.gate button:hover{ filter:brightness(1.15); }
.gate__err{ color:#c0392b; font-size:.9rem; }