/* Transparent field-note marginalia: no panels, no extra page backgrounds. */
.journal-decor-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.journal-decor-section > :not(.journal-mark, .spoor-trail) {
  position: relative;
  z-index: 2;
}

.journal-mark,
.spoor-trail {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
}

.journal-mark {
  height: auto;
  object-fit: contain;
  opacity: .11;
}

.journal-mark--botanical-left {
  bottom: -10rem;
  left: -6rem;
  width: clamp(13rem, 25vw, 24rem);
  transform: rotate(-3deg);
}

.journal-mark--botanical-right {
  right: -5rem;
  bottom: -11rem;
  width: clamp(14rem, 26vw, 25rem);
  transform: scaleX(-1) rotate(-2deg);
}

.journal-mark--landscape-low {
  right: -8rem;
  bottom: -2.2rem;
  width: min(62rem, 72vw);
  opacity: .085;
}

.journal-mark--landscape-low-left {
  bottom: -2.2rem;
  left: -8rem;
  width: min(62rem, 72vw);
  opacity: .085;
  transform: scaleX(-1);
}

.journal-mark--landscape-high {
  top: 1rem;
  left: 50%;
  width: min(58rem, 70vw);
  opacity: .075;
  transform: translateX(-50%);
}

/* Single-motif field sketches: deliberately quiet, like pencilled margin notes. */
.journal-mark--boulders { width: clamp(14rem, 24vw, 25rem); opacity: .09; }
.journal-mark--campfire { width: clamp(15rem, 26vw, 27rem); opacity: .08; }
.journal-mark--elephant { width: clamp(15rem, 25vw, 26rem); opacity: .075; }
.journal-mark--giraffe { width: clamp(8rem, 13vw, 13rem); opacity: .075; }
.journal-mark--kettle { width: clamp(9rem, 15vw, 15rem); opacity: .085; }
.journal-mark--lantern { width: clamp(5rem, 8vw, 8rem); opacity: .085; }
.journal-mark--mopane { width: clamp(14rem, 24vw, 25rem); opacity: .085; }
.journal-mark--ridge { width: min(42rem, 55vw); opacity: .075; }
.journal-mark--riverbed { width: clamp(16rem, 28vw, 29rem); opacity: .075; }
.journal-mark--springbok { width: clamp(6rem, 10vw, 10rem); opacity: .08; }
.journal-mark--tent { width: clamp(16rem, 27vw, 28rem); opacity: .08; }

.journal-mark--top-left {
  top: clamp(2rem, 5vw, 5rem);
  left: clamp(-3rem, -1.5vw, -1rem);
  transform: rotate(-3deg);
}

.journal-mark--top-right {
  top: clamp(2rem, 5vw, 5rem);
  right: clamp(-3rem, -1.5vw, -1rem);
  transform: rotate(3deg);
}

.journal-mark--bottom-left {
  bottom: clamp(-4rem, -2vw, -1.5rem);
  left: clamp(-3rem, -1.5vw, -1rem);
  transform: rotate(-2deg);
}

.journal-mark--bottom-right {
  right: clamp(-3rem, -1.5vw, -1rem);
  bottom: clamp(-4rem, -2vw, -1.5rem);
  transform: rotate(2deg);
}

.journal-mark--top-right-wide {
  top: clamp(1.5rem, 3vw, 3rem);
  right: clamp(-7rem, -3vw, -2rem);
  transform: rotate(1.5deg);
}

.journal-mark--mid-right {
  top: 50%;
  right: clamp(-3rem, -1.5vw, -1rem);
  transform: translateY(-50%) rotate(2deg);
}

.journal-mark--dark-left,
.journal-mark--dark-right {
  top: 50%;
  filter: brightness(2.15) saturate(.72);
  mix-blend-mode: screen;
  opacity: .095;
}

.journal-mark--dark-left {
  left: -2rem;
  transform: translateY(-50%) rotate(-2deg);
}

.journal-mark--dark-right {
  right: -2rem;
  transform: translateY(-50%) rotate(2deg);
}

.spoor-trail--gutter-left {
  top: 38%;
  left: clamp(.35rem, 1.5vw, 1.5rem);
  width: clamp(5rem, 7vw, 7rem);
  height: clamp(13rem, 18vw, 17rem);
}

.spoor-trail--upper-left-cross {
  top: clamp(3.5rem, 7vw, 6rem);
  left: clamp(1.5rem, 7vw, 7rem);
  width: clamp(18rem, 34vw, 32rem);
  height: clamp(7rem, 10vw, 9rem);
}

