/* =============================================================
   ChabadLabs — "SIGNAL" direction · Light Manifesto skin
   Off-white, monochrome, type-led · ONE deeper-teal accent.
   Generous whitespace, sentence-case headings, hairline-divided sections.
   Fonts kept: Bricolage Grotesque (display) · Inter (body) · Space Mono (labels).
   Palette: Light theme (inverted from the Dark Manifesto).
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root {
  /* ---------- Core ---------- */
  --ink:    #15181C;   /* near-black foreground / text */
  --ink-2:  #5C6770;   /* muted text */
  --paper:  #F6F7F4;   /* soft off-white page background */
  --paper-2:#FFFFFF;   /* raised surface (cards) — white, sits above --paper */
  --white:  #ffffff;

  /* ---------- Light theme — deeper-teal accent family ---------- */
  --blue:     #0E9488;  /* accent (links / keywords) */
  --blue-2:   #0B7269;  /* deeper accent */
  --surface-dark: #ECEEE8;  /* subtle light-grey band (footer + scrolled bar) */
  --teal:     #0E9488;  /* accent alias -> deeper teal */
  --cyan:     #0E9488;  /* accent alias -> deeper teal */
  --lime:     #0E9488;  /* accent alias -> deeper teal */
  --sky:      #5C6770;  /* muted */
  --lavender: #5C6770;  /* muted */
  --fuchsia:  #5C6770;  /* muted */
  --coral:    #0E9488;  /* accent alias -> deeper teal */
  --ink-on-lime: #FFFFFF;  /* text on a filled accent button */
  --paper-on-blue: #FFFFFF;

  /* ---------- Subtle warm-teal hero glow trio ---------- */
  --iri-1: #C8EAE4;
  --iri-2: #5FE0D2;
  --iri-3: #F6F7F4;

  /* ---------- Lines / hairlines ---------- */
  --hair:   rgba(21, 24, 28, 0.12);
  --hair-light: rgba(21, 24, 28, 0.12);
  --border: 1px solid var(--hair);
  --shadow-brut: none;
  --shadow-brut-sm: none;
  --shadow-brut-blue: none;
  --glow-cyan: none;

  /* ---------- Type ---------- */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Inter", "Space Grotesk", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  --t-hero: clamp(2.75rem, 12vw, 9rem);
  --t-h2:   clamp(2.1rem, 8vw, 5rem);
  --t-h3:   clamp(1.3rem, 5vw, 2rem);
  --t-lead: clamp(1.1rem, 4vw, 1.4rem);
  --t-mono: 0.72rem;
  --t-micro:0.64rem;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.5, 0.44, 1);
  --d1: 180ms; --d2: 420ms; --d3: 880ms;

  /* gutter honors the notch on viewport-fit=cover (env() is 0 on non-notch
     devices, so max() resolves to the clamp — no change off-notch). */
  --gutter: max(clamp(18px, 5vw, 60px), env(safe-area-inset-left), env(safe-area-inset-right));
}


* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input { font: inherit; }
::selection { background: var(--lime); color: var(--ink-on-lime); }

.mono { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.kick { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.18em; text-transform: uppercase; }
.disp { font-family: var(--display); font-weight: 800; line-height: 0.96; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }

/* =============================================================
   Structural grid overlay (Swiss) — removed in Dark Manifesto skin.
   .gridlines markup may still exist on pages; render nothing.
   ============================================================= */
.gridlines { display: none; }

/* =============================================================
   Top bar
   ============================================================= */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) var(--gutter) 12px;
  border-bottom: 2px solid transparent;
  transition: background var(--d2) var(--ease-out), border-color var(--d2), color var(--d2);
  color: var(--ink);
}
.bar.is-scrolled { background: var(--surface-dark); border-bottom-color: var(--hair); }
.bar .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.bar .brand .mk { width: 34px; height: 24px; flex-shrink: 0; }
.bar .brand .wm { font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; }
.bar .coord { display: none; }
.menu-btn { display: grid; place-items: center; width: 46px; height: 46px; -webkit-tap-highlight-color: transparent; }
.menu-btn .bars { width: 24px; height: 14px; position: relative; }
.menu-btn .bars span { position: absolute; left: 0; right: 0; height: 2.5px; background: currentColor; transition: transform var(--d2) var(--ease-snap), top var(--d2) var(--ease-snap), opacity var(--d1); }
.menu-btn .bars span:nth-child(1) { top: 0; }
.menu-btn .bars span:nth-child(2) { top: 6px; }
.menu-btn .bars span:nth-child(3) { top: 12px; }
body.menu-open .menu-btn .bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.menu-open .menu-btn .bars span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn .bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* =============================================================
   Menu overlay — brutalist
   ============================================================= */
