/* ==========================================================================
   REFINEMENT PASS
   Loaded last. Everything here is a focused correction on the approved design,
   never a redesign.
   ========================================================================== */

/* ==========================================================================
   1 · THE HERO HEADLINE IS THE OPENING STATEMENT
   It read as a normal heading. It now carries the page: larger, tighter, with
   the brand's own name lifted into colour and set on its own line so the eye
   lands on it first.
   ========================================================================== */
.hero-head{
  font-size:clamp(2.9rem,7vw,5.4rem);
  line-height:.98;
  letter-spacing:-.035em;
  margin-top:1.3rem;
  text-wrap:balance}

/* "Miss Kelly's" is the part that matters, so it gets the colour and the size */
.hero-head .w:nth-child(3),
.hero-head .w:nth-child(4){
  color:var(--pink);
  text-shadow:0 3px 0 rgba(176,26,82,.16)}

/* the whole line sits on a soft halo so it reads on any part of the table */
.hero-in{position:relative}
.hero-in::before{content:"";position:absolute;left:50%;top:calc(var(--nav-h) + 1rem);
  width:min(46rem,96%);height:min(24rem,46%);transform:translateX(-50%);
  background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(255,252,246,.82) 0%,rgba(255,252,246,.5) 48%,rgba(255,252,246,0) 78%);
  pointer-events:none;z-index:-1;border-radius:50%}

/* the eyebrow above it reads as a sticker on the table */
.hero-in .eyebrow{font-size:.86rem;padding:.55rem 1.3rem;
  box-shadow:0 4px 0 rgba(51,40,74,.10), 0 12px 24px rgba(51,40,74,.14)}

/* the felt words gain weight so the three ideas register */
#feltWords .felt{font-size:clamp(1.05rem,2.3vw,1.7rem);letter-spacing:.12em}

/* ==========================================================================
   2 · KELLY HAS REAL PRESENCE
   Larger, still lower right, still clear of every word. The lane grows with her
   so the copy column shrinks to match and the two can never meet.
   ========================================================================== */
.hero-table{--lane:clamp(250px,27vw,400px)}
.standee{
  right:max(1rem, calc(var(--lane) * .05));
  width:clamp(240px,25vw,360px)}
.standee .speech{max-width:calc(var(--lane) + 1rem);font-size:.96rem}

@media (max-width:1100px){
  .hero-table{--lane:clamp(190px,24vw,260px)}
  .standee{width:clamp(185px,23vw,250px)}
}
@media (max-width:900px){
  .standee{width:min(280px,66vw)}
}

/* ==========================================================================
   3 · THE DECORATION READS AGAIN
   Measured: it was never missing, 36 to 44 elements sat in every section. It
   was simply too faint to notice against the new colour grounds. The shapes are
   now larger and fuller; the letters stay quiet, which is what was asked.
   ========================================================================== */
.u-rainbow{opacity:.9}
.u-cloud{opacity:1;filter:drop-shadow(0 6px 12px rgba(51,40,74,.10))}
.u-star{filter:drop-shadow(0 3px 6px rgba(51,40,74,.14))}
.u-spark{opacity:.9}
.u-balloon{opacity:.95}

/* they scale up a little so they register as shapes rather than specks */
.u-layer .u-rainbow{transform-origin:center;scale:1.25}
.u-layer .u-star{scale:1.35}
.u-layer .u-cloud{scale:1.2}
.u-layer .u-spark{scale:1.3}

/* the letters stay the quiet texture layer they were asked to be */
.u-letter{color:rgba(51,40,74,.085) !important}

/* the decoration must never sit on a reading column: a soft veil keeps the
   middle of the screen calm while the edges stay lively */
.u-veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 62% at 50% 50%,
    rgba(255,249,241,.72) 0%, rgba(255,249,241,.34) 52%, rgba(255,249,241,0) 78%)}

/* ==========================================================================
   4 · READY TO BRING AN ADVENTURE TO LIFE
   Was a plain white panel. Now a warm invitation with a curved ground, a
   layered shape behind it and the mascot leaning in from the side.
   ========================================================================== */
