/* =========================================================
   ELIS2code — shared stylesheet
   Layout: full-bleed dark stage; content sits on a fluid gutter,
   oversized display type bleeds toward the edges, and each product
   brings its own light (gold for Jewish Companion, candy for Game Hub).
   ========================================================= */
/* fallbacks sized to match the web fonts (measured in Chrome), so the text does not jump when the real fonts arrive */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"), local("Helvetica"), local("ArialMT"); size-adjust: 90.3%; ascent-override: 103%; descent-override: 29.9%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"), local("Helvetica"), local("ArialMT"); size-adjust: 101.64%; ascent-override: 95.43%; descent-override: 24.6%; line-gap-override: 0%; }

:root {
  --ink: #07080c;          /* page ground, slight blue bias */
  --ink-2: #0e1017;        /* raised surfaces */
  --ink-3: #171a26;        /* borders on raised surfaces */
  --fg: #ecebf3;           /* main text */
  --mute: #8e8ca3;         /* secondary text */
  --line: rgba(236, 235, 243, .12);
  --iris: #8f7dff;         /* signature accent */
  --iris-soft: #bdb3ff;
  --gold: #e4c27e;         /* Jewish Companion */
  --navy: #0c1430;
  --candy: #ff6f9c;        /* Game Hub */
  --plum: #1d0f2e;
  --imsg: #0a84ff;         /* contact chat bubbles */
  --ok: #4ade80;

  --f-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
  --f-body: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-hebrew: "Frank Ruhl Libre", "Times New Roman", serif;

  --gutter: clamp(16px, 4vw, 56px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font: 400 17px/1.6 var(--f-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--iris); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img, svg, canvas { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
[lang="he"] { font-family: var(--f-hebrew); }
[hidden] { display: none !important; }

.wrap { padding-inline: var(--gutter); width: 100%; max-width: 1600px; margin-inline: auto; }
.mono {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.h-display {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.045em; line-height: .9;
  font-size: clamp(56px, 12vw, 200px); text-wrap: balance;
}
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--mute); max-width: 42ch; }
.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;
}
.skip { position: fixed; top: 12px; left: 12px; z-index: 400; padding: 10px 16px; border-radius: 99px; background: var(--fg); color: var(--ink); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* film grain */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 95; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* the grain is still: at this strength its movement was barely seen, but cost a full-screen layer every frame */

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 99px; overflow: hidden; isolation: isolate;
  font: 600 15px/1 var(--f-body); border: 1px solid var(--line); background: var(--ink-2);
  transition: color .4s var(--ease-out), border-color .4s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--btn-fill, var(--fg)); transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: transparent; }
.btn--solid { background: var(--btn-bg, var(--iris)); color: var(--ink); border-color: transparent; }
.btn__arrow { transition: transform .5s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px) rotate(-45deg); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) 18px;
  color: var(--fg);
  transition: transform .6s var(--ease-out);
}
/* a soft scrim fades in once the page scrolls, so the nav stays readable without blend modes */
.nav::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(7, 8, 12, .82), rgba(7, 8, 12, .55) 60%, transparent); opacity: 0; transition: opacity .5s; }
.nav.is-scrolled::before { opacity: 1; }
.nav.is-hidden { transform: translateY(-110%); }
.logo {
  display: inline-flex; align-items: baseline;
  font: 800 23px/1 var(--f-display); letter-spacing: -.04em;
}
.logo__dev { font-weight: 300; letter-spacing: -.02em; }
.logo__caret {
  display: inline-block; width: .42em; height: 2px; margin-left: 3px; background: currentColor;
  animation: blink 1.05s steps(1) infinite;
}
.nav__links { position: relative; margin-left: auto; display: flex; gap: 6px; font-size: 15px; font-weight: 500; }
.nav__links a { position: relative; z-index: 1; padding: 9px 16px; border-radius: 99px; color: rgba(236, 235, 243, .72); transition: color .35s; }
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a[aria-current="page"] { color: var(--fg); }
/* hover: the label rolls up and a fresh copy rolls in from below */
.nl { display: block; overflow: hidden; height: 1.2em; line-height: 1.2; }
.nl__in { display: block; transition: transform .55s var(--ease-out); }
.nl__in::after { content: attr(data-t); display: block; }
.nav__links a:hover .nl__in, .nav__links a:focus-visible .nl__in { transform: translateY(-50%); }
/* a soft pill glides to the hovered link and rests on the current page (position set by core.js) */
.nav__pill {
  position: absolute; left: 0; top: 0; height: 100%; width: var(--pw, 0px); border-radius: 99px;
  background: rgba(236, 235, 243, .07); box-shadow: inset 0 0 0 1px rgba(236, 235, 243, .12);
  transform: translateX(var(--px, 0px)); opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease-out), width .5s var(--ease-out), opacity .3s;
}
.nav__pill.is-on { opacity: 1; }
.nav__pill.is-snap { transition: opacity .3s; }

/* mobile: two-line hamburger that morphs into a cross */
.nav__burger { display: none; position: relative; margin-left: auto; width: 44px; height: 44px; margin-right: -10px; border-radius: 50%; }
.nav__burger i { position: absolute; left: 12px; width: 20px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease-out), top .5s var(--ease-out); }
.nav__burger i:nth-child(1) { top: 17px; }
.nav__burger i:nth-child(2) { top: 25px; width: 14px; left: 18px; transition: transform .5s var(--ease-out), top .5s var(--ease-out), width .5s var(--ease-out), left .5s var(--ease-out); }
.nav__burger[aria-expanded="true"] i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-child(2) { top: 21px; left: 12px; width: 20px; transform: rotate(-45deg); }
@media (max-width: 760px) {

  .nav__links { display: none; }
  .nav__burger { display: block; }}

.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--ink-2);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 32px;
  padding: calc(90px + env(safe-area-inset-top, 0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-io); visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  font: 700 clamp(56px, 16vw, 96px)/1 var(--f-display); letter-spacing: -.045em;
  transform: translateY(40px); opacity: 0; transition: transform .7s var(--ease-out), opacity .7s;
}
.menu.is-open .menu__links a { transform: none; opacity: 1; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: .06s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: .12s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: .18s; }
html.is-locked, html.is-locked body { overflow: hidden; }