.menu { position: fixed; inset: 0; z-index: 40; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 90px var(--gutter) var(--gutter); transform: translateY(-101%); transition: transform 560ms var(--ease-out); }
body.menu-open .menu { transform: none; }
body.menu-open { overflow: hidden; }
.menu nav { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.menu a { display: flex; align-items: baseline; gap: 16px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 11vw, 4.2rem); line-height: 1.04; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--hair); -webkit-tap-highlight-color: transparent; transition: color var(--d1), padding-left var(--d2) var(--ease-out), background var(--d1); opacity: 0; transform: translateY(20px); }
.menu a .ix { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--ink-2); }
.menu a:hover { color: var(--lime); padding-left: 16px; }
.menu a.cur { color: var(--lime); }
.menu a.cur:hover { color: var(--lime); }
body.menu-open .menu a { opacity: 1; transform: none; transition: opacity var(--d2) var(--ease-out), transform var(--d2) var(--ease-out), color var(--d1), padding-left var(--d2), background var(--d1); }
body.menu-open .menu a:nth-child(1) { transition-delay: 200ms; }
body.menu-open .menu a:nth-child(2) { transition-delay: 250ms; }
body.menu-open .menu a:nth-child(3) { transition-delay: 300ms; }
body.menu-open .menu a:nth-child(4) { transition-delay: 350ms; }
body.menu-open .menu a:nth-child(5) { transition-delay: 400ms; }
body.menu-open .menu a:nth-child(6) { transition-delay: 450ms; }
body.menu-open .menu a:nth-child(7) { transition-delay: 500ms; }
.menu .foot { margin-top: 28px; display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(21,24,28,0.7); }

/* =============================================================
   Buttons — pill glass + glow
   ============================================================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; font-family: var(--display); font-weight: 700; font-size: 1.02rem; text-decoration: none; background: transparent; color: var(--ink); border: 1px solid rgba(21, 24, 28, 0.28); border-radius: 999px; -webkit-tap-highlight-color: transparent; transition: transform var(--d1) var(--ease-snap), background var(--d1), color var(--d1), border-color var(--d1); }
.btn:hover { border-color: rgba(21, 24, 28, 0.55); background: rgba(21, 24, 28, 0.04); }
.btn .arr { transition: transform var(--d1) var(--ease-snap); }
.btn:hover .arr { transform: translateX(4px); }
.btn-lime { background: var(--lime); color: var(--ink-on-lime); border-color: var(--lime); }
.btn-lime:hover { background: var(--blue-2); border-color: var(--blue-2); color: var(--ink-on-lime); }
.btn-lime:active { transform: translateY(1px); }
.btn-ink { background: transparent; color: var(--ink); border-color: rgba(21, 24, 28, 0.28); }
.btn-ink:hover { border-color: rgba(21, 24, 28, 0.55); background: rgba(21, 24, 28, 0.04); }
.btn-ink:active { transform: translateY(1px); }
.btn-line { background: transparent; color: var(--ink); border: 1px solid rgba(21, 24, 28, 0.28); }
.btn-line:hover { border-color: rgba(21, 24, 28, 0.55); background: rgba(21, 24, 28, 0.04); color: var(--ink); }
.btn-line.on-blue { color: var(--ink); background: transparent; border-color: rgba(21, 24, 28, 0.28); }
.btn-line.on-blue:hover { background: rgba(21, 24, 28, 0.04); color: var(--ink); border-color: rgba(21, 24, 28, 0.55); }

/* =============================================================
   Section scaffolding
   ============================================================= */
