/* ==========================================================================
   Lavender Common — shared stylesheet
   All pages link this file. Page-specific rules stay in an inline <style>
   block on each page. Update once here; every page picks it up.
   ========================================================================== */

@font-face{
  font-family:'Parkinsans';
  src:url('fonts/Parkinsans-Bold.woff2') format('woff2'),
      url('fonts/Parkinsans-Bold.ttf') format('truetype');
  font-weight:600 700;
  font-display:swap;
}
@font-face{
  font-family:'Aeonik';
  src:url('fonts/Aeonik-Regular.woff2') format('woff2'),
      url('fonts/Aeonik-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

/* ---------- DESIGN TOKENS ---------- */
:root{
  --cream:#F6EFE9;
  --ink:#3C2A61;
  --violet:#5E3DC0;
  --teal:#21505A;
  --clay:#EB6C35;
  --lavender:#DAC9FD;
  --sky:#C2D7F4;
  --ink-soft:rgba(60,42,97,0.80);
  --ink-faint:rgba(60,42,97,0.70);
  --line:rgba(60,42,97,0.14);
  --cream-shift:#EFE6DC;
  --radius:2px;
  --max:1220px;
  --display:'Parkinsans', 'Poppins', -apple-system, sans-serif;
  --body:'Aeonik', 'General Sans', -apple-system, sans-serif;
  --near-black:#170F20;
  --clay-text:#A33F14;      /* accessible clay for text on light backgrounds (5.6:1 on cream) */
  --on-violet:#FFFFFF;      /* 7.2:1 on --violet */
}

/* ---------- RESET & BASE ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{ font-family:var(--body); background:var(--sky); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--violet); color:var(--on-violet); }
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; }

/* ---------- SKIP LINK ---------- */
.skip-link{
  position:absolute; top:-100px; left:16px; z-index:200;
  background:var(--violet); color:var(--on-violet);
  padding:12px 20px; border-radius:var(--radius); font-family:var(--body); font-weight:700; font-size:14px;
  text-decoration:none; transition:top 150ms ease;
}
.skip-link:focus{ top:16px; }

/* ---------- LAYOUT ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 32px; }

/* ---------- TYPOGRAPHY ---------- */
.eyebrow{ font-family:var(--body); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); font-weight:700; }
h1,h2,h3{ font-family:var(--display); font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
p{ color:var(--ink-soft); }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-weight:700; font-size:15px; padding:14px 26px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--violet); color:var(--on-violet); }
.btn-primary:hover{ background:#6c48dd; box-shadow:0 6px 20px rgba(94,61,192,0.28); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-text{ background:none; border:none; padding:0; color:var(--teal); font-weight:700; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(33,80,90,0.35); cursor:pointer; font-family:var(--body); font-size:14px; }

/* ---------- HEADER ---------- */
/* Deep-purple bar with cream text, matching the footer */
header{ position:sticky; top:0; z-index:50; background:var(--ink); border-bottom:1px solid rgba(218,201,253,0.18); }
.nav, .wrap.nav{ display:flex; align-items:center; justify-content:space-between; padding:20px 32px; }
.logo{ text-decoration:none; display:inline-flex; align-items:center; }
.logo img{ display:block; height:60px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:30px; list-style:none; }
.nav-links a{ position:relative; text-decoration:none; font-size:14.5px; font-weight:500; color:rgba(246,239,233,0.82); transition:color 140ms ease; padding-bottom:3px; }
.nav-links a.nav-current{ color:var(--cream); font-weight:700; }
.nav-links a.nav-current::after{ right:0; background:var(--lavender); }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--lavender); transition:right 220ms ease; }
.nav-links a:hover::after{ right:0; }
.nav-links a:hover{ color:var(--cream); }
.nav-cta{ display:flex; align-items:center; gap:20px; }
.press-link{ font-size:13px; color:rgba(246,239,233,0.72); text-decoration:none; white-space:nowrap; }
.press-link:hover{ color:var(--cream); }
header .btn-primary{ background:var(--lavender); color:var(--ink); }
header .btn-primary:hover{ background:var(--cream); color:var(--ink); }
header :focus-visible{ outline-color:var(--lavender); }
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; }
.menu-toggle svg path{ stroke:var(--cream); }