.bridge-panel{
  position:relative;overflow:visible;
  background:linear-gradient(140deg,#FFF3D9 0%,#FFE3EC 52%,#E4F1FD 100%);
  border-radius:44px;
  box-shadow:0 8px 0 rgba(51,40,74,.08), var(--shadow-soft-lg);
  padding:clamp(2.2rem,4.6vw,3.4rem) clamp(1.6rem,4vw,3rem);
  padding-left:clamp(1.6rem,4vw,3rem)}
.bridge-panel::before{content:"";position:absolute;right:-30px;top:-40px;
  width:220px;height:220px;border-radius:50%;
  background:rgba(255,79,147,.12);pointer-events:none;z-index:0}
.bridge-panel::after{content:"";position:absolute;left:-40px;bottom:-40px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(61,196,185,.14);pointer-events:none;z-index:0}
.bridge-panel > *{position:relative;z-index:1}
.bridge-panel .h3{font-size:clamp(1.5rem,2.8vw,2.2rem);margin-bottom:.2rem}
.bridge-panel p{font-size:1.06rem;color:var(--ink);opacity:.82}
.bridge-panel .btn{font-size:1.06rem;padding:1.05rem 2.2rem}

.bridge-mascot{position:absolute;left:-1.5rem;bottom:-.5rem;
  width:clamp(96px,11vw,150px);z-index:2;pointer-events:none}
.bridge-mascot img{width:100%;filter:drop-shadow(0 12px 18px rgba(51,40,74,.2))}
.in-motion .bridge-mascot img{animation:mascot-peek 6s ease-in-out -1s infinite}
@keyframes mascot-peek{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-10px) rotate(2deg)}}

@media (min-width:901px){
  .bridge-panel{padding-left:clamp(9rem,15vw,12rem);text-align:left}
  .bridge-panel .btn{margin-top:.4rem}
  .bridge-mascot{left:1.5rem;bottom:0}
}
@media (max-width:900px){
  .bridge-panel{padding-top:5.5rem}
  .bridge-mascot{left:50%;top:-2.5rem;bottom:auto;transform:translateX(-50%);
    width:clamp(88px,22vw,120px)}
}

/* ==========================================================================
   5 · THE FOUR ADVENTURE CARDS SIT ON ONE GRID
   They were different heights because the copy lengths differ. The grid now
   stretches every card to the tallest, the image area is a fixed ratio so all
   four crops match, and the buttons are pushed to a shared baseline.
   ========================================================================== */
.adv-grid{align-items:stretch}
.adv{height:100%;display:flex;flex-direction:column}
/* …but only while every card is shut. `.has-open` is set by site.js the moment
   a category expands. Without releasing the stretch there, the grid row forces
   the neighbouring card to match the open one, which is the tall empty white
   block that appeared beside an opened adventure. */
.adv-grid.has-open{align-items:start}
.adv-grid.has-open .adv{height:auto}
.adv-art{aspect-ratio:16/10;flex:0 0 auto;overflow:hidden}
.adv-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.adv-body{flex:1 1 auto;display:flex;flex-direction:column}
.adv-body h3{min-height:2.4em;display:flex;align-items:flex-end}
.adv-body > p{flex:0 0 auto}
.adv-panel{flex:0 0 auto}
.adv-actions{margin-top:auto;padding-top:1rem}

/* Breathing room under "Close Adventures" before the list begins. Measured at
   0 px before this: .tag-label carries no top margin, so the label sat flush
   against the button in all four categories.

   It belongs on the panel's inner container, not on the button and not on the
   label:

     · margin-bottom on .adv-actions would apply while the card is SHUT too.
       The button is pushed to a shared baseline with margin-top:auto, so that
       would make every closed card taller and break the equal-height row.
     · margin-top on .tag-label would leak — the same class labels
       "ACTIVITY HIGHLIGHTS" inside every adventure item.
     · padding-top on the panel's inner box looks right but is NOT clipped:
       grid-template-rows:0fr zeroes the CONTENT height, and padding sits
       outside that, so every shut card grew by exactly the padding — measured
       700 → 726 px, which breaks the equal-height row.

   So it goes on the first block INSIDE the clipping box. overflow:hidden
   makes that box a block formatting context, so the margin cannot collapse
   outward; while the panel is shut the box is 0 high and the margin is
   clipped with everything else. One rule, all four categories, animating on
   the panel's own transition, and :first-child rather than .tag-label so it
   holds whatever content a panel starts with — and so it cannot leak onto the
   "ACTIVITY HIGHLIGHTS" labels that use the same class inside each item. */
.adv-panel > div > :first-child{margin-top:clamp(1.15rem, 2.4vw, 1.6rem)}

/* ==========================================================================
   6 · ABOUT MISS KELLY
   ========================================================================== */
/* 7 · the greeting carries the brand's own pink */
.hi-kelly{color:var(--pink);position:relative;display:inline-block}
.hi-kelly::after{content:"";position:absolute;left:0;right:0;bottom:-.16em;height:.22em;
  border-radius:99px;
  background:linear-gradient(90deg,var(--yellow),var(--orange) 45%,var(--pink));
  opacity:.5}

/* 8 · the frame moves from blue to a pink and rose gradient */
.about-art .frame{
  background:linear-gradient(140deg,#FF9CC4 0%,var(--pink) 38%,#E0559B 68%,#C77BE0 100%);
  padding:12px;
  box-shadow:0 10px 0 rgba(176,26,82,.14), var(--shadow-soft-lg)}
.about-art .frame::before{content:"";position:absolute;inset:-14px;z-index:-1;
  border-radius:inherit;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(255,79,147,.2),rgba(255,79,147,0) 70%)}