/* ---------- page transition curtain ---------- */
.curtain { position: fixed; inset: 0; z-index: 180; pointer-events: none; }
.curtain__a, .curtain__b { position: absolute; inset: 0; transform: translateY(101%); }
.curtain__a { background: var(--iris); }
.curtain__b { background: var(--ink-2); display: grid; place-items: center; overflow: hidden; }
.curtain__label {
  font: 700 clamp(40px, 7vw, 104px)/1 var(--f-display); letter-spacing: -.05em;
  opacity: 0; transform: translateY(30px); transition: opacity .5s .35s, transform .7s .35s var(--ease-out);
}
.curtain.is-in { pointer-events: auto; }
.curtain.is-in .curtain__a { transform: none; transition: transform .7s var(--ease-io); }
.curtain.is-in .curtain__b { transform: none; transition: transform .7s .08s var(--ease-io); }
.curtain.is-in .curtain__label, .from-t .curtain__label { opacity: 1; transform: none; }
.from-t .curtain__a, .from-t .curtain__b { transform: none; }
.curtain.is-out .curtain__b { transform: translateY(-101%); transition: transform .9s .22s var(--ease-io); }
.curtain.is-out .curtain__a { transform: translateY(-101%); transition: transform .9s .32s var(--ease-io); }
.curtain.is-out .curtain__label { opacity: 0; transform: translateY(-30px); transition: opacity .3s, transform .5s; }

/* ---------- the rocket that carries you between pages ----------
   leaving (.is-in): launches from below to the centre while the curtain rises
   waiting (.from-t, next page): hovers, flame flickering, stars streaking past
   arriving (.is-out): boosts off the top and the curtain follows it away */
.curtain__label { margin-top: 240px; }
.rocket { position: absolute; left: 50%; top: 50%; width: 112px; margin: -250px 0 0 -56px; transform: translateY(110vh); z-index: 2; will-change: transform; }
.rocket__svg { display: block; width: 100%; height: auto; overflow: visible; }
.rocket__flame { transform-origin: 40px 100px; }
.curtain.is-in .rocket__flame, .from-t .rocket__flame, .curtain.is-out .rocket__flame { animation: rk-flicker .09s ease-in-out infinite alternate; }
.curtain.is-in .rocket { transform: none; transition: transform .8s .05s cubic-bezier(.2, .9, .3, 1.05); }
.from-t .rocket { transform: none; }
.curtain.is-in .rocket, .from-t .rocket { animation: rk-hover 1.2s ease-in-out .8s infinite alternate; }
.curtain.is-out .rocket { transform: translateY(-120vh); transition: transform .75s cubic-bezier(.6, 0, .9, .4); animation: none; }
.curtain.is-out .rocket__flame { scale: 1 1.8; transition: scale .3s; }
/* the monkey waves while the rocket flies */
.rocket__wave { transform-origin: 72px 72px; }
.curtain.is-in .rocket__wave, .from-t .rocket__wave, .curtain.is-out .rocket__wave { animation: rk-wave .5s ease-in-out infinite alternate; }
.rocket__tip { animation: blink 1s steps(1) infinite; }
html:not(.from-t) .curtain:not(.is-in):not(.is-out) .rocket__tip { animation: none; } /* parked off screen */
/* smoke puffs left behind */
.rocket__puff { position: absolute; left: 50%; top: 88%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle, rgba(236, 235, 243, .5), rgba(236, 235, 243, 0) 70%); opacity: 0; }
.curtain.is-in .rocket__puff, .from-t .rocket__puff { animation: rk-puff .9s ease-out infinite; }
.rocket__puff:nth-of-type(2) { animation-delay: .3s !important; --px: -24px; }
.rocket__puff:nth-of-type(3) { animation-delay: .6s !important; --px: 22px; }
/* speed lines */
.curtain__stars { position: absolute; inset: 0; pointer-events: none; }
.curtain__stars i { position: absolute; left: var(--x); top: -160px; width: 1.5px; height: var(--l); border-radius: 2px; background: linear-gradient(transparent, rgba(189, 179, 255, .7)); opacity: 0; }
.curtain.is-in .curtain__stars i, .from-t .curtain__stars i, .curtain.is-out .curtain__stars i { animation: rk-streak .7s linear var(--d) infinite; }
@media (max-width: 700px) {
 .rocket { width: 84px; margin: -200px 0 0 -42px; } .curtain__label { margin-top: 190px; }}

/* ---------- reveal helpers ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split-i { display: inline-block; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i) * 40ms + var(--d, 0s)); }
.js [data-split]:not(.in) .split-i { transform: translateY(108%); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: max(560px, 94svh); display: flex; overflow: hidden; isolation: isolate; }

/* "S2" in every ELIS2code wordmark: together their tops read as a heart */
.heart {
  /* a red heart over S2 (sized to the letters' cap height) on a white fill, clipped to the text */
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%2088%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ff4d6d%22%20d%3D%22M50%2088C20%2065%200%2045%200%2025C0%2010%2012%200%2026%200C38%200%2046%207%2050%2016C54%207%2062%200%2074%200C88%200%20100%2010%20100%2025C100%2045%2080%2065%2050%2088Z%22/%3E%3C/svg%3E") 50% 50% / 100% 58% no-repeat, linear-gradient(var(--fg), var(--fg));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* the tight letter-spacing lets the 2 poke past the span; widen the painted box without moving anything */
  padding-right: .06em; margin-right: -.06em;
}
.foot__logo .heart { font-weight: inherit; letter-spacing: inherit; color: transparent; }
/* the logo inside a sentence: ELI, the heart S2 and a light purple "code", as in the footer */
.wordmark { white-space: nowrap; }
.wordmark .heart { font-weight: inherit; letter-spacing: inherit; }