.sec { position: relative; padding: clamp(52px, 7vw, 92px) var(--gutter); overflow: hidden; border-top: 1px solid var(--hair); }
.sec.ink { background: var(--paper); color: var(--ink); }
.sec.blue { background: var(--paper); color: var(--ink); }
.sec.lime { background: var(--paper); color: var(--ink); }
.in { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }

.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.eyebrow .tag { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow .rule { flex: 1; height: 1px; background: var(--hair); }
.eyebrow .idx { display: none; }

.lead { font-size: var(--t-lead); line-height: 1.45; text-wrap: pretty; }

/* =============================================================
   Hero
   ============================================================= */
.hero { position: relative; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: clamp(128px, 17vh, 184px) var(--gutter) clamp(72px, 9vh, 108px); overflow: hidden; }
.hero-iri { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(64px); opacity: 0.5; background: radial-gradient(circle at 50% 50%, var(--iri-2), var(--iri-1) 45%, transparent 70%); animation: heroFloat 18s ease-in-out infinite; will-change: transform; }
.hero-iri.a { width: 90vw; height: 90vw; max-width: 720px; max-height: 720px; top: -16vh; right: -16vw; }
.hero-iri.b { display: none; }
@keyframes irispin { to { transform: rotate(360deg); } }
@keyframes heroFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5%, 5%) scale(1.1); } }

.hero-top { position: absolute; top: 92px; left: var(--gutter); right: var(--gutter); z-index: 2; display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(21,24,28,0.55); }