.about-art{position:relative}

/* 9 · the mascot beside the image, overlapping the corner */
.about-mascot{position:absolute;right:-1rem;bottom:-2rem;
  width:clamp(92px,11vw,146px);z-index:3;pointer-events:none}
.about-mascot img{width:100%;filter:drop-shadow(0 12px 18px rgba(51,40,74,.22))}
.in-motion .about-mascot img{animation:mascot-peek 6.8s ease-in-out -3s infinite}

@media (max-width:900px){
  .about-mascot{right:.5rem;bottom:-1.5rem;width:clamp(80px,20vw,110px)}
}

/* ==========================================================================
   10 · REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .in-motion .bridge-mascot img,
  .in-motion .about-mascot img{animation:none}
}

/* the grid stretched each row to its own tallest card, so row one came out 52px
   taller than row two. Equal rows makes all four match, not just the pairs —
   and is switched off again while a category is open, for the same reason as
   the stretch above. */
.adv-grid{grid-auto-rows:1fr}
.adv-grid.has-open{grid-auto-rows:auto}

/* The line broke as "Welcome / to Miss / Kelly's World", which split the pink
   name across two lines. Narrowing the measure lets it fall as three clean
   lines with "Miss Kelly's" held together. ch resolves against the display
   face here because it is set on the heading itself, not on a container. */
.hero-head{max-width:14ch;margin-inline:auto}
@media (max-width:900px){ .hero-head{max-width:12ch} }

/* balance spread the words evenly and split the pink name across two lines.
   Greedy wrapping with a measure that fits "Miss Kelly's" but not
   "Welcome to Miss" puts the name on its own line, every time. */
.hero-head{text-wrap:normal;max-width:12.5ch}
@media (max-width:900px){ .hero-head{max-width:11.5ch} }

/* text-wrap:normal did not switch balancing off: Chrome treats text-wrap as a
   shorthand over text-wrap-mode and text-wrap-style, and the style half kept
   its balanced value. The longhand turns it off for good. With plain greedy
   wrapping in the 582px column the line falls as
   "Welcome to" / "Miss Kelly's" / "World", which keeps the pink name whole. */
.hero-head{text-wrap-mode:wrap;text-wrap-style:auto}

/* ==========================================================================
   CONTRAST FIX
   The brand pink measured 2.96 on the hero table and 2.76 behind the greeting,
   both just under the 3:1 floor for large text. A slightly deeper pink keeps
   the same warmth and clears it: 3.3 and 3.5 measured on those two grounds.
   Used only where pink carries words; every pink surface stays untouched.
   ========================================================================== */
:root{--pink-text:#EE2A73}
.hero-head .w:nth-child(3),
.hero-head .w:nth-child(4){color:var(--pink-text)}
.hi-kelly{color:var(--pink-text)}

/* The mascot sits inside .about-art, so it was caught by the portrait rule
   `.about-art img{aspect-ratio:5/4;object-fit:cover}`. That squashed her to a
   landscape box and cropped away the lower half: 117px shown of the 219px she
   needs. She keeps her own proportions now. */
.about-mascot img{
  aspect-ratio:auto !important;
  object-fit:contain !important;
  height:auto !important;
  width:100%}

/* ==========================================================================
   THE SECTION GROUNDS LET THE DECORATION THROUGH
   Measured: 47 shapes in view and 47 of them buried, in every section. The
   sections sit at z-index 2 with opaque grounds and the decoration layer is
   fixed at z-index 0, so every ground painted straight over it. The stars only
   ever appeared in the gaps between sections, which is exactly what "only at
   the start of a section" looks like.
   The colour blocking stays; the grounds simply carry alpha now, so the fixed
   layer reads through them. Cards and panels stay solid on purpose: decoration
   belongs behind the page, not inside a reading surface.
   ========================================================================== */
.sec-tint{background:color-mix(in srgb, var(--tint) 80%, transparent)}

#adventures{background:linear-gradient(180deg,
  rgba(219,245,242,0) 0%, rgba(219,245,242,.80) 22%,
  rgba(219,245,242,.80) 78%, rgba(219,245,242,0) 100%)}

#freebies{background:linear-gradient(180deg,
  rgba(255,241,210,0) 0%, rgba(255,241,210,.82) 18%,
  rgba(255,229,210,.82) 82%, rgba(255,229,210,0) 100%)}

#about{background:linear-gradient(180deg,
  rgba(255,241,210,0) 0%, rgba(255,241,210,.80) 20%,
  rgba(255,229,210,.80) 80%, rgba(255,229,210,0) 100%)}

#contact{background:linear-gradient(180deg,
  rgba(219,245,242,0) 0%, rgba(219,245,242,.82) 24%,
  rgba(226,245,252,.86) 100%)}

