/* Palette: warm cream, ink, raw-honey deep. Fonts: Shantell Sans marker + Inter body. */
:root{
  --milk: 39 64% 96%;
  --ink: 22 20% 8%;
  --honey: 33 70% 48%;
  --honey-deep: 28 51% 36%;
  --pollen: 38 57% 84%;
  --muted-fg: 28 15% 40%;
  --border: 30 25% 80%;

  --font-body: "Kalam", "Shantell Sans", ui-sans-serif, system-ui, sans-serif;
  --font-marker: "Caveat", "Shantell Sans", ui-sans-serif, system-ui, sans-serif;

  --seed-black: hsl(var(--ink));
  --seed-gray:  hsl(28 10% 45%);
}

/* Base body copy in a hand-drawn font (Kalam) — headings use Caveat (marker). */
h1, h2, h3, h4 { font-family: var(--font-marker); font-weight: 700; }
p, li, label, input, button, a { font-family: var(--font-body); font-weight: 400; }

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: hsl(var(--milk));
  color: hsl(var(--ink));
  font-family: var(--font-marker);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ display: block; max-width: 100%; height: auto; }

.page{ min-height:100vh; width:100%; overflow-x:hidden; }

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.5rem 1.5rem;
}
@media (min-width:640px){ .site-header{ padding: 1.5rem 2.5rem; } }

.wordmark-link{ display: inline-flex; }
.wordmark{ display:block; }
.wordmark--sm{ width: 88px; }
@media (min-width:640px){ .wordmark--sm{ width: 104px; } }

.wordmark-hero{
  margin: 1.25rem auto 0;
  width: min(80vw, 34rem);
  position: relative; z-index: 1;
}
.wordmark-hero .wordmark{ width: 100%; }

