/* Landscaping: deep forest green, a fresh sage-lime, an organic serif.
   Structure lives in /t/_base/base.css; this is only the palette, the type
   and the CSS stand-in for the garden island. */
:root {
  --bg: #0a110d; --bg-rgb: 10, 17, 13; --bg-2: #111a15;
  --ink: #eef2ea; --ink-2: #d3dccd; --muted: #97a391; --line: rgba(238, 242, 234, .12);
  --accent: #c8d97c; --accent-rgb: 200, 217, 124; --accent-hi: #e6f0b4; --on-accent: #17200a;
  --card-1: #15201a; --card-2: #0b120e; --video-dim: .5;
  --display: "Fraunces", "Playfair Display", Georgia, serif;
  --display-case: none; --display-weight: 500; --display-leading: .95; --display-tracking: -.02em;
  --title-size: clamp(3rem, 8.6vw, 8.2rem);
  --serif: "Fraunces", Georgia, serif;
}
h3 { font-size: 1.6rem; letter-spacing: -.01em; }
.steps span { font-size: 1.45rem; }

/* no WebGL: a tilted, striped lawn */
html.no-webgl .hero__fallback {
  right: 8vw; top: 34vh; width: 40vh; height: 22vh; border-radius: 50%;
  background: repeating-linear-gradient(90deg, #4c8a3a 0 18px, #5c9c45 18px 36px);
  box-shadow: 0 26px 0 -4px #5a3d28, 0 40px 60px -20px rgba(0, 0, 0, .6);
  animation: sway 7s ease-in-out infinite alternate;
}
@keyframes sway { to { transform: translateY(-12px) rotate(3deg); } }
@media (max-width: 760px) {
  html.no-webgl .hero__fallback { top: 110px; right: 50%; width: 30svh; height: 16svh; translate: 50% 0; }
}