/* Mobile nav drawer */
.nav-links.nav-open{
  display:flex; flex-direction:column; gap:18px;
  position:absolute; top:100%; left:0; right:0;
  background:var(--ink); padding:24px 20px;
  border-bottom:1px solid rgba(218,201,253,0.18); z-index:49;
}

@media (max-width:900px){
  .nav-links{ display:none; }
  .press-link{ display:none; }
  .menu-toggle{ display:block; padding:12px; margin-right:-12px; }
  .nav-cta{ margin-left:auto; margin-right:4px; }
}


/* ---------- HERO ---------- */
.hero{ padding:52px 0 72px; position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; top:-180px; right:-180px; width:520px; height:520px; background:radial-gradient(circle, rgba(94,61,192,0.14), transparent 68%); pointer-events:none; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; position:relative; }
.hero-eyebrow{ margin-bottom:22px; }
.hero h1{ font-size:clamp(36px, 5vw, 62px); line-height:1.06; margin-bottom:24px; }
.hero h1 .accent{ color:var(--clay); }
.hero-sub{ font-size:19px; max-width:520px; margin-bottom:34px; color:var(--ink-soft); }
.hero-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:22px; }
.hero-note{ font-family:var(--body); font-weight:600; letter-spacing:0.04em; font-size:11.5px; color:var(--ink-faint); }
.hero-avatars{ display:flex; align-items:center; gap:12px; }
.avatar-stack{ display:flex; }
.avatar-stack span{ width:30px; height:30px; border-radius:50%; border:2px solid var(--cream); margin-left:-9px; display:inline-block; }
.avatar-stack span:nth-child(1){ background:var(--violet); }
.avatar-stack span:nth-child(2){ background:var(--teal); }
.avatar-stack span:nth-child(3){ background:var(--clay); }
.avatar-stack span:nth-child(4){ background:var(--lavender); }
.avatar-stack span:first-child{ margin-left:0; }
.hero-social-proof{ font-size:13px; color:var(--ink-faint); }
.hero-social-proof strong{ color:var(--ink); }
.hero-figure{ position:relative; aspect-ratio:1/1.05; }
.mark-svg .draw{ fill:none; stroke:var(--violet); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.mark-svg .draw-thin{ fill:none; stroke:var(--ink-soft); stroke-width:1.5; stroke-linecap:round; }
.mark-svg .fill-dot{ fill:var(--clay); transform-box:fill-box; transform-origin:center; }
/* Start-of-animation states only apply when JavaScript is running (html.js), so the drawing still shows without it */
.js .mark-svg .draw{ stroke-dasharray:1400; stroke-dashoffset:1400; }
.js .mark-svg .draw-thin{ stroke-dasharray:400; stroke-dashoffset:400; }
.js .mark-svg .fill-dot{ opacity:0; }
.mark-svg text{ font-family:var(--body); font-weight:700; font-size:9px; fill:var(--ink-soft); letter-spacing:0.02em; }
.in-view .mark-svg .draw{ animation:drawIn 1600ms cubic-bezier(.4,0,.2,1) forwards; }
.in-view .mark-svg .draw-thin{ animation:drawInThin 900ms ease forwards 1200ms; }
.in-view .mark-svg .fill-dot{ animation:dotIn 400ms ease forwards 1500ms; }
@keyframes drawIn{ to{ stroke-dashoffset:0; } }
@keyframes drawInThin{ to{ stroke-dashoffset:0; } }
@keyframes dotIn{ from{opacity:0; transform:scale(0.4);} to{opacity:1; transform:scale(1);} }

/* ---------- SECTION SCAFFOLDING ---------- */
section{ padding:104px 0; }
.section-tint{ background:var(--lavender); }
.section-lavender{ background:var(--lavender); }
.section-cream{ background:var(--cream); }
.section-sky{ background:var(--sky); }
.section-ink{ background:var(--ink); color:var(--sky); }
.section-ink h2, .section-ink h3{ color:var(--sky); }
.section-ink p{ color:rgba(218,201,253,0.82); }
.section-ink .eyebrow{ color:var(--sky); }

.section-head{ max-width:660px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(28px, 3.4vw, 44px); margin-top:14px; line-height:1.1; }
.section-head p{ margin-top:16px; font-size:16.5px; }

/* Scroll-in animations. Content is only hidden when JavaScript is running (html.js),
   so it stays visible for anyone browsing with JavaScript off (e.g. Tor Browser's safest mode). */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity 700ms ease, transform 700ms ease; }