.hero-main { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; width: 100%; }
.hero-pill { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 1px solid var(--hair); border-radius: 999px; padding: 8px 16px; margin-bottom: 22px; }
.hero-pill .blink { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; animation: blink 1.3s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

.hero h1 { font-family: var(--display); font-weight: 800; font-size: var(--t-hero); line-height: 0.95; letter-spacing: -0.03em; margin: 0; }
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span { display: block; transform: translateY(105%); animation: heroRise 800ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
body.hero-set .hero h1 .ln > span { animation: none; transform: none; }
@keyframes heroRise { to { transform: none; } }
.hero h1 .iri-text { color: var(--lime); }
@keyframes iriflow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.hero-sub { margin: 24px 0 0; max-width: 36ch; font-size: var(--t-lead); line-height: 1.4; color: rgba(21,24,28,0.78); text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 14px; border-top: 2px solid rgba(21,24,28,0.18); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(21,24,28,0.5); }
.hero-foot .scroll::after { content: " ↓"; display: inline-block; animation: bobv 1.6s var(--ease-out) infinite; }
@keyframes bobv { 50% { transform: translateY(4px); } }

/* =============================================================
   Mission
   ============================================================= */
.mission { display: grid; grid-template-columns: 1fr; gap: 30px; }
.mission .big { font-family: var(--display); font-weight: 800; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 28px; text-wrap: balance; }
.mission .big em { font-style: normal; color: var(--blue); }
.mission p { font-size: var(--t-lead); color: var(--ink-2); margin: 0 0 1em; max-width: 60ch; text-wrap: pretty; }
.mission p strong { color: var(--ink); }

/* =============================================================
   Illustration tiles — removed in Dark Manifesto skin (text-led).
   .tile markup may still exist on pages; render nothing.
   ============================================================= */
.tile { display: none; }
.tile svg { width: 100%; height: 100%; display: block; border-radius: inherit; }
.tile .tlabel { position: absolute; left: 10px; bottom: 10px; border-radius: 999px; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 5px 9px; z-index: 2; }
.d-ink { fill: var(--ink); }
.d-ink-l { stroke: var(--ink); fill: none; }
.d-blue { fill: var(--blue); }
.d-blue-l { stroke: var(--blue); fill: none; }
.d-lime { fill: var(--lime); }
.d-paper { fill: var(--paper); }
/* assembly */
.tile [data-an], .hero-stage [data-an] { transform-box: fill-box; transform-origin: center; transition: transform .9s var(--ease-out), opacity .9s var(--ease-out); transition-delay: var(--ad, 0ms); }
.tile.no-trans [data-an] { transition: none !important; }
.tile:not(.is-in) [data-an="pop"] { transform: scale(0); opacity: 0; }
.tile:not(.is-in) [data-an="rise"] { transform: translateY(40px); opacity: 0; }
.tile:not(.is-in) [data-an="drop"] { transform: translateY(-40px); opacity: 0; }
.tile:not(.is-in) [data-an="left"] { transform: translateX(-44px); opacity: 0; }
.tile:not(.is-in) [data-an="spin"] { transform: rotate(160deg) scale(.4); opacity: 0; }
.tile:not(.is-in) [data-an="fade"] { opacity: 0; }
.tile [data-loop="spin"] { transform-box: fill-box; transform-origin: center; }
.tile.is-in [data-loop="spin"] { animation: irispin 26s linear infinite; }
.tile.is-in [data-loop="bob"] { transform-box: fill-box; transform-origin: center; animation: bob2 4.5s ease-in-out infinite; }
@keyframes bob2 { 50% { transform: translateY(-12px); } }

/* =============================================================
   Tools — blue block, brutalist tiles
   ============================================================= */
.tools { display: grid; gap: 22px; }
.card { display: block; text-decoration: none; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--paper-2); color: var(--ink); transition: transform var(--d2) var(--ease-out), border-color var(--d2); -webkit-tap-highlight-color: transparent; }
.card:hover { transform: translateY(-4px); border-color: rgba(21, 24, 28, 0.22); }
.card:active { transform: translateY(-1px); }
.card-body { padding: 26px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h3 { font-family: var(--display); font-weight: 800; font-size: var(--t-h3); margin: 0; letter-spacing: -0.02em; }
.card .tag { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); border: 1px solid var(--hair); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.card p { margin: 12px 0 18px; color: var(--ink-2); line-height: 1.55; font-size: 0.98rem; text-wrap: pretty; }
.card .go { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.card .go .arr { color: var(--lime); transition: transform var(--d1) var(--ease-snap); }
.card:hover .go .arr { transform: translateX(5px); }

/* =============================================================
   Newsletter — lime block
   ============================================================= */
.news h2 { font-family: var(--display); font-weight: 800; font-size: var(--t-h2); line-height: 1.0; letter-spacing: -0.025em; margin: 0; }
.news .lead { color: var(--ink-2); margin: 16px 0 28px; max-width: 48ch; }
.signup { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.signup input { min-height: 56px; border: 1px solid var(--hair); border-radius: 999px; background: var(--paper-2); color: var(--ink); padding: 0 24px; outline: none; transition: border-color var(--d1); }
.signup input::placeholder { color: var(--ink-2); }
.signup input:focus { border-color: var(--blue); }
.signup .btn { width: 100%; }
.signup .done { display: none; align-items: center; gap: 10px; min-height: 56px; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.signup.is-done input, .signup.is-done .btn { display: none; }
.signup.is-done .done { display: inline-flex; }

/* =============================================================
   Webinars — paper block, brutalist rows
   ============================================================= */
.web { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.web-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 22px 4px; border-bottom: 1px solid var(--hair); text-decoration: none; transition: padding var(--d2) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.web-row:hover { padding-left: 12px; }
.web-date { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--hair); border-radius: 14px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; text-align: center; color: var(--ink-2); transition: border-color var(--d1), color var(--d1); }
.web-date strong { font-size: 1.2rem; display: block; letter-spacing: 0; }
.web-row:hover .web-date { border-color: var(--lime); color: var(--lime); }
.web-info h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.015em; }
.web-info p { margin: 4px 0 0; font-size: 0.9rem; color: var(--ink-2); }
.web-arr { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 50%; color: var(--ink-2); transition: color var(--d1), transform var(--d1) var(--ease-snap), border-color var(--d1); }
.web-row:hover .web-arr { color: var(--lime); border-color: var(--lime); transform: rotate(-45deg); }

/* =============================================================
   Footer
   ============================================================= */
.footer { background: var(--surface-dark); color: var(--ink); padding: clamp(60px,11vw,120px) var(--gutter) 26px; position: relative; overflow: hidden; }
.footer .gridlines { --gl: rgba(21,24,28,0.06); }
.footer-in { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
.footer .big { font-family: var(--display); font-weight: 800; font-size: clamp(3.2rem, 16vw, 11rem); line-height: 0.9; letter-spacing: -0.03em; margin: 0 0 36px; }
.footer .big em { font-style: normal; color: var(--lime); }
.foot-nav { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px 24px; margin-bottom: 44px; border-top: 1px solid var(--hair-light); }
.foot-nav a { text-decoration: none; color: rgba(21,24,28,0.66); padding: 14px 0; font-family: var(--display); font-weight: 600; font-size: 1.05rem; border-bottom: 1px solid var(--hair-light); transition: color var(--d1), padding-left var(--d1) var(--ease-out); }
.foot-nav a:hover { color: var(--lime); padding-left: 8px; }
.foot-base { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(21,24,28,0.6); }

/* Mobile: the one-word "ChabadLabs" wordmark can't break, so 16vw overflowed
   the viewport (clipped the "S"). Stack it Chabad / Labs and size it to fit. */
@media (max-width: 600px) {
  .footer .big { font-size: clamp(3rem, 17vw, 5rem); line-height: 0.9; }
  .footer .big em { display: block; }
  .foot-base { letter-spacing: 0.12em; }
}

/* =============================================================
   Interior page hero
   ============================================================= */
.phero { position: relative; background: var(--paper); color: var(--ink); padding: 130px var(--gutter) clamp(48px,9vw,80px); overflow: hidden; }
.phero .hero-iri { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: 0.16; background: radial-gradient(circle at 50% 50%, var(--iri-2), var(--iri-1) 45%, transparent 70%); width: 64vw; height: 64vw; max-width: 540px; max-height: 540px; top: -14vh; right: -16vw; }
.phero-in { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }
.phero .pill { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 1px solid var(--hair); border-radius: 999px; padding: 8px 16px; margin-bottom: 22px; }
.phero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 10vw, 6rem); line-height: 0.98; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.phero h1 em { font-style: normal; color: var(--lime); }
.phero .lead { margin: 22px 0 0; max-width: 56ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.stat-row { display: flex; flex-wrap: wrap; gap: 0; margin-top: 34px; border-top: 1px solid var(--hair); }
.stat-row .stat { flex: 1 1 40%; min-width: 140px; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--hair); }
.stat-row .stat strong { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem,6vw,2.4rem); letter-spacing: -0.02em; color: var(--lime); line-height: 1; }
.stat-row .stat span { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(21,24,28,0.6); }

/* =============================================================
   Wiki cards — brutalist
   ============================================================= */
.wiki-grid { display: grid; gap: 18px; }
.wiki-card { border: 1px solid var(--hair); border-radius: 14px; background: var(--paper-2); padding: 22px; position: relative; transition: transform var(--d2) var(--ease-out), border-color var(--d2); }
.wiki-card:hover { transform: translateY(-3px); border-color: rgba(21, 24, 28, 0.22); }
.wiki-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--hair); padding-bottom: 12px; margin-bottom: 12px; }
.wiki-card-head h3 { margin: 0; }
.wiki-card-head h3 a { font-family: var(--display); font-weight: 800; font-size: 1.32rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.wiki-card-head h3 a:hover { color: var(--blue); }
.wiki-count { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--hair); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.wiki-card > p { margin: 0 0 14px; color: var(--ink-2); font-size: 0.96rem; line-height: 1.5; text-wrap: pretty; }
.chip-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border: 1px solid var(--hair); border-radius: 999px; padding: 11px 16px; transition: background var(--d1), color var(--d1), border-color var(--d1); -webkit-tap-highlight-color: transparent; }
.chip:hover { color: var(--lime); border-color: var(--lime); }
.chip.more { border-style: dashed; }
.chip.more:hover { color: var(--lime); border-color: var(--lime); }

/* =============================================================
   Issue / generic brutalist cards
   ============================================================= */
.brut-grid { display: grid; gap: 18px; }
.brut-card { border: 1px solid var(--hair); border-radius: 14px; background: var(--paper-2); padding: 22px; transition: transform var(--d2) var(--ease-out), border-color var(--d2); }
.brut-card:hover { transform: translateY(-3px); border-color: rgba(21, 24, 28, 0.22); }
.brut-card .meta { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }
.brut-card .meta::before { content: ""; width: 22px; height: 1px; background: var(--blue); }
.brut-card h3 { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; margin: 0 0 8px; }
.brut-card p { margin: 0; color: var(--ink-2); font-size: 0.96rem; line-height: 1.5; text-wrap: pretty; }
.brut-card.dash { background: transparent; border-style: dashed; }
.brut-card.dash h3, .brut-card.dash .meta { opacity: 0.55; }

.note { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); border: 1px dashed var(--hair); border-radius: 999px; padding: 11px 20px; }
.note::before { content: "✦"; color: var(--coral); }

