/* The homepage, rebuilt: a storybook forest you scroll down through, from morning to nightfall.
   Everything moves a little; with "reduce motion" on, nothing does. */

@font-face {
  font-family: Fredoka;
  src: url(fonts/fredoka.woff2) format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: Nunito;
  src: url(fonts/nunito.woff2) format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --cream: #fff4e0;
  --card: #fffbf2;
  --edge: #f0d6a8;
  --honey: #f2b247;
  --honey-deep: #a35a14;
  --cocoa: #3b2414;
  --cocoa-soft: #6a4a30;
  --leaf: #8cba6b;
  --leaf-deep: #4f7f3c;
  --pine: #5f8f63;
  --pink: #f7c4b8;
  --round: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  /* set from the scroll position: 0 in the morning, 1 at nightfall */
  --dusk: 0;
  --spring: cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  position: relative;
  margin: 0;
  font: 500 18px/1.65 var(--body);
  color: var(--cocoa);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--pink);
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  font-family: var(--round);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}
h2 {
  font-size: clamp(40px, 6vw, 76px);
}
em {
  font-style: normal;
}
.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 99;
  background: var(--card);
  padding: 8px 14px;
  border-radius: 999px;
}

/* ---- the sky, the fireflies and the trail, fixed behind the page ---- */
.w-sky {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgb(255 230 190 / calc(1 - var(--dusk))) 0%, rgb(255 244 224 / calc(1 - var(--dusk))) 55%),
    linear-gradient(180deg, #2b2346 0%, #5b3b5c 45%, #c9785a 100%);
  transition: background 0.2s linear;
}
.w-fireflies {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.w-trail {
  position: absolute;
  left: 0;
  top: 100vh;
  width: 100%;
  height: calc(100% - 100vh);
  z-index: -2;
  pointer-events: none;
  overflow: visible;
}
.w-trail path {
  fill: none;
  stroke: var(--honey);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 2 16;
  opacity: 0.55;
}

/* ---- the header ---- */
.w-head {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  width: min(1160px, calc(100% - 28px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px 8px 18px;
  background: rgb(255 251 242 / 0.82);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 3px solid var(--edge);
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--edge);
  /* a calm slide, no overshoot */
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.3, 1), box-shadow 0.3s;
}
.w-head.tucked {
  transform: translateX(-50%) translateY(-120%);
}
.w-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 26px var(--round);
  text-decoration: none;
  color: var(--cocoa);
}
.w-brand svg {
  width: 36px;
  height: 36px;
  fill: #dcae6c;
  stroke: var(--cocoa);
  stroke-width: 5;
  transition: transform 0.5s var(--spring);
}
.w-brand:hover svg {
  transform: rotate(-14deg) scale(1.12);
}
.w-brand .muzzle {
  fill: #f8ecd0;
  stroke-width: 3;
}
.w-brand .eye {
  fill: var(--cocoa);
  stroke: none;
}
.w-head nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.w-head nav a {
  font: 600 16px var(--round);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.2s;
}
.w-head nav a:hover {
  background: #fdeccc;
}
.w-head .w-nav-cta {
  background: var(--honey);
  border: 3px solid var(--cocoa);
  box-shadow: 0 4px 0 var(--cocoa);
  padding: 6px 16px;
  margin-left: 6px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.w-head .w-nav-cta:hover {
  background: var(--honey);
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--cocoa);
}
.w-x svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: var(--cocoa);
}

/* ---- buttons ---- */
.w-btn {
  position: relative;
  display: inline-block;
  font: 700 19px var(--round);
  text-decoration: none;
  color: var(--cocoa);
  background: var(--honey);
  border: 3px solid var(--cocoa);
  border-radius: 999px;
  padding: 14px 30px;
  box-shadow: 0 6px 0 var(--cocoa);
  transition: transform 0.15s, box-shadow 0.15s;
  overflow: hidden;
  isolation: isolate;
}
/* a sweep of light across it on hover */
.w-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s;
  z-index: -1;
}
.w-btn:hover {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--cocoa);
}
.w-btn:hover::after {
  transform: translateX(120%);
}
.w-btn.big {
  font-size: 24px;
  padding: 18px 42px;
}
.w-link {
  font: 700 18px var(--round);
  text-decoration-color: var(--honey);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.w-link:hover {
  color: var(--honey-deep);
}
.w-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font: 700 15px var(--round);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cocoa);
  background: #fde9c4;
  border: 2px solid var(--edge);
  border-radius: 999px;
  padding: 5px 16px 5px 12px;
}
.w-tag::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--honey);
}

