/* ===================================================================
   little-ninjas popup. Everything scoped under .ln- so it cannot touch
   the page it sits on. Production: one small CSS file + one JS file,
   enqueued on location pages only.
   =================================================================== */
.ln-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9980;background:rgba(14,20,48,.86);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.ln-scrim.on{opacity:1;pointer-events:auto}
.ln-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9990;display:none;align-items:center;justify-content:center;
  /* headroom for the mascot at the high end of the edge */
  padding:max(70px,env(safe-area-inset-top,0px)) 16px max(24px,env(safe-area-inset-bottom,0px));overflow-y:auto}
/* the photo and the circle break OUT of the frame, so the frame needs margin
   to break into - without it they run off a phone's edge */
@media (max-width:520px){.ln-wrap{padding-left:20px;padding-right:20px}}
.ln-wrap.on{display:flex}

/* NO CARD. The lightbox is the camps sticker itself: the yellow-edged shape
   with the photo in it, and the blue circle breaking out of its corner. Nothing
   white, nothing rectangular - the copy sits on the picture. */
/* The shape grows; the copy does not. Type is sized against the viewport, not
   the card, and the text block is capped - so a bigger sticker buys air around
   the content rather than bigger content. */
.ln{position:relative;width:100%;max-width:min(1140px,92vw);background:transparent;opacity:0;
  transform:translateY(20px) scale(.985);
  transition:transform .34s var(--ease),opacity .34s var(--ease)}
.ln-wrap.on .ln{transform:none;opacity:1}

/* the edge cycles the brand palette - yellow, pink, blue, lilac - slowly
   enough to read as a colour shift rather than a flashing border. Falls
   back to plain yellow when animations are off. */