/* the curved top edge inherits the translucent ground, so the seam still reads */
.sec-tint::before{background:inherit}

/* ==========================================================================
   11 · SHOP TEASER AND THE CONTACT PRIVACY NOTE
   ========================================================================== */
/* the "coming soon" chip above the shop heading */
.shop-badge{display:inline-block;font-family:var(--display);font-weight:600;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--pink-btn);
  padding:.42rem .95rem;border-radius:999px;margin-bottom:1rem;
  box-shadow:0 3px 0 rgba(168,16,73,.55)}

/* the notice under the send button. Quiet on purpose: it informs, it is not a
   gate, and it must not compete with the button above it. */
.form-privacy{margin:1rem 0 0;font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.form-privacy a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:2px}
.form-privacy a:hover{text-decoration-thickness:2px}

/* honeypot: present for Netlify, never shown to a person */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   12 · THREE CORRECTIONS ASKED FOR AFTER THE FIRST FULL REVIEW
   ========================================================================== */

/* --- "Ready to bring an adventure to life" was half-centred -------------
   The desktop rule pushed the whole panel's text left to clear the mascot,
   while the heading above it stayed centred — so the block read as broken
   rather than as a choice. Everything is centred now and the mascot sits
   above the text instead of beside it, where it cannot pull the layout. */
@media (min-width:901px){
  .bridge-panel{padding-left:clamp(1.6rem,4vw,3rem);text-align:center;
    padding-top:12rem}
  .bridge-panel .btn{margin-top:.9rem}
  .bridge-mascot{left:50%;top:-3.4rem;bottom:auto;
    transform:translateX(-50%);width:clamp(104px,11vw,150px)}
}
/* and it earns a little more presence: a slow breathing glow behind it */
.bridge-panel{overflow:visible}
.bridge-panel::before{width:280px;height:280px;right:-60px;top:-70px;
  background:rgba(255,79,147,.16)}
.bridge-panel::after{width:240px;height:240px;left:-60px;bottom:-60px;
  background:rgba(61,196,185,.18)}
.in-motion .bridge-panel::before{animation:bridge-breathe 9s ease-in-out infinite}
.in-motion .bridge-panel::after{animation:bridge-breathe 11s ease-in-out -3s infinite}
@keyframes bridge-breathe{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.14);opacity:.72}}

/* --- pictures inside an adventure ----------------------------------------
   An adventure card is one column of a two-column grid, about 500 px of
   usable width, so a row of four would be postage stamps. Instead: pictures
   marked wide run the full width at 16:9, the rest sit two to a row at 4:3.
   The aspect ratios are fixed so the open accordion never jumps while the
   pictures load. */
.adv-pics{list-style:none;margin:.9rem 0 1rem;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.adv-pics li{margin:0;border-radius:14px;overflow:hidden;
  background:var(--cream);box-shadow:0 2px 8px rgba(51,40,74,.10);
  aspect-ratio:4/3}
.adv-pics li.wide{grid-column:1 / -1;aspect-ratio:16/9;border-radius:18px}
.adv-pics li.tall{aspect-ratio:3/4}
.adv-pics img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.adv-pics li:hover img{transform:scale(1.035)}
@media (prefers-reduced-motion: reduce){
  .adv-pics li:hover img{transform:none}
}

/* --- the two service cards, balanced -------------------------------------
   .svc is a 0.9fr / 1.1fr grid and every second card moves its picture to the
   right with order:2 — which drops it into the WIDER column. Measured on
   desktop: the first picture came out 499 px wide and the second 614 px. With
   three cards the alternation read as rhythm; with exactly two it just looks
   like a mistake.

   Mirroring the columns on the even card keeps the existing proportions — the
   text column stays the wide one, the picture stays the narrow one — and both
   pictures end up identical. The breakpoint matches the one in site.css that
   collapses these rows to a single column. */
@media (min-width:961px){
  .svc:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}

/* --- the shop: a coming-soon, not a catalogue ---------------------------
   The four category cards are gone. They named four ranges the shop cannot
   yet promise, and their styling went with them. What is left is one
   composition: an abstract papercraft parcel and four short lines. */
.shop-soon{
  /* capped and centred: the copy is four short lines and a full-width panel
     around it just reads as a lot of empty pink */
  max-width:58rem;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center;gap:clamp(1.4rem,4vw,3.4rem);
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--pink-soft) 66%, #fff) 0%,
    color-mix(in srgb, var(--lavender-soft, #EFE9FB) 60%, #fff) 100%);
  border-radius:var(--r-lg,28px);
  padding:clamp(1.6rem,4vw,3.2rem);
  box-shadow:var(--shadow-soft);
  position:relative;overflow:hidden}

/* two soft brand shapes, the same decoration language as the bridge panel */
.shop-soon::before,
.shop-soon::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.shop-soon::before{width:260px;height:260px;right:-70px;top:-90px;background:rgba(255,79,147,.14)}
.shop-soon::after{width:220px;height:220px;left:-70px;bottom:-80px;background:rgba(61,196,185,.16)}

.shop-art{position:relative;display:grid;place-items:center;min-height:190px}
.shop-glow{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,194,75,.42) 0%, rgba(255,194,75,.16) 46%, rgba(255,194,75,0) 72%)}
.shop-parcel{position:relative;width:min(100%,240px);height:auto;
  filter:drop-shadow(0 14px 20px rgba(51,40,74,.18))}

