/* Appily-OneHundredFour — Lathhouse Nursery design tokens
   Timber lath / chlorophyll / bloom / sun — not Risograph, not Mercado Bloco,
   not Kitefield crimson/sky, not Cautionfield cone, not cloisonné, not Neon Grove. */
:root {
  --a104-ink: #14261A;
  --a104-mute: #3D5445;
  --a104-primary: #0D8A5B;
  --a104-primary-deep: #0A6B47;
  --a104-secondary: #B85C38;
  --a104-secondary-deep: #93472A;
  --a104-accent: #FF6B9D;
  --a104-accent-ink: #5C1030;
  --a104-sun: #FFE066;
  --a104-sun-ink: #3A3000;
  --a104-field: #DFF5E8;
  --a104-field-warm: #FFF6E8;
  --a104-field-mist: #EAF7F0;
  --a104-surface: #FFFFFF;
  --a104-night: #0F1F16;
  --a104-timber: #5C4030;
  --a104-lath: #7A5A42;
  --a104-border: #A8C9B4;
  --a104-border-strong: #6F9A7E;
  --a104-on-primary: #FFFFFF;
  --a104-on-secondary: #FFFFFF;
  --a104-on-night: #E8FFF2;
  --a104-on-accent: #FFFFFF;
  --a104-on-sun: #14261A;
  --a104-night-mute: #A8C4B4;
  --a104-link: #0A6B47;
  --a104-ok: #0A6B47;
  --a104-err: #C4123A;

  --a104-font-display: "Sofia Sans", "Segoe UI", system-ui, sans-serif;
  --a104-font-body: "Source Serif 4", Georgia, serif;

  --a104-space-1: 4px;
  --a104-space-2: 8px;
  --a104-space-3: 12px;
  --a104-space-4: 16px;
  --a104-space-5: 24px;
  --a104-space-6: 32px;
  --a104-space-7: 48px;
  --a104-space-8: 64px;
  --a104-space-9: 96px;

  --a104-radius: 4px;
  --a104-radius-lg: 14px;
  --a104-shadow-hard: 4px 4px 0 var(--a104-ink);
  --a104-shadow-leaf: 4px 4px 0 var(--a104-primary);
  --a104-shadow-clay: 4px 4px 0 var(--a104-secondary);
  --a104-max: 1140px;
  --a104-nav-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.a104-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--a104-font-body);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--a104-ink);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(92, 64, 48, 0.045) 0 10px,
      transparent 10px 22px
    ),
    radial-gradient(ellipse 70% 40% at 0% 0%, rgba(13, 138, 91, 0.14), transparent 55%),
    radial-gradient(ellipse 50% 35% at 100% 0%, rgba(255, 107, 157, 0.10), transparent 50%),
    linear-gradient(165deg, var(--a104-field) 0%, var(--a104-field-warm) 55%, var(--a104-field-mist) 100%);
  -webkit-font-smoothing: antialiased;
}
body.a104-body img { max-width: 100%; height: auto; display: block; }
/* Only bare (unclassed) links get the default link color —
   classed CTAs/nav keep their own colors (avoids light-on-yellow / ink-on-green). */
body.a104-body a:not([class]) {
  color: var(--a104-link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
body.a104-body a:not([class]):hover {
  color: var(--a104-primary-deep);
}
body.a104-body button,
body.a104-body input,
body.a104-body select,
body.a104-body textarea { font: inherit; }

.a104-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--a104-primary);
  color: var(--a104-on-primary);
  padding: 10px 16px;
  z-index: 9999;
  font-family: var(--a104-font-display);
  font-weight: 800;
}
.a104-skip:focus { left: 12px; top: 12px; }

.a104-wrap {
  width: min(100% - 32px, var(--a104-max));
  margin-inline: auto;
}

.a104-kicker {
  font-family: var(--a104-font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a104-mute);
  margin: 0 0 var(--a104-space-2);
}

.a104-display {
  font-family: var(--a104-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

@media (max-width: 760px) {
  :root { --a104-nav-h: 72px; }
  .a104-wrap { width: min(100% - 20px, var(--a104-max)); }
}