/* belief / value list */
.values { display: grid; gap: 0; border-top: 1px solid var(--hair); margin-top: 8px; }
.value { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.value .num { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--blue); padding-top: 6px; }
.value h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem,5vw,1.9rem); letter-spacing: -0.02em; margin: 0 0 8px; }
.value p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 52ch; text-wrap: pretty; }

@media (min-width: 760px) {
  .wiki-grid { grid-template-columns: repeat(2, 1fr); }
  .brut-grid { grid-template-columns: repeat(2, 1fr); }
  .brut-grid.three { grid-template-columns: repeat(3, 1fr); }
  .stat-row .stat { flex: 1; padding: 18px 20px 18px 0; }
  .value { grid-template-columns: 80px 1fr; gap: 28px; }
}

/* =============================================================
   Reveal + progress
   ============================================================= */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; background: var(--lime); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.rv { opacity: 0; transform: translateY(34px); transition: opacity var(--d3) var(--ease-out), transform var(--d3) var(--ease-out); transition-delay: var(--rvd, 0ms); }
.rv.is-in { opacity: 1; transform: none; }

/* =============================================================
   Responsive
   ============================================================= */
@media (min-width: 760px) {
  .bar .coord { display: block; margin-left: 24px; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
  .mission { grid-template-columns: 1fr; gap: 52px; max-width: 760px; }
  .tools { grid-template-columns: repeat(2, 1fr); }
  .signup { flex-direction: row; }
  .signup .btn { width: auto; flex-shrink: 0; }
  .signup input { flex: 1; }
  .news-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; }
  .foot-nav { grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 1080px) {
  .tools { grid-template-columns: repeat(3, 1fr); }
}

/* reduced motion */
html[data-motion="calm"] .hero-iri,
html[data-motion="calm"] .hero h1 .iri-text,
html[data-motion="calm"] .tile.is-in [data-loop],
html[data-motion="calm"] .hero-pill .blink { animation: none !important; }
html[data-motion="calm"] * { transition-duration: 0.01ms !important; }

/* Native OS "Reduce Motion" — the calm toggle lives in a host-only Tweaks
   panel a normal visitor can't open, so honor the system setting directly.
   Mirrors the calm selectors (kills the infinite decorative loops) + stops
   smooth-scroll. WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  .hero-iri, .phero .hero-iri,
  .hero h1 .iri-text, .phero h1 em,
  .tile.is-in [data-loop],
  .hero-pill .blink { animation: none !important; }
  html { scroll-behavior: auto !important; }
  * { transition-duration: 0.01ms !important; }
}

/* =============================================================
   Tweaks panel (hidden until host activates "Tweaks")
   ============================================================= */
.tweaks { position: fixed; z-index: 80; right: clamp(12px,3vw,26px); bottom: clamp(12px,3vw,26px); width: min(330px, calc(100vw - 24px)); max-height: min(82vh, 660px); overflow-y: auto; background: var(--paper-2); color: var(--ink); border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 24px 60px -24px rgba(0,0,0,0.7); font-family: var(--body); display: none; }
.tweaks.is-open { display: block; }
.tweaks-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--paper-2); border-bottom: 1px solid var(--hair); }
.tweaks-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.tweaks-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); display: inline-block; margin-right: 8px; vertical-align: middle; }
.tweaks-x { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 50%; color: var(--ink); font-size: 1rem; transition: background var(--d1), color var(--d1), border-color var(--d1); }
.tweaks-x:hover { color: var(--lime); border-color: var(--lime); }
.tweaks-body { padding: 16px; }
.tweaks-sec { margin-bottom: 22px; }
.tweaks-sec:last-child { margin-bottom: 4px; }
.tweaks-label { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(21,24,28,0.55); margin-bottom: 11px; }
.motion-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mtog { border: 1px solid var(--hair); border-radius: 999px; background: transparent; color: var(--ink-2); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 11px 8px; transition: background var(--d1), color var(--d1), border-color var(--d1); }
.mtog:hover { border-color: rgba(21, 24, 28, 0.4); color: var(--ink); }
.mtog.is-active { color: var(--lime); border-color: var(--lime); }
.tweaks-note { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; color: rgba(21,24,28,0.4); margin: 2px 0 0; }