/* ---- the hero ---- */
.w-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 20px;
  padding: 130px max(28px, calc((100vw - 1160px) / 2)) 120px;
  overflow: hidden;
}
.w-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.w-sun {
  position: absolute;
  right: 12%;
  top: 14%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe08a 0 55%, rgb(255 224 138 / 0.4) 56% 70%, transparent 71%);
  animation: sun-breathe 6s ease-in-out infinite;
  transform: translate(var(--px, 0), calc(var(--py, 0) + var(--scroll, 0) * 0.5px));
}
@keyframes sun-breathe {
  50% {
    scale: 1.06;
  }
}
.w-cloud {
  position: absolute;
  height: 46px;
  background: #fffaf0;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgb(240 214 168 / 0.6);
  animation: drift linear infinite;
  opacity: 0.95;
}
.w-cloud::before,
.w-cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.w-cloud::before {
  width: 60px;
  height: 60px;
  left: 22px;
  top: -30px;
}
.w-cloud::after {
  width: 44px;
  height: 44px;
  left: 70px;
  top: -20px;
}
.w-cloud.c1 {
  width: 170px;
  top: 22%;
  animation-duration: 70s;
  animation-delay: -20s;
}
.w-cloud.c2 {
  width: 130px;
  top: 34%;
  animation-duration: 95s;
  animation-delay: -60s;
  scale: 0.8;
}
.w-cloud.c3 {
  width: 200px;
  top: 13%;
  animation-duration: 120s;
  animation-delay: -95s;
  scale: 0.65;
  opacity: 0.7;
}
@keyframes drift {
  from {
    left: -260px;
  }
  to {
    left: 110%;
  }
}
.w-layer {
  position: absolute;
  left: -5%;
  width: 110%;
  bottom: 0;
  height: 30%;
  transition: transform 0.25s ease-out;
}
.w-layer.far {
  fill: #cfe3b3;
  transform: translate(calc(var(--px, 0) * 0.3), calc(var(--scroll, 0) * 0.35px));
}
.w-layer.mid {
  fill: #a9cd8a;
  height: 27%;
  transform: translate(calc(var(--px, 0) * 0.6), calc(var(--scroll, 0) * 0.2px));
}
.w-layer.near {
  fill: #86b56a;
  height: 17%;
  transform: translate(var(--px, 0), calc(var(--scroll, 0) * 0.08px));
}
.w-layer g path {
  stroke: var(--cocoa);
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.w-layer.mid g path {
  fill: #79a868;
}
.w-layer.near g path {
  fill: #5f8f55;
}
.w-leaves {
  position: absolute;
  inset: 0;
}
.w-leaves i {
  position: absolute;
  top: -30px;
  width: 16px;
  height: 10px;
  background: var(--leaf);
  border-radius: 0 100% 0 100%;
  border: 2px solid var(--leaf-deep);
  animation: fall linear infinite;
}
@keyframes fall {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--sway, 80px), 110vh) rotate(720deg);
    opacity: 0;
  }
}