.js .reveal.in-view{ opacity:1; transform:translateY(0); }
.js .reveal-scale{ opacity:0; transform:scale(0.96); transition:opacity 700ms ease, transform 700ms ease; }
.js .reveal-scale.in-view{ opacity:1; transform:scale(1); }

/* ---------- SWIPEABLE CAROUSEL ---------- */
.carousel{ position:relative; margin-top:16px; }
.carousel-track{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 6px 22px; margin:0 -6px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-card{ scroll-snap-align:start; flex:0 0 auto; width:300px; }
.carousel-nav[hidden]{ display:none; }
.carousel-nav{ display:flex; justify-content:center; gap:12px; margin-top:14px; }
.carousel-arrow{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--cream);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color 160ms ease, background 160ms ease;
  color:var(--ink);
}
.carousel-arrow:hover{ border-color:var(--violet); background:rgba(94,61,192,0.06); }
.carousel.on-dark .carousel-arrow{ background:transparent; border-color:rgba(218,201,253,0.4); color:var(--sky); }
.carousel.on-dark .carousel-arrow:hover{ border-color:var(--sky); }

.quote-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; }
.quote-card blockquote{ font-family:var(--display); font-size:16px; color:var(--ink); line-height:1.42; font-weight:500; }
.quote-card cite{ display:block; margin-top:16px; font-style:normal; font-family:var(--body); font-weight:700; font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; }

.pillar-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px 28px; width:280px; }
.pillar-card .pillar-icon{ margin:0 auto 18px; }
.pillar-card h4, .pillar-card h3{ font-family:var(--body); font-weight:700; font-size:15.5px; color:var(--ink); margin-bottom:8px; text-align:center; }
.pillar-card p{ font-size:14px; text-align:center; }

/* ---------- CASE / IMPACT CARDS ---------- */
.case-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.case-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform 200ms ease, box-shadow 200ms ease; }
.case-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(60,42,97,0.10); }
.case-media{ aspect-ratio:16/10; position:relative; overflow:hidden; }
.case-media.moldova{ background:url('news/images/Strasbourg.webp') center 42% / cover no-repeat, var(--lavender); }
.case-media.moldova::after{ display:none; }
.case-media.pipeline{ background:repeating-linear-gradient(135deg, rgba(94,61,192,0.10) 0 2px, transparent 2px 16px), var(--cream); display:flex; align-items:center; justify-content:center; }
.case-media::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(115deg, rgba(60,42,97,0.06) 0 1px, transparent 1px 34px); }
.case-status{ font-family:var(--body); font-weight:700; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius); display:inline-block; }
.case-status.won{ background:rgba(94,61,192,0.12); color:var(--violet); }
.case-status.active{ background:rgba(235,108,53,0.14); color:var(--clay-text); }