/* =============================================================
   Contact form — pill fields + segmented signal type (lime block)
   ============================================================= */
.cform { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.cform .cfield { display: block; border: none; margin: 0; padding: 0; min-width: 0; }
.cform .flab { display: flex; align-items: baseline; gap: 10px; padding: 0; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.cform .flab .hint { opacity: 0.55; }
.cform input[type="text"], .cform input[type="email"], .cform textarea { width: 100%; min-height: 56px; border: 1px solid var(--hair); background: var(--paper-2); color: var(--ink); padding: 0 24px; outline: none; font: inherit; transition: border-color var(--d1); }
.cform input[type="text"], .cform input[type="email"] { border-radius: 999px; }
.cform textarea { border-radius: 14px; padding: 14px 24px; min-height: 160px; line-height: 1.5; resize: vertical; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--ink-2); }
.cform input:focus, .cform textarea:focus { border-color: var(--blue); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-pill { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seg-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg-pill span { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--hair); border-radius: 999px; padding: 12px 18px; transition: background var(--d1), color var(--d1), border-color var(--d1); }
.seg-pill:hover span { border-color: rgba(21, 24, 28, 0.4); color: var(--ink); }
.seg-pill input:checked + span { color: var(--lime); border-color: var(--lime); }
.seg-pill input:focus-visible + span { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--blue); }
.cform .btn { align-self: flex-start; }
.cform .btn[disabled] { opacity: 0.6; pointer-events: none; }
.cform-err { display: inline-flex; align-items: center; gap: 12px; margin: 0; align-self: flex-start; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border: 1px dashed var(--hair); border-radius: 999px; padding: 11px 20px; }
.cform-err::before { content: "✦"; color: var(--coral); }
.cform-err[hidden] { display: none; }
.cform .done { display: none; flex-direction: column; justify-content: center; gap: 8px; min-height: 56px; }
.cform .done .done-line { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cform .done .done-sub { color: var(--ink-2); font-size: 0.96rem; }
.cform.is-done .cfield, .cform.is-done .btn, .cform.is-done .cform-err { display: none; }
.cform.is-done .done { display: flex; }