.w-hero-copy {
  position: relative;
}
.w-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font: 600 16px var(--round);
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 0 4px 0 var(--edge);
}
.w-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--leaf-deep);
  box-shadow: 0 0 0 0 rgb(79 127 60 / 0.5);
  animation: ping 2s ease-out infinite;
}
@keyframes ping {
  70% {
    box-shadow: 0 0 0 10px rgb(79 127 60 / 0);
  }
}
.w-hero h1 {
  font-size: clamp(64px, 9.4vw, 134px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-bottom: 26px;
}
.w-hero h1 em {
  color: var(--honey-deep);
  position: relative;
}
/* each letter bounces in */
.w-split .ch {
  display: inline-block;
  transform: translateY(0.6em) rotate(8deg);
  opacity: 0;
  animation: letter 0.7s var(--spring) forwards;
  animation-delay: calc(0.12s + var(--n) * 0.035s);
}
.w-split .wordwrap {
  display: inline-block;
  white-space: nowrap;
}
.w-split .sp {
  display: inline-block;
  width: 0.26em;
}
@keyframes letter {
  to {
    transform: none;
    opacity: 1;
  }
}
.w-lead {
  max-width: 560px;
  font-size: 20px;
  margin: 0 0 32px;
  color: var(--cocoa);
  opacity: 0;
  animation: rise 0.9s var(--spring) 0.75s forwards;
}
.w-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  opacity: 0;
  animation: rise 0.9s var(--spring) 0.95s forwards;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.w-hero-bear {
  position: relative;
  justify-self: center;
  width: min(420px, 100%);
  aspect-ratio: 1;
  opacity: 0;
  animation: bear-in 1.1s var(--spring) 0.5s forwards;
}
@keyframes bear-in {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.7) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.w-bear-btn {
  position: absolute;
  inset: 0 0 8% 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
  animation: bob 3.2s ease-in-out infinite;
  transform-origin: 50% 95%;
}
.w-bear-btn canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.w-bear-btn:active {
  animation: squish 0.35s var(--spring);
}
@keyframes bob {
  50% {
    transform: translateY(-10px) rotate(-1.5deg);
  }
}
@keyframes squish {
  40% {
    transform: scale(1.12, 0.86);
  }
}
.w-log {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4%;
  height: 16%;
  border-radius: 999px;
  background: linear-gradient(#c9915e, #a8703f);
  border: 4px solid var(--cocoa);
  box-shadow: inset -26px 0 0 -12px #8a5a30, 0 10px 0 rgb(59 36 20 / 0.12);
}
.w-log::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -4px;
  bottom: -4px;
  aspect-ratio: 0.7;
  border-radius: 50%;
  background: repeating-radial-gradient(#e6bb85 0 4px, #c9915e 4px 8px);
  border: 4px solid var(--cocoa);
}
.w-bubble {
  position: absolute;
  top: 2%;
  right: -4%;
  z-index: 3;
  margin: 0;
  font: 700 22px var(--round);
  background: var(--card);
  border: 3px solid var(--cocoa);
  border-radius: 22px 22px 22px 4px;
  padding: 8px 18px;
  box-shadow: 0 4px 0 var(--cocoa);
  transform-origin: 0 100%;
  animation: pop 0.6s var(--spring) 1.6s both;
}
.w-bubble.again {
  animation: pop 0.5s var(--spring) both;
}
@keyframes pop {
  from {
    transform: scale(0);
  }
}
.w-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 30px;
  height: 48px;
  border: 3px solid var(--cocoa);
  border-radius: 999px;
  translate: -50% 0;
}
.w-scroll span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 6px;
  height: 10px;
  border-radius: 999px;
  background: var(--cocoa);
  translate: -50% 0;
  animation: wheel 1.6s ease-in-out infinite;
}
@keyframes wheel {
  60% {
    transform: translateY(14px);
    opacity: 0;
  }
}

/* ---- the ticker ---- */
.w-ticker {
  position: relative;
  background: var(--cocoa);
  color: #fde9c8;
  overflow: hidden;
  padding: 16px 0;
  transform: rotate(-1.2deg) scale(1.03);
  margin: -10px 0 0;
  border-block: 4px solid var(--cocoa);
}
.w-ticker-track {
  display: flex;
  width: max-content;
  animation: tick 60s linear infinite;
}
.w-ticker:hover .w-ticker-track {
  animation-play-state: paused;
}
.w-ticker-track span {
  font: 600 20px var(--round);
  white-space: nowrap;
  padding: 0 28px;
}
.w-ticker-track span::after {
  content: "🐾";
  margin-left: 56px;
}
@keyframes tick {
  to {
    transform: translateX(-50%);
  }
}