/* ---------- pinned phone showcase ---------- */
.foot__mark { position: relative; display: inline-block; width: fit-content; }
.st { grid-area: 1 / 1; display: grid; gap: 14px; font: 700 clamp(40px, 6.2vw, 104px)/.92 var(--f-display); letter-spacing: -.045em; max-width: 7ch; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.st .mono { letter-spacing: .1em; }
.phone { --w: min(290px, 62vw, 38svh); position: relative; z-index: 2; width: var(--w); aspect-ratio: 9 / 19.4; perspective: 1600px; }
.screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .135); font-size: calc(var(--w) * .043); line-height: 1.3; }
@media (max-width: 900px) {
  .st { font-size: clamp(30px, 8vw, 54px); max-width: none; gap: 8px; }
  .phone { --w: min(250px, 56vw, 34svh); margin-top: 60px; }}

.cta__status i, .foot__status i { position: relative; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--ok); }
.cta__status i::after, .foot__status i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(74, 222, 128, .6); animation: ping-ok 2.2s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .cta__status i::after, .foot__status i::after { animation: none; }}

[data-magnetic] { transition: transform .7s var(--ease-spring); }
[data-magnetic].is-pulling { transition: transform .18s linear; }

/* ---------- footer ---------- */
.foot { position: relative; padding-block: clamp(56px, 7vw, 96px) calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 125, 255, .5), var(--line) 60%, transparent); }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 48px clamp(40px, 6vw, 96px); }
.foot__brand { display: grid; gap: 16px; align-content: start; max-width: 36ch; }
.foot__logo { width: fit-content; font: 800 28px/1 var(--f-display); letter-spacing: -.04em; }
.foot__logo span { font-weight: 300; letter-spacing: -.02em; color: var(--iris-soft); }
.foot__brand > p:not(.mono) { color: var(--mute); font-size: 15px; line-height: 1.6; }
.foot__status { display: inline-flex; align-items: center; gap: 10px; }
.foot__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot__col { display: grid; gap: 12px; align-content: start; }
.foot__col .mono:first-child { margin-bottom: 4px; }
.foot__col a { color: var(--mute); font-size: 15px; transition: color .3s; width: fit-content; }
.foot__col a:hover { color: var(--fg); }
.foot__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 860px) {
 .foot__top { grid-template-columns: 1fr; }}

@media (max-width: 560px) {
 .foot__grid { grid-template-columns: 1fr 1fr; }}

.to-top { display: inline-flex; gap: 8px; align-items: center; }

/* ---------- work: case studies ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; margin-top: clamp(60px, 8vw, 100px); }
.features > div { background: var(--plum); padding: clamp(22px, 3vw, 36px); display: grid; gap: 10px; align-content: start; min-width: 0; }
.features b { font: 600 20px/1.2 var(--f-display); letter-spacing: -.02em; }
.features p { color: var(--mute); font-size: 15px; }
.features .big { font: 800 56px/1 var(--f-display); letter-spacing: -.04em; color: var(--candy); }
@media (max-width: 800px) {
 .features { grid-template-columns: 1fr; }}

.next { padding-block: clamp(100px, 14vw, 180px); }
.next a { display: grid; gap: 16px; }
.next .h-display { transition: color .4s, transform .8s var(--ease-out); }
.next a:hover .h-display { color: var(--iris-soft); transform: translateX(20px); }
.preview { position: relative; display: grid; place-items: center; align-content: center; gap: 10px; padding: 14px 12px 16px; border-left: 1px solid rgba(189, 179, 255, .1); background: radial-gradient(circle at 50% 45%, rgba(143, 125, 255, .12), transparent 70%), rgba(0, 0, 0, .18); }
.pv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap, 6cqw); padding: 12cqw 8cqw; text-align: center; color: #111; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Instrument Sans", system-ui, sans-serif; transition: gap .5s var(--ease-out); }
.pv > *, .pv__art > * { transition: opacity .45s var(--ease-out), transform .6s var(--ease-spring), width .6s var(--ease-spring), background .6s, color .6s, fill .6s; }
.pv .is-hidden { opacity: 0; transform: scale(.4); }
.pv > .is-gone { display: none; }
.pv > :not(.is-gone) { animation: pv-pop .55s var(--ease-spring); }
@media (max-width: 620px) {

  .preview { order: -1; border-left: 0; border-bottom: 1px solid rgba(189, 179, 255, .1); }}

/* ---------- about: live Swift editor (types, deletes and rewrites code; about.js) ---------- */
.editor {
  position: relative; width: 100%; margin: 0; display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #16172a, #0f1020); border: 1px solid rgba(189, 179, 255, .16);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4), 0 0 80px -20px rgba(143, 125, 255, .35);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--ease-out);
}
.caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: #a898ff; animation: blink 1.05s steps(1) infinite; }
/* dvh, not svh: svh is the height with the browser bars out, so once they slide away a
   strip of whatever is underneath showed at the bottom of the screen */
.forge__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; background: var(--ink); }
.forge__inner { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding-top: calc(72px + env(safe-area-inset-top, 0px)); padding-bottom: 32px; }
.forge__copy { display: grid; gap: clamp(28px, 4vh, 48px); align-content: center; }
.forge__steps { display: grid; }
.forge__step { grid-area: 1 / 1; display: grid; gap: 18px; align-content: start; opacity: 0; transform: translateY(26px); pointer-events: none; transition: opacity .55s var(--ease-out), transform .8s var(--ease-out); }
.forge__step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.forge__step.is-past { transform: translateY(-26px); }
.forge__t { margin: 0; font: 650 clamp(34px, 4.2vw, 68px)/1.02 var(--f-display); letter-spacing: -.04em; text-wrap: balance; }
.forge__t .hl { color: #a898ff; white-space: nowrap; }
.forge__d { margin: 0; max-width: 40ch; color: var(--fg); opacity: .78; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }
/* progress: one bar per step, filled as you scroll through it (--f set by home.js) */
.forge__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; max-width: 420px; }
.forge__nav li { display: grid; gap: 10px; }
.forge__nav i { position: relative; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.forge__nav i::after { content: ""; position: absolute; inset: 0; background: #a898ff; transform: scaleX(var(--f, 0)); transform-origin: left; }
.forge__nav span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); transition: color .4s; }
.forge__nav li.is-on span { color: var(--fg); }
/* the visual: a fixed 640 x 620 board, scaled into whatever space the stage leaves (--k) */
.forge__visual { position: relative; align-self: stretch; min-height: 0; }
.forge__board { position: absolute; left: 50%; top: 50%; width: 640px; height: 620px; transform: translate(-50%, -50%) scale(var(--k, 1)); }
.forge__board > * { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
/* the pieces keep their own layers only while the section is near the screen, to spare memory on phones */
.forge.is-off .forge__board > * { will-change: auto; }
@media (max-width: 860px) {

  .forge__inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 12px; padding-bottom: 20px; }
  .forge__copy { gap: 18px; }
  .forge__t { font-size: clamp(28px, 7.4vw, 40px); }
  .forge__d { font-size: 15.5px; }}