.stakes-card{ background:rgba(218,201,253,0.08); border:1px solid rgba(218,201,253,0.18); border-radius:var(--radius); padding:26px 24px; display:flex; flex-direction:column; text-decoration:none; transition:background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
a.stakes-card:hover{ background:rgba(218,201,253,0.16); border-color:rgba(218,201,253,0.40); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,0.28); cursor:pointer; }
a.stakes-card:focus-visible{ outline:2px solid var(--lavender); outline-offset:3px; }
.stakes-card h4, .stakes-card h3{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--sky); margin-bottom:10px; line-height:1.25; }
.stakes-card p{ font-size:14px; color:rgba(218,201,253,0.8); flex:1; }
.stakes-card .stakes-read-more{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-family:var(--body); font-weight:700; font-size:12.5px; letter-spacing:0.04em; color:var(--lavender); text-decoration:none; opacity:0.9; transition:opacity 160ms ease, gap 160ms ease; }
a.stakes-card:hover .stakes-read-more{ opacity:1; gap:10px; }
.stakes-tag{ display:inline-block; font-family:var(--body); font-weight:700; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--clay-text); background:rgba(235,108,53,0.16); padding:4px 10px; border-radius:var(--radius); margin-bottom:14px; }
.case-body{ padding:28px 26px 30px; }
.case-body h3{ font-size:21px; margin:14px 0 12px; line-height:1.18; }
.case-body p{ font-size:15px; margin-bottom:8px; }

/* ---------- PAUSE / PULL QUOTE ---------- */
.pause{ text-align:center; padding:110px 0 100px; position:relative; }
.pause .quote-mark{ font-family:var(--display); font-size:90px; line-height:1; color:rgba(94,61,192,0.28); display:block; margin-bottom:-30px; }
.pause blockquote{ font-family:var(--display); font-size:clamp(24px,2.8vw,36px); color:var(--ink); max-width:820px; margin:0 auto; line-height:1.22; }
.pause cite{ display:block; margin-top:28px; font-style:normal; font-family:var(--body); font-weight:700; font-size:13px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; }

/* ---------- IDENTITY BAND ---------- */
.identity-band{ background:var(--clay); padding:110px 0; }
.identity-band h2{ color:var(--ink); margin:12px 0 14px; font-size:clamp(30px,3.8vw,46px); line-height:1.08; }
.identity-band p{ color:rgba(23,15,32,0.88); }
.identity-band .btn-text{ color:var(--near-black); text-decoration-color:rgba(23,15,32,0.35); }

.unity-grid{ display:grid; grid-template-columns:1fr 0.92fr; gap:64px; align-items:start; }
.unity-copy p{ font-size:16px; max-width:420px; }

.identity-badges{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:36px; }
.badge-tile{ background:rgba(23,15,32,0.07); border:1px solid rgba(23,15,32,0.14); border-radius:var(--radius); padding:18px 18px 20px; }
.badge-tile .tag{ display:block; font-family:var(--display); font-size:17px; color:var(--near-black); margin-bottom:6px; }
.badge-tile p{ font-size:13px; max-width:none; color:rgba(23,15,32,0.68); }

.member-card{ background:var(--cream); border-radius:10px; box-shadow:0 24px 60px rgba(23,15,32,0.22); overflow:hidden; }
.member-card-top{ padding:32px 32px 26px; text-align:center; }
.member-card-top h3{ font-family:var(--display); font-weight:600; font-size:34px; color:var(--ink); margin:10px 0 14px; }
.member-note{ font-size:14.5px; color:var(--ink-soft); max-width:340px; margin:0 auto; }
.ticket-divider{ position:relative; height:1px; border-top:1.5px dashed rgba(60,42,97,0.22); margin:0 24px; }
.ticket-divider span{ position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--clay); }
.ticket-divider span:first-child{ left:-33px; }
.ticket-divider span:last-child{ right:-33px; }
.member-card-bottom{ padding:26px 32px 32px; text-align:center; }

