/* Stillgrow site: the app's own palette and type. Paper and sky, ink and moss,
   a serif italic for voice, a quiet sans for reading, a mono for time. */
:root{
  --sky-top:#D6E2E4; --sky-bottom:#EEEDE6; --paper:#F3F2ED; --card:#F8F7F3;
  --ink:#17201C; --muted:#5F6B65; --line:rgba(23,32,28,.14);
  --moss:#2E5B3B; --moss-soft:rgba(46,91,59,.10); --warn:#A8412A;
  --soil:#35291F; --soil-hi:#5B4838; --grass:#6E9A50;
  --ghost:rgba(23,32,28,.06); --shadow:rgba(23,32,28,.10);
  --f-display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --f-ui:"Manrope",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-num:"Azeret Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:1120px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sky-top:#0B1215; --sky-bottom:#151E1B; --paper:#101714; --card:#141C19;
    --ink:#E4EAE5; --muted:#8C9892; --line:rgba(228,234,229,.14);
    --moss:#9CCB9F; --moss-soft:rgba(156,203,159,.12); --warn:#E3876F;
    --soil:#241B15; --soil-hi:#3E3127; --grass:#4F7A45;
    --ghost:rgba(228,234,229,.07); --shadow:rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --sky-top:#0B1215; --sky-bottom:#151E1B; --paper:#101714; --card:#141C19;
  --ink:#E4EAE5; --muted:#8C9892; --line:rgba(228,234,229,.14);
  --moss:#9CCB9F; --moss-soft:rgba(156,203,159,.12); --warn:#E3876F;
  --soil:#241B15; --soil-hi:#3E3127; --grass:#4F7A45;
  --ghost:rgba(228,234,229,.07); --shadow:rgba(0,0,0,.35);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--f-ui);
  -webkit-font-smoothing:antialiased}
img,canvas{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

/* one language at a time: <html lang="fr|en"> */
html[lang="fr"] [data-l="en"], html[lang="en"] [data-l="fr"]{display:none!important}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}

/* nav */
.nav{position:sticky;top:0;z-index:10;backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);
  background:color-mix(in srgb,var(--paper) 78%,transparent);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 26px/1 var(--f-display);white-space:nowrap}
.brand img{width:30px;height:30px;border-radius:8px}
.brand i{color:var(--moss)}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;font-size:14px;color:var(--muted)}
.nav ul a{text-decoration:none}
.nav ul a:hover{color:var(--ink)}
/* the sister app, beside the brand: greyed until hovered */
.sister{display:flex;align-items:center;gap:8px;padding-left:16px;border-left:1px solid var(--line);
  text-decoration:none;font:500 14px/1 var(--f-ui);color:var(--muted);opacity:.65;transition:opacity .2s,color .2s;white-space:nowrap}
.sister img{width:22px;height:22px;border-radius:6px;filter:grayscale(1);transition:filter .2s}
.sister:hover{opacity:1;color:var(--ink)}
.sister:hover img{filter:none}
.lang{border:1px solid var(--line);background:none;color:var(--ink);border-radius:999px;padding:6px 12px;
  font:600 12px/1 var(--f-ui);letter-spacing:.08em;cursor:pointer}
@media (max-width:760px){.nav ul{display:none}.lang{margin-left:auto}}

/* type */
.eyebrow{font:600 11px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,7vw,84px);letter-spacing:-.01em}
h1 em,h2 em{color:var(--moss)}
h2{font-size:clamp(34px,4.6vw,54px)}
h3{font-size:28px}
.lede{font-size:19px;color:var(--muted);max-width:34em}
p{margin:0}
.mono{font-family:var(--f-num)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:13px 22px;font:600 15px/1 var(--f-ui);
  text-decoration:none;border:1px solid var(--ink);cursor:pointer;background:none;color:var(--ink)}
.btn.fill{background:var(--ink);color:var(--paper)}
.btn.soon{border-style:dashed;color:var(--muted);border-color:var(--line);cursor:default}
.btn:hover:not(.soon){transform:translateY(-1px)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* sections */
section{padding-block:96px}
.sky{background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom) 70%,var(--paper))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split>*{min-width:0}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px}section{padding-block:64px}}
.stack{display:flex;flex-direction:column;gap:18px}

.foot{border-top:1px solid var(--line);padding-block:40px;color:var(--muted);font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .sp{margin-left:auto}