/* the movement: the lid lifts a little, the sparkles drift, and that is all */
@keyframes shop-lid{0%,100%{transform:translateY(0) rotate(0)}
                    50%{transform:translateY(-7px) rotate(-1.6deg)}}
@keyframes shop-spark{0%,100%{transform:translateY(0);opacity:.9}
                      50%{transform:translateY(-6px);opacity:.55}}
.shop-parcel .p-lid{transform-origin:50% 100%;animation:shop-lid 4.6s ease-in-out infinite}
.shop-parcel .p-spark{animation:shop-spark 3.4s ease-in-out infinite}

.shop-say{text-align:left}
.shop-say .h2{margin:.5rem 0 0}
.shop-say .lede{margin-top:.9rem;font-weight:600}
.shop-hint{margin:.7rem 0 0;color:var(--ink-soft);font-size:1rem;line-height:1.6;
  max-width:34rem}

#shop .shop-badge{font-size:.86rem;padding:.55rem 1.25rem;
  box-shadow:0 4px 0 rgba(168,16,73,.5)}

@media (max-width:760px){
  .shop-soon{grid-template-columns:1fr;text-align:center}
  .shop-say{text-align:center}
  .shop-hint{margin-inline:auto}
  .shop-art{order:-1;min-height:150px}
  .shop-parcel{width:min(72%,180px)}
}

/* --- the social icons ---------------------------------------------------
   Two round tap targets side by side. Instagram is a real link; Facebook is
   present but inert until its page exists, so it is dimmed, carries a small
   "soon" chip and does not respond to a hover the way a live link does. */
.soc-row{list-style:none;margin:2.1rem 0 0;padding:0;
  display:flex;gap:clamp(1.6rem,4vw,2.8rem);align-items:flex-start;
  justify-content:center;flex-wrap:wrap}
.soc-row li{display:grid;justify-items:center;gap:.85rem}

.soc{position:relative;display:grid;place-items:center;
  width:84px;height:84px;border-radius:50%;
  background:#fff;color:var(--pink-ink,#C2185B);
  box-shadow:0 5px 0 rgba(51,40,74,.13), var(--shadow-soft);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease),
             background-color .28s var(--ease), color .28s var(--ease)}
.soc svg{width:42px;height:42px}

/* All three behave identically — same lift, same tilt, same scale — and each
   takes one CI colour on hover so the row still reads as playful rather than
   as three borrowed brand logos. Facebook's inert state and its "soon" chip
   are gone: the page exists now. */
.soc:hover,
.soc:focus-visible{
  transform:translateY(-5px) rotate(-5deg) scale(1.06);
  color:#fff;
  box-shadow:0 9px 0 rgba(51,40,74,.28), var(--shadow-soft-lg)}
.soc:active{transform:translateY(-1px) rotate(-2deg) scale(1.02)}

.soc-ig:hover,.soc-ig:focus-visible{background:var(--pink);
  box-shadow:0 9px 0 rgba(168,16,73,.42), var(--shadow-soft-lg)}
.soc-fb:hover,.soc-fb:focus-visible{background:var(--blue);
  box-shadow:0 9px 0 rgba(32,74,140,.42), var(--shadow-soft-lg)}
.soc-tt:hover,.soc-tt:focus-visible{background:var(--turquoise);
  box-shadow:0 9px 0 rgba(20,120,112,.42), var(--shadow-soft-lg)}

/* The panel this sits in is a deep pink-to-purple gradient with white type
   (colour.css), so the labels are white here — dark ink on it was unreadable. */
.soc-name{font-family:var(--display);font-weight:600;font-size:.9rem;
  color:var(--ink);opacity:.8}
#main .sec-tint .panel .soc-name{color:#fff;opacity:.94}

@media (max-width:520px){
  .soc{width:68px;height:68px}
  .soc svg{width:34px;height:34px}
  .soc-row{gap:1.15rem}
}

@media (prefers-reduced-motion: reduce){
  .shop-parcel .p-lid,
  .shop-parcel .p-spark{animation:none}
  .soc:hover,.soc:focus-visible{transform:none}
}

/* --- the footer needs to be a footer ------------------------------------
   It faded from white into pale sky, which is the same family as the section
   above it, so the page just stopped rather than closing. Deep brand ink
   separates it properly; everything inside flips to light. */