.join-amount{
  display:inline-flex; align-items:baseline; gap:6px; background:rgba(94,61,192,0.08);
  border:1px solid var(--line); border-radius:var(--radius); padding:8px 16px;
  margin-bottom:22px; font-family:var(--body); font-weight:700; font-size:13.5px; color:var(--ink);
}
.join-amount b{ font-family:var(--display); font-size:17px; color:var(--ink); }
.join-form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.join-form input[type="email"]{
  flex:1 1 200px; min-width:0; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--radius); background:#fff; font-family:var(--body);
  font-size:15px; color:var(--ink);
}
.join-form input[type="email"]::placeholder{ color:var(--ink-faint); }
.join-form input[type="email"]:focus{ outline:2px solid var(--violet); outline-offset:1px; border-color:transparent; }
.join-form .btn{ flex:0 0 auto; }
.join-alt{ margin-top:16px; font-size:13px; }
.join-reassure{ margin-top:18px; font-family:var(--body); font-weight:600; letter-spacing:0.03em; font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; }
.join-success{ display:none; margin-top:8px; background:rgba(94,61,192,0.07); border:1px solid rgba(94,61,192,0.2); border-radius:var(--radius); padding:22px 20px; text-align:left; }
.join-success.show{ display:block; }
.join-success p{ color:var(--ink); font-size:14.5px; margin:0; }
.join-success strong{ display:block; font-family:var(--display); font-size:17px; color:var(--ink); margin-bottom:8px; }

/* ---------- FOOTER ---------- */
footer{ background:var(--ink); color:rgba(218,201,253,0.75); padding:64px 0 36px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:56px; }
.footer-logo{ font-family:var(--display); font-size:20px; color:var(--sky); margin-bottom:14px; }
.footer-desc{ font-size:14px; max-width:280px; color:rgba(218,201,253,0.8); }
.footer-col h4, .footer-col .footer-heading{ line-height:1.4; }
.footer-col h4, .footer-col .footer-heading{ font-family:var(--body); font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--sky); margin-bottom:16px; font-weight:700; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14px; color:rgba(218,201,253,0.82); text-decoration:none; }
.footer-col a:hover{ color:var(--sky); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid rgba(218,201,253,0.18); flex-wrap:wrap; gap:12px; font-size:12.5px; color:rgba(218,201,253,0.78); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .hero-grid, .case-grid{ grid-template-columns:1fr; }
  .hero-figure{ width:100%; max-width:240px; margin:8px auto 0; }
  .identity-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .unity-grid{ grid-template-columns:1fr; gap:40px; }
  .case-media.pipeline{ aspect-ratio:16/5; }
}
@media (max-width:560px){
  .wrap, .wrap-narrow{ padding:0 20px; }
  section{ padding:72px 0; }
  .nav, .wrap.nav{ padding:16px 20px; }
  .logo img{ height:52px; }
  .nav-cta{ gap:6px; }
  .nav-cta .btn{ padding:9px 16px; font-size:13.5px; }
  .footer-grid{ grid-template-columns:1fr; }
  .identity-grid{ grid-template-columns:1fr 1fr; gap:18px; }
  .carousel-card, .pillar-card{ width:78vw; max-width:300px; }
  .member-card-top{ padding:28px 22px 22px; }
  .member-card-top h3{ font-size:28px; }
  .member-card-bottom{ padding:22px 22px 28px; }
  .join-form input[type="email"], .join-form .btn{ width:100%; justify-content:center; }
}

/* ---------- FORM CONSENT + ERROR (added pre-launch) ---------- */
.form-consent{ position:relative; margin:4px 0 18px; }
.form-consent p{ font-size:13px; line-height:1.55; color:var(--ink-soft); margin:0; }
.form-consent a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.form-error{ margin:14px 0 0; font-size:13.5px; line-height:1.55; color:var(--clay-text);
  background:rgba(235,108,53,0.10); border:1px solid rgba(163,63,20,0.28);
  border-radius:var(--radius); padding:12px 14px; }
.form-error:focus{ outline:2px solid var(--violet); outline-offset:2px; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- TAP TARGETS ----------
   Standalone text links get at least a 24px-tall tap area (WCAG 2.2 SC 2.5.8). */
.role-card-link, .back-link, .article-back, .boilerplate-copy,
.error-links a, .follow-links a, .card > .back{ display:inline-flex; align-items:center; min-height:24px; }