/* Big hero wordmark gently rocks like it's balancing */
.wordmark-hero--rock .wordmark{
  transform-origin: 50% 90%;
  animation: mooki-rock 5.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes mooki-rock{
  0%   { transform: rotate(-1.4deg) translateY(0); }
  25%  { transform: rotate(0.6deg)  translateY(-1px); }
  50%  { transform: rotate(1.6deg)  translateY(0); }
  75%  { transform: rotate(-0.4deg) translateY(-1px); }
  100% { transform: rotate(-1.4deg) translateY(0); }
}

/* Small header wordmark: subtle drift */
.wordmark-link .wordmark{
  animation: mooki-drift 6s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes mooki-drift{
  0%,100%{ transform: rotate(-0.8deg) translateY(0); }
  50%    { transform: rotate(0.8deg)  translateY(-1px); }
}

/* Squiggle links */
.squiggle-link{
  position: relative;
  display: inline-block;
  color: hsl(var(--ink));
  text-decoration: none;
  font-family: var(--font-marker);
  font-size: 1rem;
  line-height: 1;
}
.squiggle-link--lg{ font-size: 1.125rem; }
.squiggle-link--sm{ font-size: 1rem; }
.squiggle-link > span{ position: relative; z-index: 1; }
.squiggle{
  position:absolute; left:0; bottom:-.5rem; width:100%; height:.6rem;
  opacity:.55; transition: opacity .3s ease;
}
.squiggle-link:hover .squiggle{ opacity:1; }

/* Hero */
.hero{
  position: relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height: 82vh;
  padding: 5rem 1.5rem 6rem;
  text-align: center;
  overflow: hidden;
}
.eyebrow{
  font-family: var(--font-marker);
  font-size: 1.05rem;
  position: relative; z-index: 1;
}
.eyebrow--honey{ color: hsl(var(--honey-deep)); }
.eyebrow--ink{ color: hsl(var(--ink)); font-size: 1.15rem; }

.underline-wide{ position:relative; z-index:1; margin-top: 1.5rem; width: 11rem; height:.75rem; color: hsl(var(--ink)); }
.underline-wide svg{ width:100%; height:100%; }

.underline-mid{ margin: 1.25rem auto 0; width: 10rem; height:.75rem; color: hsl(var(--ink)); }
.underline-mid svg{ width:100%; height:100%; }

.tagline{
  position:relative; z-index:1;
  margin: 1.75rem 0 0;
  max-width: 30rem;
  font-family: var(--font-marker);
  font-size: 1.5rem;
  line-height: 1.35;
  color: hsl(var(--ink));
  font-weight: 500;
}
@media (min-width:640px){ .tagline{ font-size: 1.875rem; } }
.italic{ font-style: italic; }

.subtag{
  position:relative; z-index:1;
  margin: 1rem 0 0;
  max-width: 24rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: hsl(var(--muted-fg));
}

.hero-cta{ position:relative; z-index:1; margin-top: 2.25rem; }

/* Floating chia seeds — absolute layer spanning the whole document,
   behind all content, everywhere on the page. */
.seeds{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
body{ position: relative; }
.seeds--global{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;         /* fills full document height (body is relative) */
  z-index: 0;
  pointer-events: none;
}

.seed{
  position: absolute; display: block;
  width: 12px; height: 6px;
  border-radius: 58% 42% 55% 45% / 68% 62% 38% 32%;
  background: var(--seed-black);
  opacity: var(--op, .8);
  will-change: transform, opacity;
}
.seed::after{
  content: "";
  position: absolute;
  left: 22%; top: 22%;
  width: 38%; height: 18%;
  border-radius: 999px;
  background: hsl(var(--milk) / .35);
  transform: rotate(-8deg);
}
.seed.s-sm{ width: 10px; height: 5px; }
.seed.s-xs{ width: 8px; height: 4px; }
.seed.s-lg{ width: 15px; height: 7px; }

.seed--black{ background: var(--seed-black); }
.seed--gray{  background: var(--seed-gray); }

/* ===== Five movement personalities ===== */
.move-bob  { --move-du: 18s; animation: seed-bob  var(--move-du) ease-in-out infinite; animation-delay: var(--fd, 0s); }
.move-up   { --move-du: 21s; animation: seed-up   var(--move-du) ease-in-out infinite; animation-delay: var(--fd, 0s); }
.move-side { --move-du: 24s; animation: seed-side var(--move-du) ease-in-out infinite; animation-delay: var(--fd, 0s); }
.move-spin { --move-du: 28s; animation: seed-spin var(--move-du) linear      infinite; animation-delay: var(--fd, 0s); }
.move-fall { --move-du: 22s; animation: seed-fall var(--move-du) ease-in-out infinite; animation-delay: var(--fd, 0s); }

/* fade layered on top of any movement */
.seed.fade{ animation-name: var(--_move, seed-bob), seed-fade;
            animation-duration: var(--move-du, 20s), 32s;
            animation-timing-function: ease-in-out, ease-in-out;
            animation-iteration-count: infinite, infinite;
            animation-delay: var(--fd, 0s), var(--fd, 0s); }
.move-bob.fade  { --_move: seed-bob; }
.move-up.fade   { --_move: seed-up; }
.move-side.fade { --_move: seed-side; }
.move-spin.fade { --_move: seed-spin; animation-timing-function: linear, ease-in-out; }
.move-fall.fade { --_move: seed-fall; }

@keyframes seed-bob{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  25%    { transform: translate(4px, -6px) rotate(8deg); }
  50%    { transform: translate(-3px, -10px) rotate(-6deg); }
  75%    { transform: translate(2px, -4px) rotate(4deg); }
}
@keyframes seed-up{
  0%,100%{ transform: translate(0, 0) rotate(0deg); }
  50%    { transform: translate(1px, -22px) rotate(10deg); }
}
@keyframes seed-side{
  0%,100%{ transform: translate(0, 0) rotate(0deg); }
  25%    { transform: translate(14px, -2px) rotate(6deg); }
  50%    { transform: translate(20px, 3px) rotate(-4deg); }
  75%    { transform: translate(10px, -1px) rotate(4deg); }
}
@keyframes seed-spin{
  0%   { transform: translate(0,0) rotate(0deg); }
  50%  { transform: translate(5px,-6px) rotate(180deg); }
  100% { transform: translate(0,0) rotate(360deg); }
}
@keyframes seed-fall{
  0%   { transform: translate(0, -8px) rotate(-4deg); }
  50%  { transform: translate(-4px, 8px) rotate(6deg); }
  100% { transform: translate(0, -8px) rotate(-4deg); }
}
@keyframes seed-fade{
  0%,100%{ opacity: calc(var(--op, .7) * .22); }
  50%    { opacity: var(--op, .7); }
}

/* Keep the animated decoration away from important content on narrow screens. */
@media (max-width: 700px){
  .seeds--global .seed{ transform-origin: center; }
  .seeds--global .seed[style*="left:14%"],
  .seeds--global .seed[style*="left:15%"],
  .seeds--global .seed[style*="left:16%"],
  .seeds--global .seed[style*="left:18%"],
  .seeds--global .seed[style*="left:22%"],
  .seeds--global .seed[style*="left:24%"],
  .seeds--global .seed[style*="left:26%"],
  .seeds--global .seed[style*="left:74%"],
  .seeds--global .seed[style*="left:76%"],
  .seeds--global .seed[style*="left:78%"],
  .seeds--global .seed[style*="left:82%"],
  .seeds--global .seed[style*="left:84%"],
  .seeds--global .seed[style*="left:86%"]{
    display: none;
  }
}

/* content sits above the seed layer */
.site-header, main, .site-footer, .cow, .moo{ position: relative; z-index: 1; }

/* Ingredients section */
.ingredients{ padding: 6rem 1.5rem; }
.wrap{ max-width: 64rem; margin: 0 auto; text-align: center; }
.section-title{
  margin: .75rem 0 0;
  font-family: var(--font-marker);
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 600;
  color: hsl(var(--ink));
}
@media (min-width:640px){ .section-title{ font-size: 3rem; } }

.lede{
  margin: 1.5rem auto 0;
  max-width: 28rem;
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: hsl(var(--muted-fg));
}
.lede--honey{ color: hsl(var(--honey-deep)); }

.cards{
  margin-top: 3.5rem;
  display: grid;
  gap: 3rem;
}
@media (min-width:768px){ .cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

.card{
  display:flex; flex-direction:column; align-items:center;
  opacity:0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.card.in{ opacity:1; transform:none; }
.card .icon{ width: 7rem; height: 7rem; color: hsl(var(--ink)); }
.card h3{
  margin: 1.25rem 0 0;
  font-family: var(--font-marker);
  font-weight: 600;
  font-size: 1.5rem;
  color: hsl(var(--ink));
}
.card p{
  margin: .75rem 0 0;
  max-width: 15rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: hsl(var(--muted-fg));
}

/* Milk run signup */
.milkrun{ padding: 7rem 1.5rem 8rem; }
.milkrun .wrap{ max-width: 40rem; }
.brk{ display: none; }
@media (min-width:640px){ .brk{ display: inline; } }

.signup{
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem;
  max-width: 28rem;
  margin: 2.75rem auto 0;
}
.email-wrap{ position: relative; width: 100%; color: hsl(var(--ink)); }
.email-wrap input{
  width: 100%;
  border: 0;
  background: transparent;
  padding: .5rem 0;
  text-align: center;
  font-family: var(--font-marker);
  font-size: 1.25rem;
  color: hsl(var(--ink));
}
.email-wrap input::placeholder{ color: hsl(var(--honey-deep) / .5); }
.email-wrap input:focus{ outline: none; }
.email-underline{ margin-top: .25rem; height: .75rem; width: 100%; }
.email-underline svg{ width:100%; height:100%; }

.honey-btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 3.25rem;
  font-family: var(--font-marker);
  font-size: 1.25rem;
  color: hsl(var(--ink));
  background: transparent;
  border: 0;
  cursor: pointer;
}
.btn-shape{ position:absolute; inset:0; width:100%; height:100%; color: hsl(var(--ink)); }
.btn-shape path{ transition: fill .3s ease; }
.honey-btn:hover .btn-shape path{ fill: hsl(var(--honey)); }
.honey-btn > span{ position: relative; z-index: 1; transition: color .3s ease; }
.honey-btn:hover > span{ color: hsl(var(--milk)); }
.honey-btn:focus-visible{ outline: 3px dashed hsl(var(--honey-deep)); outline-offset: 6px; border-radius: 999px; }

/* Footer */
.site-footer{
  position: relative;
  padding: 4rem 1.5rem 3rem;
  border-top: 1px dashed hsl(var(--border));
}
.site-footer .wrap{
  display:flex; flex-direction:column; align-items:center; gap: 1.5rem; text-align: center;
}
.footer-tag{
  margin: 0;
  font-family: var(--font-marker);
  font-size: 1rem;
  color: hsl(var(--honey-deep));
}
.footer-links{ display:flex; flex-wrap: wrap; justify-content: center; align-items:center; gap: .5rem 1.5rem; }
.footer-links .dot{ color: hsl(var(--muted-fg)); }
.copyright{ margin: 0; font-family: var(--font-body); font-size: .75rem; color: hsl(var(--muted-fg)); }

/* Cow easter egg — pinned bottom-right, always visible */
.cow{
  position: fixed;
  right: 1.25rem;
  bottom: 1rem;
  width: 96px;
  height: auto;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 40;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
  filter: drop-shadow(0 4px 8px rgba(24,19,16,.15));
}
.cow:hover{ transform: translateY(-4px) rotate(-3deg); }
.cow:active{ transform: translateY(-2px) rotate(2deg); }
.cow.wiggle{ animation: cow-wiggle .6s ease; }
.cow img{ width: 100%; height: auto; display: block; pointer-events: none; }
@keyframes cow-wiggle{
  0%,100%{ transform: rotate(0deg); }
  20%{ transform: rotate(-8deg) translateY(-2px); }
  50%{ transform: rotate(6deg) translateY(-4px); }
  80%{ transform: rotate(-3deg); }
}
@media (max-width: 480px){
  .cow{ width: 76px; right: .75rem; bottom: .75rem; }
}

.moo{
  position: fixed;
  right: 110px;
  bottom: 40px;
  padding: .5rem .85rem;
  background: hsl(var(--milk));
  border: 2px solid hsl(var(--ink));
  border-radius: 18px;
  font-family: var(--font-marker);
  font-size: .95rem;
  color: hsl(var(--ink));
  opacity: 0;
  transform: translateX(8px) scale(.9);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 41;
  max-width: 60vw;
  box-shadow: 0 6px 14px rgba(24,19,16,.12);
}
.moo::after{
  content: "";
  position: absolute;
  right: -10px;
  bottom: 14px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid hsl(var(--ink));
}
.moo::before{
  content: "";
  position: absolute;
  right: -7px;
  bottom: 16px;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid hsl(var(--milk));
  z-index: 1;
}
.moo.show{ opacity: 1; transform: translateX(0) scale(1); }
@media (max-width: 480px){
  .moo{ right: 92px; bottom: 24px; font-size: .85rem; }
}

/* iPad-ink stroke feel on hand-drawn icons */
.ipad-ink{
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 .35px hsl(var(--ink) / .35));
}

@media (prefers-reduced-motion: reduce){
  .seed, .wordmark-hero--rock .wordmark, .wordmark-link .wordmark{
    animation: none !important;
  }
  .cow{ transition: none; }
}