/* ---- shared section spacing and the reveal-on-scroll ---- */
main > section:not(.w-hero):not(.w-ticker) {
  padding: 100px max(28px, calc((100vw - 1160px) / 2));
}
.reveal {
  opacity: 0;
  transform: translateY(46px) scale(0.98);
  transition:
    opacity 0.8s ease,
    transform 0.9s var(--spring);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---- the question, lighting up word by word ---- */
.w-idea {
  text-align: center;
}
.w-idea h2 {
  max-width: 1000px;
  margin: 0 auto 50px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.15;
}
.w-words .wd {
  opacity: 0.16;
  transition: opacity 0.3s, color 0.3s;
}
.w-words .wd.lit {
  opacity: 1;
}
.w-words .wd.key.lit {
  color: var(--honey-deep);
}
.w-honest {
  max-width: 620px;
  margin: 0 auto;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 28px;
  padding: 22px 30px;
  box-shadow: 0 6px 0 var(--edge);
  text-align: left;
}

/* ---- a visit: cards that stack as you scroll ---- */
.w-visit {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  align-items: start;
}
.w-visit-head {
  position: sticky;
  top: 140px;
}
.w-visit-head h2 {
  margin-bottom: 18px;
  font-size: clamp(40px, 5vw, 64px);
}
.w-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 40px;
}
.w-stack li {
  position: sticky;
  top: calc(130px + var(--i) * 26px);
  display: grid;
  grid-template-columns: auto 1fr 150px;
  align-items: center;
  gap: 22px;
  min-height: 250px;
  padding: 34px;
  background: var(--card);
  border: 4px solid var(--cocoa);
  border-radius: 36px;
  box-shadow: 0 10px 0 var(--cocoa);
  transform-origin: 50% 0;
}
.w-stack li:nth-child(2) {
  background: #fde3dc;
}
.w-stack li:nth-child(3) {
  background: #e5f0d6;
}
.w-stack li:nth-child(4) {
  background: #fde9c4;
}
.w-num {
  align-self: start;
  font: 700 54px var(--round);
  color: var(--honey-deep);
  line-height: 1;
}
.w-stack h3 {
  font-size: 34px;
  margin-bottom: 8px;
}
.w-stack p {
  margin: 0;
}
.w-card-bear {
  width: 150px;
  height: 150px;
}

/* ---- tiles ---- */
.w-play {
  text-align: center;
}
.w-play h2 {
  margin-bottom: 50px;
}
.w-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  perspective: 900px;
}
.w-tile {
  position: relative;
  padding: 18px 14px 20px;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--edge);
  transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
  transition:
    transform 0.25s ease-out,
    box-shadow 0.2s,
    border-color 0.2s;
  transform-style: preserve-3d;
  cursor: default;
}
.w-tile:hover {
  border-color: var(--honey);
  box-shadow: 0 10px 0 var(--honey);
}
.w-tile canvas {
  width: 120px;
  height: 120px;
  display: block;
  margin: 0 auto 4px;
  transform: translateZ(30px);
}
.w-tile b {
  display: block;
  font: 700 21px var(--round);
  transform: translateZ(20px);
}
.w-tile span {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  color: var(--cocoa-soft);
  margin-top: 4px;
}
.w-note {
  margin-top: 34px;
  font: 600 19px var(--round);
  color: var(--cocoa-soft);
}

/* ---- the forest window ---- */
.w-window {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 50px;
  align-items: center;
}
.w-window-frame {
  border: 5px solid var(--cocoa);
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 12px 0 var(--cocoa);
  transform: scale(var(--grow, 0.86)) rotate(calc((1 - var(--grow, 0.86)) * -12deg));
  transition: transform 0.1s linear;
}
.w-window-frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.8s ease;
}
.w-window-frame:hover img {
  transform: scale(1.06);
}
.w-window-copy h2 {
  font-size: clamp(38px, 4.4vw, 58px);
  margin-bottom: 18px;
}
.w-window-copy p {
  margin: 0 0 28px;
}

