/* Base for the "td" pages (blog, article, trees, mission, contact).
   The compiled utilities live in td-pages.css (built from tools/tailwind).
   Tailwind's preflight is NOT loaded (it would restyle the site header/footer),
   so this file scopes the few resets those utilities rely on to .td-scope. */

.td-scope {
  --td-gray-200: #e5e7eb;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  color: #111827;
  background: #fafbf9;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Resets are wrapped in :where() (specificity 0) so utility classes always win. */
:where(.td-scope) *, :where(.td-scope) *::before, :where(.td-scope) *::after { box-sizing: border-box; border-color: var(--td-gray-200); }
:where(.td-scope) img, :where(.td-scope) video, :where(.td-scope) svg { max-width: 100%; }
:where(.td-scope) img { display: block; height: auto; }
:where(.td-scope) :is(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
:where(.td-scope) :is(h1, h2, h3, h4) { font-size: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; color: inherit; }
:where(.td-scope) :is(ul, ol) { padding: 0; list-style: none; }
:where(.td-scope) a { color: inherit; text-decoration: none; }
:where(.td-scope) section { padding: 0; background: none; color: inherit; overflow: visible; }
:where(.td-scope) :is(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.td-scope) button { background: transparent; border: 0; padding: 0; cursor: pointer; }
:where(.td-scope) :is(input, select, textarea) { margin: 0; }
.td-scope [hidden] { display: none !important; }
.td-scope .font-serif, .td-scope .font-display { font-family: "Playfair Display", Georgia, serif; }
.td-scope .scrollbar-none { scrollbar-width: none; }
.td-scope .scrollbar-none::-webkit-scrollbar { display: none; }
.td-scope details > summary { list-style: none; }
.td-scope details > summary::-webkit-details-marker { display: none; }

/* Page fade-in / toast (the original used framer-motion / an undefined animation) */
@keyframes td-slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.td-toast { position: fixed; top: 5rem; inset-inline-end: 1.5rem; z-index: 2000; display: flex; align-items: center; gap: .625rem; padding: .75rem 1.25rem; border-radius: 1rem; border: 1px solid rgba(16,185,129,.3); background: #193a2b; color: #fff; font-size: .8125rem; font-weight: 600; box-shadow: 0 20px 40px rgba(0,0,0,.2); animation: td-slide-down .25s ease-out; }
.td-toast[hidden] { display: none; }
@media (max-width: 575px) { .td-toast { inset-inline: 1rem; top: 4.5rem; } }
@media (prefers-reduced-motion: reduce) { .td-toast { animation: none; } }

/* Article text size switcher (A / A+ / A++) */
.td-scope[data-fs="large"] .td-p { font-size: 19px; line-height: 2rem; }
.td-scope[data-fs="xlarge"] .td-p { font-size: 21px; line-height: 2.2rem; }