/* ================================================================
   Living Yard — parent brand landing page
   Botanical field-guide editorial: cream paper, forest ink,
   terracotta accents. Fraunces display / Instrument Sans body.
   ================================================================ */

:root {
  --paper: #FBF7EC;
  --paper-deep: #F4EEDD;
  --ink: #1C2A1F;
  --ink-soft: #46553F;
  --ink-faint: #6F7D66;
  --forest: #1B4332;
  --forest-deep: #11291E;
  --terracotta: #B45309;
  --clay: #C17D4E;
  --sage: #5a7a3a;
  --line: #D9D2BC;
  --display: "Fraunces", Georgia, serif;
  --body: "Instrument Sans", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* paper atmosphere: faint green wash top-left, warm wash bottom-right */
  background-image:
    radial-gradient(1100px 700px at 8% -4%, rgba(90, 122, 58, 0.10), transparent 60%),
    radial-gradient(900px 650px at 104% 30%, rgba(193, 125, 78, 0.09), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

::selection { background: var(--forest); color: var(--paper); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 480;
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 50, "opsz" 100;
  color: var(--ink);
}

a { color: inherit; }

/* ---------------- header ---------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 32px 0;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 520;
  letter-spacing: 0.01em;
}

.mark {
  width: 30px;
  height: 30px;
  stroke: var(--forest);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header nav { display: flex; gap: 28px; }

.site-header nav a {
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}

.site-header nav a:hover { color: var(--terracotta); border-color: var(--terracotta); }

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(70px, 11vh, 130px) 32px clamp(80px, 12vh, 150px);
}

.hero-inner { max-width: 760px; }

.eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 26px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 38px;
  height: 1px;
  background: var(--terracotta);
  vertical-align: middle;
  margin-right: 14px;
}

.hero h1 {
  font-size: clamp(3.1rem, 8.2vw, 6.4rem);
  margin-bottom: 34px;
}

.hero h1 span { display: block; }

.hero h1 em {
  font-style: italic;
  font-weight: 420;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--forest);
}

.lede {
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 58px;
}

/* staggered load-in */
.rise { opacity: 0; transform: translateY(26px); animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.rise.d1 { animation-delay: 0.08s; }
.rise.d2 { animation-delay: 0.18s; }
.rise.d3 { animation-delay: 0.3s; }
.rise.d4 { animation-delay: 0.44s; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(24px, 4vw, 56px);
  justify-content: start;
  border-top: 1px solid var(--line);
  padding-top: 30px;
}

.stat-num, .stat-plus {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 500;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}

.stat-plus { margin-left: 1px; }

.stat-label {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-faint);
  max-width: 150px;
  line-height: 1.4;
  margin-top: 4px;
}

/* botanical illustration */
.botanical {
  position: absolute;
  right: clamp(-30px, 2vw, 60px);
  bottom: 0;
  height: min(82%, 520px);
  stroke: var(--forest);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.55;
  pointer-events: none;
}

.botanical .draw {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: sketch 2.4s ease forwards;
}

.botanical .s1 { animation-delay: 0.2s; }
.botanical .s2 { animation-delay: 0.9s; }
.botanical .s3 { animation-delay: 1.1s; }
.botanical .s4 { animation-delay: 1.3s; }
.botanical .p  { animation-delay: 1.5s; animation-duration: 1.6s; }
.botanical .cone { animation-delay: 1.7s; stroke: var(--terracotta); }
.botanical .w  { animation-delay: 2.1s; stroke: var(--terracotta); stroke-width: 1.6; }

.butterfly { animation: hover-drift 7s ease-in-out 3.5s infinite; transform-origin: 170px 170px; }

@keyframes sketch { to { stroke-dashoffset: 0; } }

@keyframes hover-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  35% { transform: translate(-7px, -12px) rotate(-4deg); }
  70% { transform: translate(5px, -5px) rotate(3deg); }
}

/* ---------------- critters ---------------- */

/* bee on a dotted flight loop (hero) */
.bee-flight {
  position: absolute;
  right: clamp(120px, 14vw, 240px);
  bottom: 280px;
  width: clamp(260px, 24vw, 360px);
  pointer-events: none;
  opacity: 0;
  animation: fade-in 1.2s ease 2.6s forwards;
}

@keyframes fade-in { to { opacity: 1; } }

.bee-trail {
  stroke: var(--clay);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1 8;
  opacity: 0.65;
}

.bee {
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  offset-path: path("M30 150 C60 70 150 40 220 80 C280 114 290 170 240 185 C196 198 170 150 205 120 C250 82 330 96 330 150 C330 196 260 226 180 215 C110 206 40 196 30 150 Z");
  offset-rotate: auto;
  animation: bee-fly 22s linear infinite;
}

.bee-body { fill: var(--paper); }
.bee-head { fill: var(--ink); stroke: none; }

.bee-wing {
  fill: rgba(193, 125, 78, 0.18);
  stroke: var(--terracotta);
  stroke-width: 1;
  transform-origin: 0px -2px;
  animation: bee-flutter 0.16s ease-in-out infinite alternate;
}

.bw2 { animation-delay: 0.08s; }

@keyframes bee-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes bee-flutter { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }

/* inchworm crawling the family section's top rule */
.inchworm {
  position: absolute;
  top: -13px;
  left: 32px;
  width: 38px;
  animation: worm-crawl 90s linear infinite;
}

.worm-seg { fill: var(--sage); }
.worm-head { fill: var(--forest); }
.worm-antenna { stroke: var(--forest); stroke-width: 1.1; stroke-linecap: round; }

.worm-seg { animation: worm-hump 1s ease-in-out infinite; }
.worm-seg:nth-of-type(2) { animation-delay: 0.1s; }
.worm-seg:nth-of-type(3) { animation-delay: 0.2s; }
.worm-seg:nth-of-type(4) { animation-delay: 0.3s; }
.worm-seg:nth-of-type(5) { animation-delay: 0.4s; }
.worm-seg:nth-of-type(6) { animation-delay: 0.5s; }

@keyframes worm-hump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes worm-crawl {
  from { left: 32px; }
  to { left: calc(100% - 76px); }
}

/* dragonfly hovering near the loop heading */
.dragonfly {
  position: absolute;
  right: clamp(40px, 14vw, 220px);
  top: 24px;
  width: 78px;
  pointer-events: none;
  animation: dfly-drift 8s ease-in-out infinite;
}

.dfly-body { stroke: var(--forest); stroke-width: 2; stroke-linecap: round; }
.dfly-head { fill: var(--forest); }

.dfly-wing {
  fill: rgba(27, 67, 50, 0.08);
  stroke: var(--forest);
  stroke-width: 1.1;
  transform-origin: 36px 34px;
  transform-box: view-box;
  animation: dfly-flutter 0.14s ease-in-out infinite alternate;
}

.dw2, .dw4 { animation-delay: 0.07s; }

@keyframes dfly-flutter { from { opacity: 0.9; } to { opacity: 0.35; } }

@keyframes dfly-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(-14px, -9px) rotate(-3deg); }
  60% { transform: translate(10px, 6px) rotate(2deg); }
  80% { transform: translate(-4px, -3px) rotate(-1deg); }
}