/* ---- the diary book ---- */
.w-diary {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.w-diary h2 {
  margin-bottom: 18px;
}
.w-diary-copy p {
  margin: 0 0 22px;
}
.w-book {
  perspective: 1400px;
}
.w-page {
  position: relative;
  min-height: 360px;
  padding: 50px 54px 40px;
  background: var(--card) repeating-linear-gradient(transparent 0 37px, rgb(163 90 20 / 0.13) 37px 39px);
  background-position: 0 30px;
  border: 4px solid var(--cocoa);
  border-radius: 10px 34px 34px 10px;
  box-shadow:
    -14px 0 0 -4px #e9c995,
    0 12px 0 var(--cocoa);
  transform-origin: 0 50%;
  transform: rotate(-1deg);
}
.w-page::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 120px;
  height: 34px;
  translate: -50% 0;
  rotate: 3deg;
  background: rgb(247 196 184 / 0.9);
  border-radius: 6px;
}
.w-page.turn-out {
  animation: turn-out 0.35s ease-in forwards;
}
.w-page.turn-in {
  animation: turn-in 0.5s var(--spring);
}
@keyframes turn-out {
  to {
    transform: rotateY(-80deg);
    opacity: 0.3;
  }
}
@keyframes turn-in {
  from {
    transform: rotateY(70deg);
    opacity: 0.3;
  }
}
.w-page-date {
  margin: 0 0 14px;
  font: 700 14px var(--round);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--honey-deep);
}
.w-page-text {
  margin: 0;
  font: 500 24px/1.6 var(--round);
  white-space: pre-line;
}
.w-page-sign {
  margin: 18px 0 0;
  text-align: right;
  font: 700 22px var(--round);
  color: var(--honey-deep);
}
.w-page-sign small {
  display: block;
  font: 600 14px var(--body);
  color: var(--cocoa-soft);
}
.w-book-nav[hidden] {
  display: none;
}
.w-book-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
  font: 700 16px var(--round);
}
.w-book-nav button {
  width: 48px;
  height: 48px;
  font: 700 22px var(--round);
  color: var(--cocoa);
  background: var(--honey);
  border: 3px solid var(--cocoa);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--cocoa);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.w-book-nav button:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--cocoa);
}
.w-book-nav button:disabled {
  opacity: 0.35;
  transform: none;
  cursor: default;
}

/* ---- adopting ---- */
.w-adopt {
  text-align: center;
}
.w-adopt h2 {
  margin-bottom: 54px;
}
.w-steps {
  list-style: none;
  margin: 0 0 54px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
.w-steps::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 46px;
  border-top: 5px dashed var(--honey);
  z-index: -1;
}
.w-steps li {
  padding: 0 10px;
}
.w-steps li > span {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  font-size: 40px;
  background: var(--card);
  border: 4px solid var(--cocoa);
  border-radius: 50%;
  box-shadow: 0 6px 0 var(--cocoa);
  transition: transform 0.4s var(--spring);
}
.w-steps li:hover > span {
  transform: rotate(-12deg) scale(1.12);
}
.w-steps h3 {
  font-size: 26px;
  margin-bottom: 8px;
}
.w-steps p {
  margin: 0;
  color: var(--cocoa-soft);
}
.w-adopt-cta p {
  margin: 20px 0 0;
  font: 600 17px var(--round);
  color: var(--cocoa-soft);
}
.w-btn.big {
  animation: nudge 4s ease-in-out infinite;
}
@keyframes nudge {
  0%,
  86%,
  100% {
    rotate: 0deg;
  }
  89% {
    rotate: -3deg;
  }
  92% {
    rotate: 3deg;
  }
  95% {
    rotate: -2deg;
  }
}

/* ---- questions ---- */
.w-faq {
  max-width: 900px;
  margin: 0 auto;
}
.w-faq h2 {
  margin-bottom: 40px;
}
.w-qs details {
  margin-bottom: 16px;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--edge);
  overflow: hidden;
  transition: border-color 0.2s;
}
.w-qs details[open] {
  border-color: var(--honey);
}
.w-qs summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 70px 22px 28px;
  font: 700 22px var(--round);
  position: relative;
}
.w-qs summary::-webkit-details-marker {
  display: none;
}
.w-qs summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 36px;
  height: 36px;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  font: 700 24px var(--round);
  background: var(--honey);
  border: 3px solid var(--cocoa);
  border-radius: 50%;
  transition: rotate 0.35s var(--spring);
}
.w-qs details[open] summary::after {
  rotate: 135deg;
}
.w-qs details p {
  margin: 0;
  padding: 0 28px 24px;
  animation: rise 0.45s var(--spring);
}

