:root {
  --carbon: #171a17;
  --mineral-teal: #416b69;
  --logo-green: #00a800;
  --ash-grey: #929a92;
  --natural-bone: #f3f1e8;
  --ink: var(--carbon);
  --paper: var(--natural-bone);
  --moss: var(--mineral-teal);
  --clay: var(--logo-green);
  --line: rgba(146, 154, 146, .42);
}

body { background: var(--natural-bone); color: var(--carbon); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
}

.header-canada-flag {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: clamp(1.15rem, 1.6vw, 1.45rem);
  aspect-ratio: 2 / 1;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .28));
}

.brand-logo-frame {
  position: relative;
  display: block;
  width: clamp(11.25rem, 17vw, 14.5rem);
  aspect-ratio: 4.04 / 1;
  overflow: hidden;
}

.brand-logo-frame img {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .34));
}

.footer-logo {
  display: block;
  width: min(21rem, 70vw);
  height: auto;
  margin: 0 0 2rem;
}

.button {
  background: var(--logo-green);
  color: #fff;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.nav-links .nav-cta,
.hero .button {
  background: var(--logo-green);
  color: #fff;
  font-size: 1.2rem;
}

.button:hover,
.nav-links .nav-cta:hover {
  background: var(--logo-green);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.nav-links a:not(.nav-cta):hover,
.footer-links a:hover,
.post a:hover { color: var(--logo-green); }

.kicker { color: var(--mineral-teal); }

.biochar-explainer,
.uses,
.blog-preview { background: var(--natural-bone); }

.biochar-explainer .biochar-title { color: var(--mineral-teal); }

.biochar-feature {
  background: #faf9f4;
  box-shadow: 0 1rem 3rem rgba(23, 26, 23, .08);
}

.biochar-feature-number {
  padding-left: .7rem;
  border-left: 3px solid var(--logo-green);
  color: var(--carbon);
}

.biochar-feature figure { background: var(--ash-grey); }

.impact {
  background-color: var(--carbon);
  background-image: linear-gradient(90deg, rgba(23, 26, 23, .97) 0%, rgba(25, 48, 47, .88) 48%, rgba(23, 26, 23, .52) 100%), url('images/nasa-blue-marble.webp');
}

.impact .metric { border-color: rgba(243, 241, 232, .28); }
.impact-grid { align-items: start; }
.impact .metric strong { color: #56df56; }
.impact .quote-source { color: #d2d8d2; }

.uses-head .button {
  background: var(--logo-green) !important;
  color: #fff !important;
}

.uses-head { align-items: flex-start; }

.uses-head .button:hover {
  background: var(--logo-green) !important;
  color: #fff !important;
}

.application-card > span {
  align-self: flex-start;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

.carousel-controls button {
  border-color: var(--logo-green);
  background: var(--logo-green);
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.carousel-controls button:hover {
  border-color: var(--logo-green);
  background: var(--logo-green);
  color: #fff;
}

.carousel-controls .controls-right button {
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0;
  transition: transform .2s ease;
}

.carousel-controls .controls-right button:hover {
  border: 0;
  background: transparent;
  transform: scale(1.06);
}

.carousel-controls .controls-right button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: circle(47.6% at 50% 50%);
  pointer-events: none;
}

.carousel-controls .controls-right button[data-previous] img {
  transform: rotate(180deg);
}

.carousel-count { color: #697069; }

.calculator {
  background: var(--mineral-teal);
  color: var(--natural-bone);
}

.calculator .kicker { color: var(--natural-bone); }

.calculator-shell {
  border-color: rgba(243, 241, 232, .24);
  background: var(--natural-bone);
  color: var(--carbon);
  box-shadow: 0 1.25rem 4rem rgba(23, 26, 23, .24);
}

.calculator-dialog { background: rgba(23, 26, 23, .84); }
.calculator-dialog-panel,
.calculator-dialog-header { background: var(--natural-bone); }
.calculator-close { color: #fff; background: var(--logo-green); }
.calculator-close:hover { color: #fff; background: var(--logo-green); }

.button:focus-visible,
.nav-links .nav-cta:focus-visible,
.carousel-controls button:focus-visible,
.calculator-close:focus-visible {
  outline: 3px solid rgba(0, 168, 0, .38);
  outline-offset: 3px;
}

.post { border-color: var(--ash-grey); }
.post time { color: #666d67; }

.site-footer { background: var(--carbon); color: var(--natural-bone); }
.site-footer .footer-links { color: #d2d8d2; }
.site-footer .legal { color: var(--ash-grey); border-color: rgba(146, 154, 146, .36); }

.page-hero { background: var(--carbon); }
.application-row,
.posts article { border-color: var(--ash-grey); }

.has-scroll-reveal .reveal-on-scroll {
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}

.has-scroll-reveal .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .brand-logo-frame { width: 10.75rem; }
  .header-canada-flag { height: 1.1rem; }
  .site-header { padding-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .has-scroll-reveal .reveal-on-scroll,
  .has-scroll-reveal .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}