.foot{background:linear-gradient(170deg,#3E3160 0%, #2B2142 100%) !important;
  border-top:0;color:#F3EEFA}
.foot-brand p{color:rgba(243,238,250,.82)}
.foot-brand img{box-shadow:0 4px 0 rgba(0,0,0,.22)}
.foot-links a{color:rgba(243,238,250,.88)}
.foot-links a:hover{color:#fff}
.foot-legal-links{border-top-color:rgba(255,255,255,.18)}
.foot-legal-links a{color:rgba(243,238,250,.72)}
.foot-legal-links a:hover{color:#fff}
.foot-copy{color:rgba(243,238,250,.6)}

/* --- the website credit -------------------------------------------------
   Understated on purpose: smaller than the copyright line above it, dimmer
   than the footer links, and only the studio name carries the link. It sits
   in the existing footer flow, so nothing above it moves. */
.foot-credit{margin:.45rem 0 0;font-size:.78rem;line-height:1.5;
  color:rgba(243,238,250,.62);letter-spacing:.01em}
.foot-credit a{color:rgba(243,238,250,.86);text-decoration:none;
  border-bottom:1px solid rgba(243,238,250,.28);
  padding-bottom:.05em;
  transition:color .25s var(--ease), border-color .25s var(--ease)}
.foot-credit a:hover,
.foot-credit a:focus-visible{color:#fff;border-bottom-color:rgba(255,255,255,.7)}

/* --- the collaboration film --------------------------------------------------
   A phone-shaped film hanging off the bottom of the blue "What Can Come
   Together" box, tilted and overlapping its edge like a photo pinned to it.
   The frame takes the pink gradient of Kelly's portrait in About, since a
   blue frame would sink into the blue box behind it. The box gets extra room
   at the bottom so the overlap never sits on its text.
   One round play button on the poster; once it plays the native controls take
   over, so sound, pause and fullscreen behave the way every phone expects. */
.collab-right{display:flex;flex-direction:column}
.collab-right .collab-side{padding-bottom:clamp(5rem,9vw,6.5rem)}
.collab-film{position:relative;z-index:2;display:flex;justify-content:flex-end;
  margin:clamp(-5.5rem,-8vw,-4rem) clamp(.5rem,3vw,2rem) 0 0}
.cf-frame{position:relative;width:min(300px,74vw);padding:9px;border-radius:30px;
  background:linear-gradient(140deg,#FF9CC4 0%,var(--pink) 38%,#E0559B 68%,#C77BE0 100%);
  box-shadow:0 8px 0 rgba(176,26,82,.16), var(--shadow-soft-lg);
  transform:rotate(4deg)}
@media (max-width:900px){
  .collab-film{justify-content:center;margin-right:0}
}
.cf-frame video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;
  border-radius:22px;background:var(--lavender-soft)}
.cf-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:var(--pink);color:#fff;
  box-shadow:0 5px 0 rgba(168,16,73,.45), 0 12px 26px rgba(51,40,74,.28);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.cf-play svg{width:28px;height:28px;margin-left:3px}
.cf-play:hover,.cf-play:focus-visible{transform:scale(1.08)}
.cf-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cf-frame.playing .cf-play{display:none}
@media (prefers-reduced-motion: reduce){ .cf-frame{transform:none} }

/* --- this month's adventure ---------------------------------------------------
   One card between the hero and "Learning the Happy Way". Picture on one side,
   the public event on the other with the strongest button on the page, and a
   quieter strip across the foot for the private option. Same ingredients as
   the shop panel: a soft two-tone gradient, two blurred brand circles, the
   rounded card radius and the stacked shadow. Halloween is only a hint: one
   paper pumpkin and two stars, all in brand colours. */
#monthly{padding-top:clamp(2.6rem,5vw,4.2rem)}
.month-card{position:relative;overflow:hidden;max-width:68rem;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.6rem,4vw,3.2rem);align-items:center;
  padding:clamp(1.4rem,3.6vw,2.8rem);
  border-radius:var(--r-card-lg);
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--orange-soft) 72%, #fff) 0%,
    color-mix(in srgb, var(--lavender-soft) 70%, #fff) 100%);
  box-shadow:0 6px 0 rgba(51,40,74,.07), var(--shadow-soft-lg)}
.month-card::before,.month-card::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.month-card::before{width:300px;height:300px;right:-90px;top:-110px;background:rgba(255,138,61,.16)}
.month-card::after{width:240px;height:240px;left:-80px;bottom:-90px;background:rgba(183,166,232,.22)}
.month-card > *{position:relative;z-index:1}

.month-deco{position:absolute;z-index:1;pointer-events:none;
  filter:drop-shadow(0 3px 4px rgba(51,40,74,.16))}
.md-1{width:26px;top:1.4rem;right:42%}
.md-2{width:18px;bottom:38%;right:1.6rem}
.md-3{width:44px;top:1.1rem;right:1.4rem;transform:rotate(10deg)}

/* the picture: a white-framed print, tilted a touch, in a fixed 4:5 frame so
   any image or flyer can be dropped in without the layout moving */
.month-art{display:flex;justify-content:center}
.month-img{width:100%;max-width:400px;aspect-ratio:4/5;border-radius:var(--r-card);
  overflow:hidden;background:#fff;border:10px solid #fff;
  box-shadow:0 8px 0 rgba(51,40,74,.08), var(--shadow-soft-lg);
  transform:rotate(-2deg);transition:transform .45s var(--ease-back)}
.month-card:hover .month-img{transform:rotate(-1deg) translateY(-4px)}
.month-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:calc(var(--r-card) - 10px)}

/* placeholder until the real picture arrives: obviously a slot, still on brand */
.month-img.is-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center;padding:1.5rem;
  background:
    repeating-linear-gradient(135deg, rgba(255,138,61,.08) 0 14px, rgba(255,138,61,0) 14px 28px),
    var(--cream);
  outline:3px dashed rgba(51,40,74,.22);outline-offset:-18px}
.ph-icon{font-size:3.4rem;line-height:1}
.ph-title{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ink)}
.ph-note{font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.6}

.month-info .h2{margin:.9rem 0 0}
.month-facts{list-style:none;margin:1.4rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.month-facts li{display:flex;align-items:center;gap:.65rem;margin:0;
  background:#fff;border-radius:var(--r-pill);padding:.45rem 1rem .45rem .45rem;
  font-family:var(--display);font-weight:600;color:var(--ink);font-size:1.02rem;
  box-shadow:0 3px 0 rgba(51,40,74,.06), var(--shadow-soft)}
.mf-ico{flex:0 0 auto;width:2.2rem;height:2.2rem;border-radius:50%;
  display:grid;place-items:center;background:var(--c,var(--pink-soft));font-size:1.05rem}

.month-spots{display:inline-flex;align-items:center;gap:.6rem;margin:1.3rem 0 0;
  font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pink-ink)}
.ms-dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--pink);
  box-shadow:0 0 0 4px rgba(255,79,147,.2)}