/* ladybug walking the footer rule */
.ladybug {
  position: absolute;
  top: -8px;
  width: 19px;
  animation: ladybug-walk 75s linear infinite, ladybug-wobble 0.5s ease-in-out infinite alternate;
}

.lb-shell { fill: var(--terracotta); stroke: var(--ink); stroke-width: 0.9; }
.lb-head { fill: var(--ink); }
.lb-antenna { stroke: var(--ink); stroke-width: 0.9; stroke-linecap: round; }
.lb-split { stroke: var(--ink); stroke-width: 0.9; }
.lb-spot { fill: var(--ink); }

@keyframes ladybug-walk {
  from { left: calc(100% - 60px); }
  to { left: 40px; }
}

@keyframes ladybug-wobble {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

/* ---------------- shared section bits ---------------- */

section { scroll-margin-top: 40px; }

.section-head { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 32px 56px; }

.section-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 18px;
}

.section-head h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }

.section-sub {
  margin-top: 18px;
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 480px;
}

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------------- family cards ---------------- */

.family { padding: clamp(60px, 9vh, 110px) 0 0; }

.cards {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  border-top: 1px solid var(--line);
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr 150px;
  gap: 36px;
  align-items: start;
  padding: 52px 24px;
  border-bottom: 1px solid var(--line);
  transition: background 0.35s;
}