.step { flex: none; width: clamp(280px, 34vw, 460px); min-height: min(62svh, 520px); border-radius: 26px; padding: clamp(24px, 3vw, 40px); background: var(--ink-2); border: 1px solid var(--ink-3); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.step h3 { margin-bottom: 10px; font: 650 clamp(28px, 3vw, 44px)/1 var(--f-display); letter-spacing: -.035em; }
.step p { color: var(--mute); }
/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(32px, 6vw, 96px); padding-top: calc(clamp(130px, 16vw, 200px) + env(safe-area-inset-top, 0px)); padding-bottom: clamp(80px, 10vw, 140px); align-items: start; }
@media (max-width: 900px) {
 .contact { grid-template-columns: 1fr; }}

.copy { display: inline-flex; align-items: center; gap: 12px; font: 600 clamp(22px, 3vw, 40px)/1.1 var(--f-display); letter-spacing: -.03em; text-align: left; overflow-wrap: anywhere; }
.chat { position: relative; height: min(640px, 74svh); border-radius: 32px; overflow: hidden; background: #000; display: flex; flex-direction: column; }
.chat__log { flex: 1; overflow-y: auto; padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.bubble { max-width: 78%; padding: 9px 14px; border-radius: 20px; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; animation: bubble .45s var(--ease-spring) both; }
.bubble--in { align-self: flex-start; background: #26262b; color: #fff; border-bottom-left-radius: 6px; transform-origin: bottom left; }
.bubble--out { align-self: flex-end; background: var(--imsg); color: #fff; border-bottom-right-radius: 6px; transform-origin: bottom right; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 13px 14px; border-radius: 20px; background: #26262b; border-bottom-left-radius: 6px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: dot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
/* ---------- confetti canvas ---------- */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 260; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body::after { animation: none; }
  .js [data-reveal], .js [data-split]:not(.in) .split-i { opacity: 1; transform: none; }}

/* ---------- Jewish Companion screens (recreated from the real app) ----------
   Sizes are iPhone points: --u is one point of a 390pt-wide screen, so every
   screen scales with whatever frame it sits in. */
.jc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.jca {
  --u: calc(100cqw / 390);
  --jca-bg: #f6f4ef; --jca-card: #f3f1ec; --jca-edge: #e6e3dd; --jca-ink: #111114; --jca-mute: #8a8a8e; --jca-navy: #22408e;
  --jca-serif: ui-serif, "New York", "Frank Ruhl Libre", Georgia, serif;
  position: absolute; inset: 0; overflow: hidden; container-type: inline-size;
  background: var(--jca-bg); color: var(--jca-ink); text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Instrument Sans", system-ui, sans-serif;
  line-height: 1.25; letter-spacing: 0; -webkit-font-smoothing: antialiased;
}
:where(.jca) :where(p, b, small, em) { margin: 0; }
.jca svg { display: block; flex: none; }
.jca-island { position: absolute; z-index: 6; top: calc(var(--u) * 11); left: 50%; width: calc(var(--u) * 122); height: calc(var(--u) * 35); margin-left: calc(var(--u) * -61); border-radius: 99px; background: #000; }
.jca-sb { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: calc(var(--u) * 52); display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 2) calc(var(--u) * 30) 0 calc(var(--u) * 48); font-size: calc(var(--u) * 16); font-weight: 600; }
.jca-sb__r { display: flex; align-items: center; gap: calc(var(--u) * 6); }
.jca-sig { display: flex; align-items: flex-end; gap: calc(var(--u) * 1.8); height: calc(var(--u) * 11); }
.jca-sig b { width: calc(var(--u) * 3); border-radius: calc(var(--u) * 1); background: currentColor; }
.jca-sig b:nth-child(1) { height: calc(var(--u) * 4); } .jca-sig b:nth-child(2) { height: calc(var(--u) * 6); } .jca-sig b:nth-child(3) { height: calc(var(--u) * 8.5); } .jca-sig b:nth-child(4) { height: calc(var(--u) * 11); }
.jca-bat { width: calc(var(--u) * 25); height: calc(var(--u) * 12); padding: calc(var(--u) * 1.6); border: calc(var(--u) * 1) solid rgba(0, 0, 0, .35); border-radius: calc(var(--u) * 3.6); }
.jca-bat::before { content: ""; display: block; width: 80%; height: 100%; border-radius: calc(var(--u) * 1.8); background: currentColor; }

.jca-page { position: absolute; inset: 0; padding-top: calc(var(--u) * 52); background: var(--jca-bg); will-change: transform; }

.jca-card { background: var(--jca-card); border: calc(var(--u) * 1) solid var(--jca-edge); border-radius: calc(var(--u) * 18); }
.jca-ic { flex: none; width: calc(var(--u) * 37); height: calc(var(--u) * 37); border-radius: 50%; display: grid; place-items: center; }
.jca-ic svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.jca-today .jca-ic svg, .jca-tool .jca-ic svg { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.jca-bless__h .jca-ic svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.jca-ic--blue { background: #d9e7f6; color: #2f7de1; }
.jca-ic--orange { background: #fbe2cd; color: #f47b20; }
.jca-ic--purple { background: #e5e2f6; color: #5b4bd6; }
.jca-ic--pink { background: #f5d9ef; color: #cf3cae; }
.jca-ic--green { background: #d6edd8; color: #30b64f; }
.jca-chev { width: calc(var(--u) * 13); height: calc(var(--u) * 13); margin-left: auto; color: #b3b3b7; }
.jca-sec { margin: calc(var(--u) * 26) calc(var(--u) * 40) calc(var(--u) * 9); font-size: calc(var(--u) * 10.5); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7d7d82; }

/* home */
.jca-page--home { padding-top: 0; }
.jca-sky { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 300); overflow: hidden; background: linear-gradient(180deg, #a9cdea 0%, #c9def0 40%, #e6ecef 72%, var(--jca-bg) 100%); }
.jca-sky i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 55%, rgba(255, 255, 255, 0)); }
.jca-sky i:nth-child(1) { left: calc(var(--u) * -40); top: calc(var(--u) * 50); width: calc(var(--u) * 220); height: calc(var(--u) * 130); }
.jca-sky i:nth-child(2) { left: calc(var(--u) * 110); top: calc(var(--u) * 10); width: calc(var(--u) * 240); height: calc(var(--u) * 160); }
.jca-sky i:nth-child(3) { left: calc(var(--u) * 250); top: calc(var(--u) * 80); width: calc(var(--u) * 210); height: calc(var(--u) * 140); }
.jca-sky i:nth-child(4) { left: 0; top: calc(var(--u) * 160); width: calc(var(--u) * 390); height: calc(var(--u) * 120); }
.jca-sky i:nth-child(5) { left: calc(var(--u) * -60); top: calc(var(--u) * 220); width: calc(var(--u) * 510); height: calc(var(--u) * 90); }
.jca-top { position: absolute; z-index: 2; top: calc(var(--u) * 52); right: calc(var(--u) * 22); display: flex; gap: calc(var(--u) * 8); }
.jca-rb { width: calc(var(--u) * 37); height: calc(var(--u) * 37); border-radius: 50%; display: grid; place-items: center; color: #1c1c1e; background: rgba(251, 250, 247, .8); border: calc(var(--u) * 1) solid rgba(255, 255, 255, .9); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(0, 0, 0, .08); }
.jca-rb svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.jca-hero { position: relative; z-index: 1; padding: calc(var(--u) * 98) calc(var(--u) * 26) 0; display: grid; justify-items: center; text-align: center; color: #1d2d56; }
.jca-star { width: calc(var(--u) * 52); height: calc(var(--u) * 56); color: #20355f; }
.jca-cap { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 10.5); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #4f5f7a; }
.jca-parasha { margin-top: calc(var(--u) * 4); display: flex; align-items: center; gap: calc(var(--u) * 4); font: 600 calc(var(--u) * 15.5)/1.2 var(--jca-serif); }
.jca-parasha svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.jca-quote { margin-top: calc(var(--u) * 12); max-width: calc(var(--u) * 340); font: italic 400 calc(var(--u) * 13.5)/1.35 var(--jca-serif); }
.jca-src { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 10.5); color: #5a6982; }
.jca-today { position: relative; z-index: 1; margin: calc(var(--u) * 22) calc(var(--u) * 23) 0; padding: calc(var(--u) * 15) calc(var(--u) * 13); display: grid; grid-template-columns: 1fr 1fr; background: rgba(246, 244, 239, .9); }
.jca-today > div { display: flex; align-items: flex-start; gap: calc(var(--u) * 10); min-width: 0; }
.jca-today > div + div { padding-left: calc(var(--u) * 12); border-left: calc(var(--u) * 1) solid var(--jca-edge); }
.jca-today .jca-ic { width: calc(var(--u) * 33); height: calc(var(--u) * 33); margin-top: calc(var(--u) * 4); }
.jca-today small { display: block; font-size: calc(var(--u) * 10); color: var(--jca-mute); }
.jca-today b { display: block; margin: calc(var(--u) * 1) 0; font-size: calc(var(--u) * 14); font-weight: 600; white-space: nowrap; }
.jca-today > div > div > span { display: block; font-size: calc(var(--u) * 10); color: var(--jca-mute); }
.jca-rows { margin: 0 calc(var(--u) * 40); display: grid; gap: calc(var(--u) * 10); }
.jca-row { display: flex; align-items: center; gap: calc(var(--u) * 13); min-height: calc(var(--u) * 56); padding: calc(var(--u) * 9) calc(var(--u) * 14) calc(var(--u) * 9) calc(var(--u) * 15); border-radius: calc(var(--u) * 16); }
.jca-row b { display: block; font-size: calc(var(--u) * 16); font-weight: 500; letter-spacing: -.01em; }
.jca-row > div > span { display: block; margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 10); color: var(--jca-mute); }
.jca-qa { position: relative; margin: 0 calc(var(--u) * 40); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 8); }
.jca-qa .jca-card { position: relative; overflow: hidden; height: calc(var(--u) * 51); padding: calc(var(--u) * 9) calc(var(--u) * 10); border-radius: calc(var(--u) * 14); display: flex; flex-direction: column; justify-content: space-between; }
.jca-qa b { font-size: calc(var(--u) * 11); font-weight: 600; }
.jca-qa__i { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: #5b4bd6; }
.jca-qa__ghost { position: absolute; right: calc(var(--u) * -4); bottom: calc(var(--u) * -8); width: calc(var(--u) * 34); height: calc(var(--u) * 34); color: #5b4bd6; opacity: .09; }
.jca-rot { transform: rotate(40deg); }
.jca-qa__next { position: absolute; right: calc(var(--u) * -24); top: 50%; width: calc(var(--u) * 11); height: calc(var(--u) * 11); margin-top: calc(var(--u) * -5.5); color: #6e6e73; }

/* pushed screens: nav bar */
.jca-nav { position: relative; height: calc(var(--u) * 46); margin-top: calc(var(--u) * -2); display: flex; align-items: center; justify-content: center; }
.jca-nav b { font-size: calc(var(--u) * 14); font-weight: 600; }
.jca-back { position: absolute; left: calc(var(--u) * 19); top: 50%; width: calc(var(--u) * 39); height: calc(var(--u) * 39); margin-top: calc(var(--u) * -19.5); border-radius: 50%; display: grid; place-items: center; background: #fbfaf7; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 12) rgba(0, 0, 0, .08); }
.jca-back svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }

/* torah */
.jca-stack { margin: calc(var(--u) * 22) calc(var(--u) * 19) 0; display: grid; gap: calc(var(--u) * 10); }
.jca-link { display: flex; align-items: center; gap: calc(var(--u) * 13); padding: calc(var(--u) * 11) calc(var(--u) * 14) calc(var(--u) * 11) calc(var(--u) * 13); border-radius: calc(var(--u) * 16); }
.jca-link .jca-ic { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
.jca-link > div { flex: 1; min-width: 0; }
.jca-link small { display: block; font-size: calc(var(--u) * 10); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--jca-mute); }
.jca-link b { display: block; margin-top: calc(var(--u) * 2); font: 600 calc(var(--u) * 16)/1.2 var(--jca-serif); }
.jca-prog { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 7); }
.jca-prog i { position: relative; width: calc(var(--u) * 146); height: calc(var(--u) * 3); border-radius: calc(var(--u) * 2); background: #e1e0dc; overflow: hidden; }
.jca-prog i::before { content: ""; position: absolute; inset: 0 72% 0 0; border-radius: calc(var(--u) * 2); background: #5c72a8; }
.jca-prog span { font-size: calc(var(--u) * 9.5); color: var(--jca-mute); }
.jca-sec--wide { margin: calc(var(--u) * 44) calc(var(--u) * 22) 0; }
.jca-carousel { position: relative; margin-top: calc(var(--u) * 30); display: flex; justify-content: center; }
.jca-arrow { position: absolute; top: 50%; width: calc(var(--u) * 32); height: calc(var(--u) * 32); margin-top: calc(var(--u) * -16); border-radius: 50%; display: grid; place-items: center; color: var(--jca-navy); background: var(--jca-card); border: calc(var(--u) * 1) solid var(--jca-edge); }
.jca-arrow svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.jca-arrow--prev { left: calc(var(--u) * 17); opacity: .35; }
.jca-arrow--next { right: calc(var(--u) * 17); }
.jca-note { margin-top: calc(var(--u) * 20) !important; text-align: center; font-size: calc(var(--u) * 12); color: var(--jca-mute); }
.jca-dots { display: flex; justify-content: center; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 34); }
.jca-dots i { width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: #cfd3de; }
.jca-dots i:first-child { width: calc(var(--u) * 16); background: #4d63a0; }

/* books */
.jca-book { position: relative; width: calc(var(--u) * 152); height: calc(var(--u) * 214); --gold: #d8b77a; }
.jca-book__pages { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * -7); top: calc(var(--u) * 5); bottom: calc(var(--u) * -8); border-radius: calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 3); background: #f1e8d6; box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 var(--back); }
.jca-book__cover { position: absolute; inset: 0; border-radius: calc(var(--u) * 4) calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 4); background: linear-gradient(90deg, var(--spine) 0 calc(var(--u) * 19), rgba(0, 0, 0, .25) calc(var(--u) * 19) calc(var(--u) * 20), var(--c1) calc(var(--u) * 20), var(--c2)); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0, 0, 0, .12); }
.jca-book__cover::before, .jca-book__cover::after { content: ""; position: absolute; left: calc(var(--u) * 5); width: calc(var(--u) * 9); height: calc(var(--u) * 3); border-top: calc(var(--u) * 1) solid var(--gold); border-bottom: calc(var(--u) * 1) solid var(--gold); opacity: .55; }
.jca-book__cover::before { top: calc(var(--u) * 16); } .jca-book__cover::after { bottom: calc(var(--u) * 16); }
.jca-book__frame { position: absolute; left: calc(var(--u) * 28); right: calc(var(--u) * 9); top: calc(var(--u) * 9); bottom: calc(var(--u) * 9); border: calc(var(--u) * 1) solid var(--gold); outline: calc(var(--u) * 1) solid var(--gold); outline-offset: calc(var(--u) * -5); border-radius: calc(var(--u) * 2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 7); color: var(--gold); text-align: center; }
.jca-book__frame b { font: 600 calc(var(--u) * 15)/1 var(--jca-serif); }
.jca-book__frame small { font-size: calc(var(--u) * 8.5); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.jca-book__he { font: 500 calc(var(--u) * 16)/1 var(--f-hebrew); letter-spacing: .15em; margin-bottom: calc(var(--u) * 8); }
.jca-book__menorah { width: calc(var(--u) * 64); height: calc(var(--u) * 54); margin-bottom: calc(var(--u) * 10); }
.jca-book--torah { --c1: #74523a; --c2: #5c3e29; --spine: #4b3121; --back: #3a2618; }

/* shabbat */
.jca-nav--bare { justify-content: flex-start; }
.jca-city { margin-top: calc(var(--u) * 36); text-align: center; }
.jca-city b { display: block; font: 700 calc(var(--u) * 29)/1.1 var(--jca-serif); color: var(--jca-navy); }
.jca-city small { display: block; margin-top: calc(var(--u) * 7); font-size: calc(var(--u) * 12); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--jca-mute); }
.jca-times { margin: calc(var(--u) * 30) calc(var(--u) * 23) 0; padding: 0 calc(var(--u) * 18); }
.jca-time { display: flex; align-items: center; gap: calc(var(--u) * 13); padding: calc(var(--u) * 14) 0; }
.jca-time + .jca-time { border-top: calc(var(--u) * 1) solid var(--jca-edge); }
.jca-time .jca-ic { width: calc(var(--u) * 39); height: calc(var(--u) * 39); }
.jca-time small { display: block; font-size: calc(var(--u) * 11.5); color: var(--jca-mute); }
.jca-time > div > span { display: block; margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 12.5); }
.jca-time strong { margin-left: auto; font-size: calc(var(--u) * 18.5); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jca-time strong small { display: inline; margin-left: calc(var(--u) * 1.5); font-size: 1em; color: inherit; }
.jca-count { margin: calc(var(--u) * 28) calc(var(--u) * 23) 0; padding: calc(var(--u) * 17) 0 calc(var(--u) * 18); text-align: center; }
.jca-count small { display: block; font-size: calc(var(--u) * 11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8397c4; }
.jca-count b { display: block; margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 33); font-weight: 700; letter-spacing: -.01em; color: var(--jca-navy); font-variant-numeric: tabular-nums; }
.jca-bless { margin: calc(var(--u) * 16) calc(var(--u) * 23) 0; padding: calc(var(--u) * 17) calc(var(--u) * 18) 0; }
.jca-bless__h { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 11.5); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--jca-mute); }
.jca-bless__h .jca-ic { width: calc(var(--u) * 25); height: calc(var(--u) * 25); }
.jca-bless em { display: block; margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 12); color: var(--jca-mute); }
.jca-bless__t { margin-top: calc(var(--u) * 6) !important; font: 400 calc(var(--u) * 16.5)/1.5 var(--jca-serif); }
.jca-bless__f { margin-top: calc(var(--u) * 12) !important; padding: calc(var(--u) * 13) 0 calc(var(--u) * 16); border-top: calc(var(--u) * 1) solid var(--jca-edge); display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--u) * 13); font-weight: 600; color: var(--jca-navy); }
.jca-bless__f svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.jca-pill { position: absolute; left: 50%; bottom: calc(var(--u) * 16); width: calc(var(--u) * 170); height: calc(var(--u) * 54); margin-left: calc(var(--u) * -85); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 27); display: grid; grid-template-columns: 1fr 1fr; background: rgba(251, 250, 247, .92); box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 18) rgba(0, 0, 0, .12); }
.jca-pill span { display: grid; justify-items: center; align-content: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 9.5); font-weight: 600; }
.jca-pill span:first-child { border-radius: calc(var(--u) * 23); background: #dfddd8; color: #a3a3a6; }
.jca-pill svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }

@media (pointer: coarse) {
  html { -webkit-tap-highlight-color: transparent; }
  /* bigger tap areas without moving anything visually */
  .logo, .foot__col a, .to-top { padding-block: 10px; margin-block: -10px; }}

@media (max-width: 620px) {
  /* about: process cards without a tall empty middle */
  .step { min-height: min(56svh, 460px); }}

@media (max-width: 900px) and (pointer: coarse) {
  /* home, app showcase: size the phone to the space left between the title and the captions,
     so it never covers them (Safari's toolbars make the visible screen much shorter) */
  .phone { --w: min(250px, 56vw, calc((100svh - 330px) * .464)); margin-top: 76px; }}

/* ---------- the mascot: shared head (ELIS.monkeyHead in core.js) ---------- */
.mk-head { transform-box: fill-box; transform-origin: 50% 60%; transition: transform .5s var(--ease-spring); }
.mk-eyes { transform-box: fill-box; transform-origin: center; animation: mk-blink 4.2s infinite; transition: translate .3s var(--ease-out), opacity .2s; }
.mk-hearts, .mk-grin { opacity: 0; transition: opacity .25s; }
.mk-tip { animation: blink 1s steps(1) infinite; }
/* typing: paws tap away behind the laptop, the screen lights the face */
.coder[data-mood="type"] .cd-arm--l { animation: cd-tap-l .2s ease-in-out infinite alternate; }
.coder[data-mood="type"] .cd-arm--r { animation: cd-tap-r .2s ease-in-out -.1s infinite alternate; }
.coder[data-mood="type"] .cd-lit:not(.cd-lit--run) { opacity: .2; animation: cd-flicker .45s steps(2) infinite; }
.coder[data-mood="type"] .cd-tilt { animation: cd-nod .4s ease-in-out infinite alternate; }
/* thinking before an edit: scratches its head */
.coder[data-mood="think"] .cd-arm--r { transform: rotate(-168deg); animation: cd-scratch .3s ease-in-out .5s infinite alternate; }
.coder[data-mood="think"] .cd-tilt { transform: rotate(-9deg); }
.coder[data-mood="think"] .cd-q { opacity: 1; transform: none; }
/* Run: both paws slam the keyboard and the screen flashes green */
.coder[data-mood="run"] .cd-arm--l { animation: cd-slam-l .6s var(--ease-io) both; }
.coder[data-mood="run"] .cd-arm--r { animation: cd-slam-r .6s var(--ease-io) both; }
.coder[data-mood="run"] .cd-laptop { animation: cd-jolt .6s var(--ease-io); }
.coder[data-mood="run"] .cd-run { opacity: 1; transform: none; transition-delay: .3s; }
.coder[data-mood="run"] .cd-lit--run { opacity: .22; transition-delay: .3s; }
/* it works: arms up, a hop and sparkles */
.coder[data-mood="cheer"] .cd-arm--l { transform: rotate(150deg); }
.coder[data-mood="cheer"] .cd-arm--r { transform: rotate(-150deg); }
.coder[data-mood="cheer"] .cd-tilt { animation: cd-hop .45s ease-in-out 2 alternate; }
.coder[data-mood="cheer"] .cd-yay { opacity: 1; transform: none; }
.coder[data-mood="cheer"] .mk-grin { opacity: 1; } .coder[data-mood="cheer"] .mk-mouth { opacity: 0; }
/* coffee break */
.coder[data-mood="rest"] .cd-arm--l { transform: rotate(-112deg); }
.coder[data-mood="rest"] .cd-mug { opacity: 1; transform: rotate(112deg); }
.coder[data-mood="rest"] .cd-tilt { transform: rotate(-6deg); }
.coder[data-mood="rest"] .mk-eyes { opacity: .5; }

/* ==========================================================================
   about: the rest of the jungle. Full-width chapters, each with its own backdrop (drawn by about.js), and a
   different wipe at each join. A wipe is a 200vh band centred on the join with a 100vh layer that sticks to the
   screen while the join crosses it; a soft strip of the wipe's colour also rides on the join itself, so the
   hard edge between two backdrops is never seen
   ========================================================================== */
.next { --iris-soft: #cfe98a; --iris: #8fd14f; }
.ch { position: relative; } /* every waterfall: one layer of falling water (a second one doubled the work) */
/* the sunrise clearing, and the rocket on its log pad */
.next { position: relative; padding: 0; }
.next .h-display { color: #fff; }
.next .mono { color: #f2d9b0; }
.next a:hover .h-display { color: #ffc46b; }

/* anything looping in a section more than a screen away is paused (core.js marks such sections .is-off) */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }
.is-paused, .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

/* glows: a soft gradient drawn once behind each craft, in place of a drop-shadow filter (which was redrawn every frame
   as the flame inside flickered) */
.rocket { isolation: isolate; }
.rocket::before { content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; top: 0; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, var(--glow, rgba(143, 125, 255, .4)), rgba(143, 125, 255, 0)); pointer-events: none; }
.rocket { --glow: rgba(255, 120, 90, .32); }

/* ---------- devices: a phone and a browser window, each holding a live, scalable screen ---------- */
.device { position: relative; display: block; }
.device__view { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0d0b1a; container-type: inline-size; }

/* ---------- concepts ---------- */
/* A concept site running live in the window: laid out at full width in the iframe, scaled down by portfolio.js */
.world { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: center; min-height: 100svh; padding: clamp(96px, 14vh, 170px) var(--gutter) clamp(80px, 12vh, 150px); }
.world .btn { --btn-fill: var(--acc); }
.pv picture, .pv img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv img { object-fit: cover; object-position: top center; }
.lp .jca-page.is-under { transform: translateX(-28%); filter: brightness(.95); }
.lp .jca-row[data-go]:active { transform: scale(.97); }
.ghp__page { position: absolute; inset: 0; display: block; padding: calc(var(--u) * 66) calc(var(--u) * 18) calc(var(--u) * 92); overflow-y: auto; scrollbar-width: none; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .35s, transform .5s var(--ease-out); }
.ghp__page::-webkit-scrollbar { display: none; }
.ghp__page.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ghp__tile:hover i, .ghp__tile.is-pop i { transform: translateY(calc(var(--u) * -4)) scale(1.1) rotate(-5deg); }

@media (max-width: 860px) {
  .world { padding: 32px 20px 36px; }}

.jca-bless.is-open .jca-bless__f svg { transform: rotate(90deg); }
/* clipped: nothing in it is pinned */
.rf { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #0b0a20 0%, #171236 26%, #351a52 48%, #7a2a5e 66%, #c8486a 79%, #f08a5d 90%, #ffc27a 100%); }
.rf > * { position: absolute; }
.rf::after { content: ""; position: absolute; inset: 0 0 auto; height: 55%; background: linear-gradient(180deg, rgba(7, 8, 12, .55), rgba(7, 8, 12, 0)); }
@media (max-width: 860px) {
  .rf { background: linear-gradient(180deg, #0b0a20 0%, #171236 38%, #351a52 60%, #7a2a5e 76%, #c8486a 86%, #f08a5d 94%, #ffc27a 100%); }}

@media (prefers-reduced-motion: reduce) {
 .rf * { animation: none !important; }}

@keyframes blink { 50% { opacity: 0; } }
@keyframes rk-flicker { to { transform: scale(.86, 1.14); } }
@keyframes rk-hover { to { translate: 0 -8px; } }
@keyframes rk-wave { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes rk-puff { 0% { opacity: .9; transform: none; } 100% { opacity: 0; transform: translate(var(--px, 0), 60px) scale(2.6); } }
@keyframes rk-streak { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(100vh + 320px)); } }
@keyframes wheel { 0% { transform: none; opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 71% { transform: none; opacity: 0; } 100% { opacity: 1; } }
@keyframes pop { from { transform: scale(.85) translateY(30px); opacity: 0; } }
@keyframes glow { to { transform: scale(1.12); opacity: .8; } }
@keyframes wave { 40% { transform: translateY(-.2em) rotate(-6deg); } 100% { transform: none; } }
@keyframes pv-pop { from { opacity: 0; transform: scale(.5); } }
@keyframes ping-ok { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3.3); opacity: 0; } }
@keyframes bubble { from { transform: scale(.6) translateY(10px); opacity: 0; } }
@keyframes dot { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .4; } }
@keyframes mk-blink { 0%, 93%, 100% { transform: none; } 96% { transform: scaleY(.1); } }
@keyframes cd-tap-l { from { transform: translateY(-2.5px) rotate(5deg); } to { transform: translateY(1px) rotate(-3deg); } }
@keyframes cd-tap-r { from { transform: translateY(-2.5px) rotate(-5deg); } to { transform: translateY(1px) rotate(3deg); } }
@keyframes cd-flicker { 50% { opacity: .12; } }
@keyframes cd-nod { to { transform: rotate(2deg) translateY(1px); } }
@keyframes cd-scratch { from { transform: rotate(-168deg); } to { transform: rotate(-156deg); } }
@keyframes cd-slam-l { 45% { transform: rotate(115deg); } 75% { transform: rotate(-6deg) translateY(2px); } 100% { transform: none; } }
@keyframes cd-slam-r { 45% { transform: rotate(-115deg); } 75% { transform: rotate(6deg) translateY(2px); } 100% { transform: none; } }
@keyframes cd-jolt { 72% { transform: translateY(2px); } }
@keyframes cd-hop { to { transform: translateY(-4px) rotate(4deg); } }
@keyframes fk-flap { to { transform: scaleY(-.6); } }