.in-motion .ms-dot{animation:ms-pulse 2.4s ease-in-out infinite}
@keyframes ms-pulse{0%,100%{box-shadow:0 0 0 4px rgba(255,79,147,.2)}
                    50%{box-shadow:0 0 0 8px rgba(255,79,147,.06)}}

.month-cta{display:flex;width:fit-content;margin-top:1.2rem;
  font-size:1.14rem;padding:1.1rem 2.5rem}

/* the private option: a calm white strip across the whole card */
.month-private{grid-column:1 / -1;display:flex;align-items:center;gap:1.1rem;
  background:rgba(255,255,255,.78);border-radius:var(--r-card);
  padding:1rem 1.2rem 1rem 1rem;box-shadow:var(--shadow-soft)}
.mp-ico{flex:0 0 auto;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  background:var(--lavender-soft);font-size:1.4rem}
.mp-text{flex:1 1 auto;min-width:0}
.mp-text .h3{margin:0;font-size:1.18rem}
.mp-text p{margin:.25rem 0 0;color:var(--ink-soft);font-size:.98rem;line-height:1.55}
.month-private .btn{flex:0 0 auto;padding:.8rem 1.5rem;font-size:.98rem}

@media (max-width:860px){
  .month-card{grid-template-columns:1fr;text-align:center}
  .month-img{max-width:330px}
  .month-facts{max-width:26rem;margin-inline:auto;text-align:left}
  .month-cta{margin-inline:auto}
  .month-private{flex-direction:column;text-align:center;padding:1.3rem 1.1rem}
  .md-1{right:auto;left:1.4rem}
}
@media (max-width:420px){
  .month-facts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .month-img,.month-card:hover .month-img{transition:none;transform:rotate(-2deg)}
}

/* the picture and the venue badge pinned over its top corner. .month-pic is
   the positioning box, so the badge follows the picture at every width. */
.month-pic{position:relative;width:100%;max-width:400px}
.month-pic .month-img{max-width:none}
.month-venue{position:absolute;z-index:2;top:-1.6rem;left:-1.4rem;
  width:clamp(118px,34%,150px);padding:.55rem .7rem;border-radius:1.4rem;
  background:#fff;transform:rotate(-7deg);
  box-shadow:0 6px 0 rgba(51,40,74,.10), 0 14px 26px rgba(51,40,74,.20);
  transition:transform .45s var(--ease-back)}
