/* ---------- decor ---------- */

/* hand-drawn squiggle after section titles */
.squiggle::after{content:"";display:inline-block;width:46px;height:12px;margin-left:14px;vertical-align:middle;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cpath d='M2 7c4-5 7-5 10 0s6 5 10 0 6-5 10 0 6 5 10 0' fill='none' stroke='%23F5B700' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- «seam»: the juniper branch (the only plant on the site) ----------
   Rules (user, 06.11.2026): the branch grows in from beyond the screen edge, never covers content
   and is never covered itself. So it lives in its OWN empty band between two sections:
   - the band is full width and exactly as tall as the branch → nothing can overlap it;
   - the cut end of the stem (left side of assets/img/branch-h.webp) is pushed off-screen;
   - the leafy tip reaches into the page.
   Markup: <div class="seam seam-l|seam-r [flip]" aria-hidden="true"><img …branch-h…></div>
   Variants: seam-l / seam-r = from the left / right edge; flip = mirrored vertically (different silhouette). */
.seam{--h:clamp(130px,15vw,260px);position:relative;height:var(--h);overflow:hidden;pointer-events:none}
.seam img{position:absolute;top:0;height:100%;width:auto;max-width:none}
.seam-l img{left:0;transform:translateX(-20%)}
.seam-r img{right:0;transform:translateX(20%) scaleX(-1)}
.seam-l.flip img{transform:translateX(-20%) scaleY(-1)}
.seam-r.flip img{transform:translateX(20%) scale(-1,-1)}
/* the section after a seam doesn't need its own top gap — the seam is the gap */
.seam+section,.seam+.page-head,.seam+div>section{padding-top:clamp(8px,1.5vw,20px)}

/* ink doodles */
.step-ink{display:block;height:72px;width:auto;margin:0 0 12px;opacity:.85}
.head-ink{position:relative}
.title-ink{position:absolute;left:calc(100% + 22px);bottom:0;width:110px;height:auto;opacity:.85;pointer-events:none}
.doodle-img{position:absolute;pointer-events:none;height:auto;z-index:6}

/* hand-drawn doodle under a handwritten note */

@media (max-width:720px){
  .seam{--h:96px}
  .seam-l img{transform:translateX(-30%)}
  .seam-r img{transform:translateX(30%) scaleX(-1)}
  .seam-l.flip img{transform:translateX(-30%) scaleY(-1)}
  .seam-r.flip img{transform:translateX(30%) scale(-1,-1)}
  .squiggle::after{width:34px;margin-left:10px}
  .step-ink{height:44px}
}
@media (max-width:1100px){ .title-ink{display:none} }
/* the first branch hangs a little lower — the search card above it needs air */
.seam-low{margin-top:clamp(28px,5vw,80px)}