@keyframes lnEdge{
  0%,100%{background-color:var(--yellow)}
  25%{background-color:var(--pink)}
  50%{background-color:var(--blue)}
  75%{background-color:var(--lilac)}
}
.ln-shape{animation:lnEdge 16s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ln-shape{animation:none}}
.ln-shape{position:relative;background:var(--yellow);padding:14px;min-height:clamp(440px,68vh,720px);
  clip-path:url(#lnSil);-webkit-clip-path:url(#lnSil);
  filter:drop-shadow(0 26px 46px rgba(14,20,48,.5))}
/* The picture fills the shape rather than setting its height, so the sticker
   grows with whatever copy is in it. Pinning the copy to a fixed-height photo
   made it spill out the top on a narrow screen. */
.ln-pic{position:absolute;top:10px;right:10px;bottom:10px;left:10px;background:var(--navy);
  clip-path:url(#lnSil);-webkit-clip-path:url(#lnSil);overflow:hidden}
/* The picture fills the frame and the silhouette crops it. The baby is already
   composed into the right third of the image, so no object-position juggling:
   he lands beside the copy, not behind it. */
.ln-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
/* the copy has to read over a photograph, so the picture darkens beneath it -
   downwards on a phone, and towards the text column on a wide screen */
.ln-pic::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg,rgba(14,20,48,0) 14%,rgba(14,20,48,.6) 42%,rgba(14,20,48,.94) 74%)}
@media (min-width:700px){
  .ln-pic::after{background:
    linear-gradient(100deg,rgba(14,20,48,.95) 30%,rgba(14,20,48,.72) 52%,rgba(14,20,48,.15) 78%),
    linear-gradient(180deg,rgba(14,20,48,.3) 0%,rgba(14,20,48,.55) 100%)}
}

/* The interior of the silhouette is narrower than its bounding box - the left
   edge leans in at the top, the right at the bottom. These insets keep every
   line inside the yellow; the smaller ones let the copy run over the edge. */
/* Padding is measured, not guessed. The largest rectangle that actually fits
   inside the silhouette sits at 12% / 16.6% / 10.6% / 11.7% (left/top/right/
   bottom of the shape); everything below is that plus an even 4% gutter, so
   the copy keeps the same air from every edge. The wide layout only opens the
   right side further, to leave the child a column of her own. */
.ln-copy{position:relative;z-index:3;color:#fff;padding:56% 17% 20% 17%}
/* 80px of clear space from the yellow on the top, left and bottom. The edges
   lean, so the padding is 80 plus whatever the slant eats at that side - the
   numbers after the + are measured, not guessed. */
@media (min-width:700px){
    /* measured to the VISIBLE inner edge of the picture, not the outer yellow */
  /* 80px padding + 100px margin on the top, left and bottom - 180px of clear
     space to the visible edge, plus the slant allowance measured per side. */
  /* bottom trimmed by the 57px that pixel-measuring found: element boxes carry
     line-height leading, so equal padding did not mean equal visible space */
  .ln-copy{--slant-t:130px;--slant-l:61px;--slant-b:-19px;--gap:120px;
    padding:calc(var(--gap) + var(--slant-t)) 34% calc(var(--gap) + var(--slant-b)) calc(var(--gap) + var(--slant-l))}
  .ln-copy .ln-ans{max-width:446px}
}
/* One rhythm between blocks. Reset first, then the gap - both at the same
   specificity, so the order is what decides, and a per-element margin further
   down the file would silently win otherwise. */
.ln-copy .ln-ans > *{margin:0}
.ln-copy .ln-ans > * + *{margin-top:clamp(16px,1.6vw,22px)}
@media (max-width:699px){
  .ln-copy .ln-ans > * + *{margin-top:11px}
  /* the silhouette's slants leave a narrow usable area on a phone-width
     card, so the copy is set a step smaller there */
  .ln-copy h2{font-size:21px}
  .ln-copy p.lead{font-size:13.5px;line-height:1.4}
  .ln-q{font-size:13px}
  .ln-foot{font-size:11px}
  .ln-cta .btn{padding:11px 14px;font-size:13.5px}
  /* the corners cut in, so the first and last lines - which sit nearest
     them - step in to follow the shape */
  /* the photo is composed with the baby in its right third, which suits a wide
     card; a narrow one crops to his shoulder, so the crop moves across */
  .ln-pic img{object-position:76% 34%}
  /* and the sticker stops being taller than its contents need */
  .ln-shape{min-height:clamp(340px,50vh,520px)}
  .ln-copy .eyebrow{margin-left:7%}
  .ln-foot{margin-left:10%}
}
/* Below about 380px the sloping base leaves no room for a line under the
   button. The button itself carries the message, so the reassurance goes
   rather than being pushed outside the shape. */
@media (max-width:380px){
  .ln-foot{display:none}
  /* the top corner cuts in further at this width too */
  .ln-copy{padding-top:60%}
  .ln-copy .eyebrow{margin-left:11%}
}
/* the eyebrow's dash is a pseudo-element hanging left of its text box, so it
   sits outside everything the padding measures and the slant clips it. The
   camps sticker has no dash either. */
/* the eyebrow's own dash is a pseudo-element hanging left of its text box,
   outside anything padding can contain, so it stays off. The brand rule
   sits UNDER the line instead, where the slant can't reach it. */
.ln-copy .eyebrow{display:inline-block;color:#fff;opacity:.95;margin:0;padding:0 0 11px;
  border-bottom:3px solid var(--pink)}
.ln-copy .eyebrow::before,.ln-copy .eyebrow::after{display:none}
.ln-copy h2{color:#fff;font-size:clamp(25px,3.6vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:0}
.ln-copy h2 i{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--yellow)}
.ln-copy p.lead{font-size:clamp(15px,1.35vw,17.5px);line-height:1.5;color:rgba(255,255,255,.88);max-width:36ch}
.ln-q{font-weight:800;font-size:clamp(14.5px,1.2vw,16px);margin:0}
.ln-chips{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
.ln-chips button{font-family:inherit;font-weight:800;font-size:clamp(13.5px,1.1vw,15px);padding:clamp(11px,1.3vw,16px) 8px;border-radius:14px;
  border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  transition:background .15s,border-color .15s,transform .12s}
.ln-chips button:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px)}
.ln-chips button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.ln-chips button b{display:block;font-size:clamp(15px,1.3vw,17px);white-space:nowrap}
.ln-chips button span{display:block;font-size:11px;font-weight:700;opacity:.8;margin-top:2px;line-height:1.25}
/* left-aligned with the copy and the button above it, not centred */
.ln-foot{font-size:clamp(12px,1vw,13.5px);color:rgba(255,255,255,.72);text-align:left}

/* The mascot sits on the top-left edge. The edge runs 15.6%,26.2% -> 84.6%,
   12.7% of the shape (the clip maps x/1536, y/1024 of the box, NOT the path's
   own bounding box - measuring against the bbox is out by ~90px). He is tipped
   to the edge's slope so he sits on it rather than beside it. */
/* ON the edge, not in it: his feet rest on the border with only a few pixels
   of overlap, so the whole figure sits above the line. Measured, because the
   amount to raise him by differs between the wide and narrow cards. */
.ln-sit{position:absolute;z-index:6;left:37%;top:5.6%;
  width:clamp(66px,8%,118px);height:auto;pointer-events:none;
  /* the wrapper is NOT rotated: a rotated box's bounding rect is taller than
     the artwork, so measuring it put his feet lower than they look and the
     seating maths floated him. The tilt lives on the image inside. */
  transform:translate(-50%,0);
  filter:drop-shadow(0 10px 14px rgba(14,20,48,.45))}
.ln-sit img{width:100%;height:auto;display:block;transform:rotate(-8.5deg);transform-origin:50% 90%}
@media (max-width:699px){.ln-sit{left:47%;top:3.4%;width:20%}}

/* The age down the wedge the slanted edge leaves: each word on its own line,
   read normally, stacked. Sized so the longest word fits the wedge without
   touching the drawn border. */
.ln-x{position:absolute;z-index:6;top:6%;right:12%;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(14,20,48,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.ln-x:hover{background:var(--ink)}
.ln-x:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* answers, same place as the question */
.ln-ans{display:none}
.ln-ans.on{display:block;animation:lnIn .3s var(--ease)}
@keyframes lnIn{from{opacity:0;transform:translateY(8px)}}
.ln-ans h3{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px;color:#fff}
.ln-ans h3 i{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--yellow)}
.ln-ans p{margin:0 0 12px;color:rgba(255,255,255,.88);font-size:14.5px;line-height:1.45}
.ln-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.ln-list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.4;color:rgba(255,255,255,.92)}
.ln-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-top:6px}
/* the bottom corners lean in, so a full-width control low in the card would
   reach into the slant - it sits a touch narrower, flush left with the copy */
.ln-cta .btn{width:92%;margin-left:0;margin-right:auto;justify-content:center}
.ln-note{margin:10px 0 0;font-size:12.5px;color:rgba(255,255,255,.72);text-align:center}
.ln-back{background:none;border:0;color:rgba(255,255,255,.75);font:700 12.5px var(--f);cursor:pointer;padding:6px 2px;text-decoration:underline}
.ln-form{display:grid;gap:9px}
.ln-row{display:grid;gap:9px;grid-template-columns:1fr 1fr}
.ln-form label{display:block;font-size:12px;font-weight:800;color:rgba(255,255,255,.8);margin-bottom:3px}
.ln-form select,.ln-form input{width:100%;border:2px solid rgba(255,255,255,.4);border-radius:11px;padding:10px 11px;
  font-family:inherit;font-size:16px;color:var(--ink);background:#fff}
.ln-form select:focus,.ln-form input:focus{outline:3px solid var(--yellow);outline-offset:1px}
.ln-err{display:none;color:#FFD3E4;font-size:13px;font-weight:800}
.ln-err.on{display:block}
.ln-done{text-align:center}
.ln-done .big{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:26px;color:var(--yellow);margin:0 0 6px}

@media (max-width:430px){.ln-chips{grid-template-columns:1fr}.ln-chips button{display:flex;gap:8px;align-items:baseline;justify-content:center}.ln-chips button span{margin:0}}
@media (prefers-reduced-motion:reduce){.ln,.ln-ans,.ln-scrim{transition:none!important;animation:none!important}}