.card:hover { background: rgba(27, 67, 50, 0.04); }

.card-index { display: flex; align-items: center; gap: 14px; padding-top: 8px; }

.card-index .num {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--terracotta);
  font-variation-settings: "SOFT" 100;
}

.card-index .dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}

.card-kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.card h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 16px; }

.card h3 a {
  text-decoration: none;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 96%;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
}

.card:hover h3 a { background-size: 100% 2px; color: var(--brand); }

.card-desc { color: var(--ink-soft); max-width: 640px; }

.card-cta {
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 22px;
  white-space: nowrap;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}

.card-cta .arrow { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

.card-cta:hover { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.card-cta:hover .arrow { transform: translateX(4px); }

/* ---------------- the loop ---------------- */

.loop { padding: clamp(90px, 13vh, 160px) 0 clamp(70px, 10vh, 120px); }

.loop-steps {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  list-style: none;
  counter-reset: step;
}

/* dashed connector behind the step circles */
.loop-steps::before {
  content: "";
  position: absolute;
  top: 25px;
  left: calc(32px + 5%);
  right: calc(32px + 5%);
  border-top: 2px dashed color-mix(in srgb, var(--forest) 36%, transparent);
}

.step { position: relative; }

.step-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.6px solid var(--forest);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--forest);
  margin-bottom: 22px;
  transition: background 0.35s, color 0.35s, transform 0.35s;
}

.step:hover .step-num { background: var(--forest); color: var(--paper); transform: scale(1.08); }

.step:last-child .step-num { border-color: var(--terracotta); color: var(--terracotta); }
.step:last-child:hover .step-num { background: var(--terracotta); color: var(--paper); }

.step h4 { font-size: 1.45rem; margin-bottom: 10px; }

.step p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }

.step strong { font-weight: 600; color: var(--ink); }

/* stagger the loop steps as they reveal */
.step.reveal { transition-delay: 0s; }
.step.reveal:nth-child(2) { transition-delay: 0.1s; }
.step.reveal:nth-child(3) { transition-delay: 0.2s; }
.step.reveal:nth-child(4) { transition-delay: 0.3s; }
.step.reveal:nth-child(5) { transition-delay: 0.4s; }

/* ---------------- footer ---------------- */

.site-footer { position: relative; border-top: 1px solid var(--line); background: var(--paper-deep); }

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 520;
}

.footer-brand .mark { width: 24px; height: 24px; }

.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }

.footer-links a {
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.25s;
}

.footer-links a:hover { color: var(--terracotta); }

.footer-copy { font-size: 0.84rem; color: var(--ink-faint); }

/* ---------------- responsive ---------------- */

@media (max-width: 1020px) {
  .botanical { display: none; }
  .bee-flight { display: none; }
  .stats { grid-template-columns: repeat(2, auto); }
  .loop-steps { grid-template-columns: 1fr; gap: 0; }
  .loop-steps::before {
    top: 25px;
    bottom: 60px;
    left: 56px;
    right: auto;
    border-top: none;
    border-left: 2px dashed color-mix(in srgb, var(--forest) 36%, transparent);
  }
  .step { display: grid; grid-template-columns: 50px 1fr; gap: 24px; padding-bottom: 44px; }
  .step h4 { grid-column: 2; margin-top: 10px; }
  .step p { grid-column: 2; }
  .step .step-num { margin-bottom: 0; }
  .step h4 { margin-top: 12px; margin-bottom: 8px; }
}

@media (max-width: 760px) {
  .site-header { padding: 22px 22px 0; }
  .site-header nav { display: none; }
  .hero, .section-head, .cards, .loop-steps, .footer-inner { padding-left: 22px; padding-right: 22px; }
  .card { grid-template-columns: 1fr; gap: 18px; padding: 40px 4px; }
  .card-cta { justify-self: start; }
  .loop-steps::before { left: 46px; }
  .dragonfly { display: none; }
  .inchworm { left: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .reveal { animation: none; transition: none; opacity: 1; transform: none; }
  .botanical .draw { animation: none; stroke-dashoffset: 0; }
  .butterfly { animation: none; }
  .bee-flight { animation: none; opacity: 1; }
  .bee, .bee-wing, .worm-seg, .inchworm, .dragonfly, .dfly-wing, .ladybug { animation: none; }
  html { scroll-behavior: auto; }
}