/* THEME:START */
:root{
  --bg:#ffffff;
  --fg:#111111;
  --mut:#6a6a6a;
  --pink:#ff2e74;
  --orange:#ff6a1a;
  --font-family:"Newsreader",Georgia,serif;
}
/* THEME:END */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}
::selection{background:var(--pink);color:#fff}
a{color:inherit}

/* the colored separator line, faded in on scroll by script.js */
.rule{height:3px;width:100%;transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.rule.in{transform:scaleX(1)}

.reveal{opacity:0;transform:translateY(16px);transition:.7s ease}
.reveal.in{opacity:1;transform:none}

/* wordmark: the source PNG/WebP is used purely as an alpha mask so the logo always
   matches --fg, whatever colors are picked in the editor (a fixed filter:invert()
   broke as soon as someone chose a dark theme).
   Width/aspect-ratio are set here in plain CSS (not via Tailwind's w-[...]/aspect-[...]
   utilities) because those are compiled client-side by the Tailwind CDN script — if
   that script is blocked or slow (ad blockers, flaky networks), an element with no
   intrinsic size and no content collapses to 0x0 and the whole logo disappears. */
.logo-mark{
  display:block;
  width:clamp(180px,42vw,340px);
  aspect-ratio:1259/234;
  background-color:var(--fg);
  -webkit-mask:url('/img/logo.webp') no-repeat left center / contain;
  mask:url('/img/logo.webp') no-repeat left center / contain;
}