.spoor-trail--upper-center-cross {
  top: clamp(1.25rem, 3vw, 2.5rem);
  left: 50%;
  width: clamp(18rem, 36vw, 34rem);
  height: clamp(7rem, 10vw, 9rem);
  transform: translateX(-50%);
}

.spoor-trail--bird-hop {
  top: clamp(1.25rem, 3vw, 2.5rem);
  left: clamp(1rem, 8vw, 8rem);
  width: clamp(18rem, 32vw, 29rem);
  height: clamp(7rem, 10vw, 9rem);
}

.spoor-trail--lower-left {
  bottom: clamp(2.5rem, 6vw, 6rem);
  left: clamp(.35rem, 1.5vw, 1.5rem);
  width: clamp(5rem, 7vw, 7rem);
  height: clamp(13rem, 18vw, 17rem);
}

.spoor-trail--dark-cross {
  top: clamp(7rem, 13vw, 11rem);
  left: clamp(2rem, 7vw, 7rem);
  width: clamp(20rem, 36vw, 34rem);
  height: clamp(8rem, 11vw, 10rem);
}

.spoor-trail--lower-right-cross {
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: clamp(2.5rem, 5vw, 5rem);
  width: clamp(17rem, 31vw, 29rem);
  height: clamp(7rem, 10vw, 9rem);
}

.spoor-trail--cross-rise {
  right: 1.5%;
  bottom: .75rem;
  width: clamp(9rem, 14vw, 13rem);
  height: clamp(8rem, 12vw, 11rem);
}

.spoor-trail--on-dark {
  filter: brightness(2.3) saturate(.78);
  mix-blend-mode: screen;
  opacity: .82;
}

.spoor-step {
  --spoor-opacity: .28;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(1.35rem, 1.8vw, 1.85rem);
  height: auto;
  opacity: var(--spoor-opacity);
  transform: translate(-50%, -50%) rotate(var(--r)) scaleX(var(--sx, 1)) scaleY(var(--sy, 1));
  transform-origin: center;
}

.spoor-trail--elephant .spoor-step { width: clamp(3.6rem, 4.5vw, 4.5rem); --spoor-opacity: .3; filter: contrast(1.18); }
.spoor-trail--giraffe .spoor-step { width: clamp(1.4rem, 1.9vw, 1.9rem); }
.spoor-trail--bird .spoor-step { width: clamp(1.15rem, 1.55vw, 1.5rem); --spoor-opacity: .25; }

.has-js .spoor-step {
  opacity: 0;
  animation: madisa-spoor-step 11s cubic-bezier(.2, .7, .2, 1) infinite;
  animation-delay: calc(var(--step) * .52s);
  animation-play-state: paused;
}

.has-js .spoor-trail.is-walking .spoor-step { animation-play-state: running; }

@keyframes madisa-spoor-step {
  0%, 6% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(.78) scaleX(var(--sx, 1)) scaleY(var(--sy, 1)); }
  11%, 55% { opacity: var(--spoor-opacity); transform: translate(-50%, -50%) rotate(var(--r)) scale(1) scaleX(var(--sx, 1)) scaleY(var(--sy, 1)); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(1) scaleX(var(--sx, 1)) scaleY(var(--sy, 1)); }
}

@media (max-width: 760px) {
  .journal-mark { opacity: .075; }
  .journal-mark--landscape-low,
  .journal-mark--landscape-low-left,
  .journal-mark--landscape-high { width: 42rem; max-width: none; }
  .spoor-trail { opacity: .72; }
  .spoor-trail--upper-left-cross,
  .spoor-trail--upper-center-cross,
  .spoor-trail--bird-hop,
  .spoor-trail--dark-cross,
  .spoor-trail--lower-right-cross { width: 18rem; height: 7rem; }
  .spoor-trail--elephant .spoor-step { width: 3.15rem; }
  .spoor-step:nth-child(n + 5) { display: none; }

  .journal-mark--boulders,
  .journal-mark--campfire,
  .journal-mark--elephant,
  .journal-mark--mopane,
  .journal-mark--tent { width: 18rem; }

  .journal-mark--ridge { width: 32rem; max-width: none; }
  .journal-mark--kettle { width: 10rem; }
  .journal-mark--springbok { width: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .spoor-step {
    animation: none !important;
    opacity: var(--spoor-opacity);
    transform: translate(-50%, -50%) rotate(var(--r)) scaleX(var(--sx, 1)) scaleY(var(--sy, 1));
  }
}

@media (forced-colors: active) {
  .journal-mark,
  .spoor-trail { display: none; }
}