.month-venue img{display:block;width:100%;height:auto}
.month-card:hover .month-venue{transform:rotate(-4deg) translateY(-3px)}
@media (max-width:860px){
  .month-pic{max-width:330px}
  .month-venue{left:-.6rem;top:-1.2rem}
}
@media (prefers-reduced-motion: reduce){
  .month-venue,.month-card:hover .month-venue{transition:none;transform:rotate(-7deg)}
}

/* facts with a second line: the venue's address (links to the map) and the
   two time slots. Both span the full width of the facts grid. */
.month-facts .mf-wide{grid-column:1 / -1;border-radius:1.6rem;padding-top:.5rem;padding-bottom:.5rem}
.mf-two{display:flex;flex-direction:column;gap:.15rem;min-width:0;text-align:left}
.mf-sub{font-family:var(--body);font-weight:600;font-size:.9rem;color:var(--ink-soft);
  text-decoration:none;border-bottom:1.5px dotted rgba(51,40,74,.3);width:fit-content}
.mf-sub:hover,.mf-sub:focus-visible{color:var(--pink-ink);border-bottom-color:currentColor}
.mf-slots{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.15rem}
.mf-slot{font-size:.92rem;padding:.2rem .7rem;border-radius:var(--r-pill);
  background:var(--sky-soft);color:var(--sky-ink)}

/* the time slot picker under the dropdown, for this month's event */
.slot-field{border:0;margin:0;padding:0;min-width:0}
.slot-field[hidden]{display:none !important}
.slot-field legend{padding:0;margin-bottom:.45rem;font-family:var(--display);font-weight:600;
  font-size:.95rem;color:var(--ink)}
.slot-pick{display:flex;flex-wrap:wrap;gap:.6rem}
.slot-opt{position:relative;cursor:pointer}
.slot-opt input{position:absolute;opacity:0;pointer-events:none}
.slot-opt span{display:inline-block;padding:.65rem 1.25rem;border-radius:var(--r-pill);
  background:var(--cream);border:2px solid rgba(51,40,74,.12);
  font-family:var(--display);font-weight:600;color:var(--ink);
  transition:background .2s, border-color .2s, color .2s}
.slot-opt:hover span{border-color:var(--pink)}
.slot-opt input:checked + span{background:var(--pink-btn);border-color:var(--pink-btn);color:#fff}
.slot-opt input:focus-visible + span{outline:3px solid var(--pink);outline-offset:2px}
.slot-field.bad .slot-opt span{border-color:#D23A5C}

/* the teaser for next month's event, quiet under the main button */
.month-next{display:inline-flex;align-items:center;gap:.6rem;margin:1.1rem 0 0;
  padding:.4rem 1rem .4rem .4rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.6);border:2px dashed rgba(71,194,114,.45);
  font-size:.95rem;color:var(--ink-soft)}
.month-next strong{font-family:var(--display);font-weight:600;color:var(--green-ink);margin-right:.25rem}
.mn-ico{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  background:var(--green-soft);font-size:1.05rem;flex:0 0 auto}
@media (max-width:860px){ .month-next{display:flex;width:fit-content;margin-inline:auto;text-align:left} }

/* --- anchor jumps clear the fixed header -------------------------------------
   The navigation stays pinned over the page, so a jump to #adventures,
   #contact and the rest landed with the heading underneath it. The browser
   now keeps the header's real height free at the top of every jump (menu
   links and the script's own scrolls alike). site.js measures the header and
   keeps --nav-offset current (not --nav-h, which sizes the header itself); the fallback covers the moment before it runs. */
html{scroll-padding-top:calc(var(--nav-offset, 104px) + .5rem)}

/* what this month's adventure includes: a compact two-column tick list, the
   same coloured tick as the collaborations list */
.month-inc-title{margin:1.3rem 0 .55rem;font-family:var(--display);font-weight:600;
  font-size:1rem;color:var(--ink)}
.month-inc{list-style:none;margin:0;padding:0;
  columns:2;column-gap:1.1rem}  /* real columns: a two-line item no longer stretches its neighbour */
.month-inc li{position:relative;margin:0 0 .4rem;padding-left:1.7rem;break-inside:avoid;
  font-size:.95rem;line-height:1.4;color:var(--ink-soft)}
.month-inc li::before{content:"";position:absolute;left:0;top:.08em;
  width:1.2rem;height:1.2rem;border-radius:50%;
  background:var(--tc,var(--pink)) no-repeat center/.7rem .7rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l5.5 5.5L20 6'/%3E%3C/svg%3E")}
@media (max-width:860px){
  .month-inc-title{text-align:center}
  .month-inc{max-width:26rem;margin-inline:auto;text-align:left}
}
@media (max-width:420px){ .month-inc{columns:1} }

/* ages under the number of children: one small select per child */
.kid-ages{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem}
.kid-age{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.kid-age[hidden]{display:none}
.kid-age select{min-width:7.5rem}
.slot-field .err:empty{display:none}
.slot-field.bad .err:not(:empty){display:block}