/* Shared by every page: the top bar, and the footer with the contact form. */

/* Top bar */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247, 242, 233, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 48px);
}
.brand { display: block; }
.brand .mark { display: block; position: relative; height: 46px; aspect-ratio: 2900 / 623; }
.brand .mark img { height: 100%; width: auto; display: block; }
.brand .mark svg { position: absolute; left: 44.566%; top: 6.004%; width: 10.167%; height: 42.219%; overflow: visible; }
.wiggle { animation: wiggle 6s ease-in-out 1s infinite; }
.blink { animation: blink 6s linear 1s infinite; }
@keyframes wiggle { 0%, 62%, 100% { transform: rotate(0); } 68% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } 82% { transform: rotate(-2deg); } 89% { transform: rotate(1deg); } 95% { transform: rotate(0); } }
@keyframes blink { 0%, 40%, 43.5%, 100% { transform: scaleY(1); } 41.7% { transform: scaleY(.1); } }
.top nav { display: flex; gap: clamp(18px, 2.6vw, 34px); font-weight: 700; font-size: 1.1rem; }
.top nav a { text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent; }
.top nav a:hover, .top nav a:focus-visible { color: var(--coral); }
.top nav a[aria-current="page"] { border-bottom-color: var(--coral); }
@media (max-width: 640px) {
  .top { position: static; }
  .brand .mark { height: 36px; }
  .top nav { width: 100%; justify-content: space-between; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .wiggle, .blink { animation: none; } }

/* Footer */
footer { margin-top: 24px; text-align: center; }
.dig { margin: 0 0 8px; padding: 0 16px; font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 700; color: var(--muted); }
.worm-stage { position: relative; height: clamp(150px, 26vw, 270px); }
/* the mound's foot sits on the ground line, so the worm digs up out of the footer */
.worm-stage img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; transform: translate(-50%, 0.5px); }
.ground {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(circle at 14% 38%, #2c3b3c 0 5px, transparent 6px),
    radial-gradient(circle at 31% 72%, #2c3b3c 0 3px, transparent 4px),
    radial-gradient(circle at 68% 30%, #2c3b3c 0 4px, transparent 5px),
    radial-gradient(circle at 86% 66%, #2c3b3c 0 6px, transparent 7px),
    radial-gradient(circle at 52% 84%, #2c3b3c 0 3px, transparent 4px),
    var(--ink);
  color: #b9b3a8;
  padding: clamp(48px, 7vw, 80px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 64px);
  font-size: 0.95rem;
}
.ground-in {
  max-width: 1084px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  grid-template-areas: "info form";
  align-items: end;
  gap: 40px 64px;
  text-align: left;
}
.foot-info { grid-area: info; display: grid; gap: 14px; }
.foot-info .links { display: grid; gap: 6px; font-size: 1.05rem; }
.ground a { color: var(--bg); text-decoration: none; }
.ground a:hover, .ground a:focus-visible { color: var(--coral); }

/* Work with us: the contact form, bottom right of the footer */
.contact { grid-area: form; scroll-margin-top: 96px; margin: 0; }
.contact h2 { color: var(--bg); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.1; font-weight: 800; margin: 0; }
.contact > p { margin: 8px 0 20px; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: #b9b3a8; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: 0.95rem; color: var(--bg); }
.form .full { grid-column: 1 / -1; }
.form input, .form textarea {
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 12px 16px;
  width: 100%;
}
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--coral); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form button {
  justify-self: start;
  margin-top: 4px;
  font: inherit;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
  background: var(--coral);
  border: 0;
  border-radius: 999px;
  padding: 14px 40px;
  cursor: pointer;
}
.form button:hover, .form button:focus-visible { background: var(--bg); }
.form button:disabled { opacity: 0.6; cursor: wait; }
.status { grid-column: 1 / -1; margin: 0; min-height: 1.5em; font-weight: 700; color: var(--bg); }
.status.bad { color: var(--coral); }
@media (max-width: 760px) {
  .ground-in { grid-template-columns: 1fr; grid-template-areas: "form" "info"; }
  .foot-info { text-align: center; }
}
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } .form button { justify-self: stretch; } }