/* ---- the footer at nightfall ---- */
.w-foot {
  position: relative;
  min-height: 560px;
  padding: 120px 28px 50px;
  text-align: center;
  color: #fde9c8;
  overflow: hidden;
}
.w-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 20%, #fff 1.5px, transparent 2px),
    radial-gradient(circle at 34% 12%, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 58% 26%, #fff 2px, transparent 2.5px),
    radial-gradient(circle at 76% 10%, #fff 1.2px, transparent 1.7px),
    radial-gradient(circle at 88% 30%, #fff 1.6px, transparent 2.1px),
    radial-gradient(circle at 22% 44%, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 46% 40%, #fff 1.4px, transparent 1.9px),
    radial-gradient(circle at 66% 48%, #fff 1px, transparent 1.5px);
  animation: twinkle 3.5s ease-in-out infinite alternate;
}
@keyframes twinkle {
  to {
    opacity: 0.45;
  }
}
.w-moon {
  position: absolute;
  right: 14%;
  top: 70px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  box-shadow: -18px 10px 0 0 #fde9c8;
  rotate: -20deg;
}
#sleep-bear {
  display: block;
  width: 220px;
  height: 220px;
  margin: 0 auto 10px;
  position: relative;
}
.w-foot-line {
  position: relative;
  font: 700 clamp(26px, 3.4vw, 40px) / 1.25 var(--round);
  margin: 0 0 30px;
}
.w-foot-links,
.w-foot-small {
  position: relative;
  font: 600 17px var(--round);
  margin: 0 0 10px;
}
.w-foot-small {
  font-size: 14px;
  opacity: 0.7;
}
.w-foot a {
  color: #fde9c8;
  text-decoration-color: var(--honey);
}

/* ---- small screens ---- */
@media (max-width: 900px) {
  .w-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .w-eyebrow {
    font-size: 14px;
    white-space: nowrap;
  }
  .w-head nav a:not(.w-nav-cta):not(.w-x) {
    display: none;
  }
  .w-hero {
    grid-template-columns: 1fr;
    padding-top: 110px;
    text-align: center;
  }
  .w-hero-bear {
    order: -1;
    width: min(280px, 80%);
  }
  .w-lead {
    margin-inline: auto;
  }
  .w-actions {
    justify-content: center;
  }
  .w-visit,
  .w-window,
  .w-diary {
    grid-template-columns: 1fr;
  }
  .w-visit-head {
    position: static;
  }
  .w-stack li {
    grid-template-columns: 1fr;
    top: calc(100px + var(--i) * 16px);
  }
  .w-card-bear {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 90px;
    height: 90px;
  }
  .w-steps {
    grid-template-columns: 1fr;
  }
  .w-steps::before {
    display: none;
  }
  main > section:not(.w-hero):not(.w-ticker) {
    padding-block: 90px;
  }
  .w-trail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .w-split .ch,
  .w-lead,
  .w-actions,
  .w-hero-bear,
  .reveal {
    opacity: 1;
    transform: none;
  }
  .w-words .wd {
    opacity: 1;
  }
}

/* ---- tidy-up ---- */
html,
body {
  overflow-x: clip;
}
main {
  overflow-x: clip;
}
p,
summary,
li {
  text-wrap: pretty;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
/* anchor links land below the floating header */
section[id] {
  scroll-margin-top: 90px;
}
.w-faq {
  text-align: center;
}
.w-faq .w-qs {
  text-align: left;
}
.w-scroll {
  display: none;
}
/* the hero's text sits on the sky, never on the pines */
.w-hero {
  padding-bottom: 22vh;
}
/* keyboard focus is always visible */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--honey-deep);
  outline-offset: 4px;
  border-radius: 12px;
}
.w-stack h3 {
  text-wrap: balance;
}
.w-foot-line {
  text-wrap: balance;
}

@media (max-width: 900px) {
  .w-page {
    padding: 40px 26px 30px;
    min-height: 0;
  }
  .w-page-text {
    font-size: 20px;
  }
  .w-moon {
    right: 8%;
    top: 40px;
    width: 60px;
    height: 60px;
    box-shadow: -12px 7px 0 0 #fde9c8;
  }
  .w-foot {
    padding-top: 130px;
  }
  .w-tile {
    padding: 14px 8px 16px;
    border-radius: 22px;
  }
  .w-tile canvas {
    width: 96px;
    height: 96px;
  }
  .w-tile b {
    font-size: 18px;
  }
  .w-tile span {
    font-size: 14px;
  }
  .w-stack li {
    padding: 28px 24px;
    border-radius: 28px;
  }
  .w-stack h3 {
    font-size: 28px;
    padding-right: 90px;
  }
  .w-honest {
    padding: 18px 22px;
  }
}

/* the questions keep a fixed readable width; the page-wide side spacing doesn't apply inside it */
main > section.w-faq.w-faq.w-faq {
  max-width: 960px;
  padding-inline: 28px;
}

/* adopting sits on its own cream panel, so it reads at any time of day */
main > section.w-adopt.w-adopt.w-adopt {
  max-width: 1160px;
  margin: 40px auto;
  padding: 80px 40px 70px;
  background: var(--cream);
  border: 4px solid var(--cocoa);
  border-radius: 48px;
  box-shadow: 0 12px 0 var(--cocoa);
}
@media (max-width: 1200px) {
  main > section.w-adopt.w-adopt.w-adopt {
    margin: 40px 16px;
    padding: 60px 22px 54px;
  }
}
/* the questions' heading sits on the night sky: it turns light once the sky is dark */
.w-faq h2 {
  color: color-mix(in srgb, #fff1d6 calc(clamp(0, (var(--dusk) - 0.35) * 4, 1) * 100%), var(--cocoa));
}


/* ---- the drawn scenery: canvases take the place of the flat shapes ---- */
.w-sun {
  width: 220px;
  height: 220px;
  right: 10%;
  top: 9%;
  background: none;
}
.w-cloud {
  width: 220px;
  height: 90px;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.w-cloud::before,
.w-cloud::after {
  display: none;
}
.w-cloud.c1 {
  width: 230px;
}
.w-cloud.c2 {
  width: 180px;
}
.w-cloud.c3 {
  width: 260px;
}
.w-layer.far {
  height: 34%;
}
.w-layer.mid {
  height: 30%;
}
.w-layer.near {
  height: 20%;
}
.w-log {
  left: 8%;
  right: 8%;
  width: 84%;
  bottom: 2%;
  height: 20%;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.w-log::after {
  display: none;
}
.w-steps .w-icon {
  display: block;
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  padding: 10px;
  background: var(--card);
  border: 4px solid var(--cocoa);
  border-radius: 50%;
  box-shadow: 0 6px 0 var(--cocoa);
  transition: transform 0.4s var(--spring);
}
.w-steps li:hover .w-icon {
  transform: rotate(-12deg) scale(1.12);
}
.w-ticker-track span::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 56px;
  vertical-align: -3px;
  background: var(--paw) center / contain no-repeat;
}

.w-cloud {
  height: 80px;
}
.w-cloud.c1 {
  top: 14%;
}
.w-cloud.c2 {
  top: 24%;
}
.w-cloud.c3 {
  top: 6%;
}

.w-steps .w-icon[data-icon="bear"] {
  padding: 2px;
}

/* a note scribbled beside the hero bear */
.w-note-hand {
  position: absolute;
  left: -16%;
  top: 4%;
  z-index: 3;
  margin: 0;
  font: 600 24px/1.05 var(--round);
  color: var(--honey-deep);
  transform: rotate(-8deg);
  opacity: 0;
  animation: note-in 0.7s var(--spring) 1.8s forwards;
}
@keyframes note-in {
  from {
    opacity: 0;
    transform: rotate(-8deg) scale(0.4);
  }
  to {
    opacity: 1;
    transform: rotate(-8deg);
  }
}
.w-note-hand svg {
  display: block;
  width: 54px;
  height: 40px;
  margin: 2px 0 0 70px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 900px) {
  .w-note-hand {
    left: -12%;
    top: -2%;
    font-size: 17px;
  }
  .w-note-hand svg {
    width: 40px;
    height: 30px;
    margin-left: 50px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .w-note-hand {
    opacity: 1;
  }
}