*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight);color:var(--text-heading);letter-spacing:var(--display-tracking);line-height:var(--display-leading);margin:0 0 var(--space-4)}
h1{font-size:var(--text-4xl)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-md)}
p{margin:0 0 var(--space-4);max-width:var(--measure)}
a{color:var(--eli-fern-500);text-decoration-color:var(--eli-fern-200);text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-calm),text-decoration-color var(--dur-fast) var(--ease-calm)}
a:hover{color:var(--eli-fern-600);text-decoration-color:var(--eli-fern-400)}
a:focus-visible{outline:none;border-radius:var(--radius-xs);box-shadow:var(--ring-focus)}
small{font-size:var(--text-sm)}
::selection{background:var(--eli-clay-200);color:var(--eli-jungle-600)}
.eli-eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.eli-lede{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body);max-width:var(--measure)}
.eli-quiet{color:var(--text-muted)}
/* Breath, not animation. A resting human breath is roughly 4s in, 6s out; the
   cycle below is 7s with a 4% swell, slow enough to read as respiration rather
   than as a loading indicator. Eased so it never snaps at either end. */
/* A hand-drawn brand icon that follows the theme.

   The PNGs in assets/icons/ are flat colour, so an <img> cannot change with the
   theme — in dark mode a paperwhite one glares. This paints the icon's alpha
   with a colour instead, so it tracks --icon-brand (jungle on paper, fern at
   night) or any colour you set. Use the white mask file, not a toned one. */
.eli-brand-icon{display:inline-block;flex:0 0 auto;vertical-align:middle;background:var(--icon-brand);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}

@keyframes eli-breathe{0%,100%{transform:scale(.97);opacity:.62}50%{transform:scale(1.01);opacity:.9}}
.eli-breathe{animation:eli-breathe 7s var(--ease-in-out) infinite}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}
/* Reduced motion keeps the mark still and legible rather than mid-breath. */
.eli-breathe{animation:none;transform:none;opacity:.8}}