/* Musical StoryBox – "Why music matters" page (loads after styles.css) */

/* ---------------------------------------------------------------- hero */
.wm-hero .hero__content{max-width:700px}
.wm-hero .btn-row{margin-top:6px}

/* ---------------------------------------------------------------- class programme: the sticky stave */
.wm-programme{position:sticky;top:var(--wm-hdr,86px);z-index:40;background:rgba(255,251,242,.95);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line);transition:transform .3s ease,opacity .3s ease}
.wm-programme.is-done{opacity:0;transform:translateY(-8px);pointer-events:none}
.wm-programme__in{display:flex;align-items:center;gap:18px;min-height:74px}
.wm-programme__title{flex:none;font-weight:800;font-size:.86rem;color:var(--navy);line-height:1.25;max-width:7.5em}
.wm-programme__staff{position:relative;flex:1;min-width:0;align-self:stretch;display:flex;align-items:center}
.wm-programme__staff::before{content:"";position:absolute;left:0;right:0;top:50%;height:25px;transform:translateY(-62%);
  background:repeating-linear-gradient(to bottom,#BCD3E0 0 1px,transparent 1px 6px);pointer-events:none}
.wm-programme__notes{position:relative;list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;width:100%}
.wm-programme__notes li{flex:1;display:flex;justify-content:center}
.wm-programme__notes a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--muted);padding:4px 2px;min-width:44px}
.wm-note{position:relative;display:block;width:15px;height:12px;border-radius:50%;border:2.5px solid var(--navy);background:var(--cream);transform:rotate(-20deg) translateY(var(--lift,0px));transition:background .25s ease,transform .3s cubic-bezier(.3,1.6,.5,1),border-color .25s ease}
.wm-note::after{content:"";position:absolute;right:-2.5px;bottom:4px;width:2px;height:22px;background:var(--navy);transform:rotate(20deg);transform-origin:bottom}
.wm-programme__notes a:hover .wm-note{background:var(--sky)}
.wm-programme__notes a.is-past .wm-note{background:var(--navy)}
.wm-programme__notes a.is-active .wm-note{background:var(--lime-hi);border-color:var(--navy);transform:rotate(-20deg) translateY(var(--lift,0px)) scale(1.35)}
.wm-programme__label{font-size:.72rem;font-weight:800;line-height:1.15;text-align:center;white-space:nowrap;margin-top:12px}
.wm-programme__notes a.is-active .wm-programme__label{color:var(--navy)}
.wm-programme__now{display:none;font-weight:800;font-size:.86rem;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-sound{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:2px solid var(--navy-2);background:#fff;color:var(--navy-2);font:800 .85rem var(--sans);cursor:pointer}
.wm-sound svg{width:18px;height:18px}
.wm-sound .i-off,.wm-sound[aria-pressed="false"] .i-on{display:none}
.wm-sound[aria-pressed="false"] .i-off{display:block}
.wm-sound[aria-pressed="false"]{border-color:var(--line);color:var(--muted)}
@media (max-width:1100px){.wm-programme__label{font-size:.66rem}}
@media (max-width:900px){
  .wm-programme__in{min-height:52px;gap:12px}
  .wm-programme__title,.wm-programme__label{display:none}
  .wm-programme__in{padding-top:8px;padding-bottom:8px}
  .wm-programme__staff{flex-direction:column;align-items:stretch;justify-content:center;gap:7px}
  .wm-programme__staff::before{display:none}
  .wm-programme__now{display:block;line-height:1.2}
  .wm-programme__notes{justify-content:flex-start;gap:6px}
  .wm-programme__notes li{flex:0 0 auto}
  .wm-programme__notes a{min-width:0;padding:0}
  .wm-note{width:11px;height:9px;border-width:2px;transform:rotate(-20deg)}
  .wm-programme__notes a.is-active .wm-note{transform:rotate(-20deg) scale(1.3)}
  .wm-note::after{display:none}
  .wm-sound .wm-sound__label{display:none}
  .wm-sound{padding:0 10px;min-height:38px}
}

/* ---------------------------------------------------------------- intro */
.wm-intro{padding:72px 0 24px}
.wm-intro .lead{font-weight:600;color:var(--ink)}
.wm-howto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.wm-howto li{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--shadow-sm);font-weight:600;color:var(--ink);line-height:1.5}
.wm-howto svg{flex:none;width:30px;height:30px;color:var(--navy-2)}
.wm-howto{list-style:none;padding:0;margin-left:0;margin-right:0}
@media (max-width:860px){.wm-howto{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- a class moment */
.wm-moment{position:relative;padding:96px 0;scroll-margin-top:calc(var(--wm-hdr,86px) + 60px)}
.wm-moment--white{background:#fff}
.wm-moment--mist{background:var(--mist)}
.wm-moment--teal{background:var(--teal-tint)}
.wm-moment--lime{background:var(--lime-tint)}
.wm-moment__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.wm-moment--rev .wm-moment__grid > :first-child{order:2}
.wm-moment__text{display:flex;flex-direction:column;gap:18px}
.wm-moment__text p{max-width:62ch}
.wm-moment__step{display:flex;align-items:center;gap:14px;font-weight:800;color:var(--navy-2);font-size:.95rem}
.wm-badge{position:relative;flex:none;width:48px;height:40px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font:700 1.2rem var(--serif);transform:rotate(-14deg);box-shadow:inset 0 0 0 3px var(--navy)}
.wm-badge span{transform:rotate(14deg)}
.wm-badge::after{content:"";position:absolute;right:1px;bottom:20px;width:3px;height:44px;border-radius:2px;background:var(--navy);transform:rotate(14deg);transform-origin:bottom}
.wm-moment__photo{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;background:var(--mist)}
.wm-moment__photo img{width:100%;height:100%;object-fit:cover}
.wm-moment__photo--wide{aspect-ratio:4/3}
.wm-moment__body{margin-top:56px;display:flex;flex-direction:column;gap:34px}
.wm-subtitle{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-weight:600;color:var(--navy);font-size:1.45rem;display:flex;align-items:center;gap:12px}
.wm-subtitle svg{width:28px;height:28px;color:var(--teal);flex:none}
@media (max-width:960px){
  .wm-moment{padding:72px 0}
  .wm-moment__grid{grid-template-columns:1fr;gap:36px}
  .wm-moment--rev .wm-moment__grid > :first-child{order:0}
  .wm-moment__photo{aspect-ratio:4/3;max-height:460px}
  .wm-moment__body{margin-top:40px}
}

/* ---------------------------------------------------------------- fact cards (tap to open) */
.wm-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.wm-facts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:960px){.wm-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.wm-facts,.wm-facts--2{grid-template-columns:1fr}}
.wm-fact{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:2px solid transparent;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;scroll-margin-top:calc(var(--wm-hdr,86px) + 90px)}
.wm-moment--white .wm-fact{background:var(--cream)}
.wm-fact:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.wm-fact[open]{border-color:var(--teal);transform:none}
.wm-fact summary{list-style:none;cursor:pointer;padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px;border-radius:var(--r-lg)}
.wm-fact summary::-webkit-details-marker{display:none}
.wm-fact summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wm-fact__big{font-family:var(--serif);font-variation-settings:"SOFT" 100,"opsz" 72;font-weight:700;font-size:2.7rem;line-height:1;color:var(--navy-2)}
.wm-fact__big small{font-size:.45em;font-weight:700;margin-left:.15em}
.wm-fact__hook{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:1.2rem;font-weight:600;line-height:1.32;color:var(--navy)}
.wm-fact__cue{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem;color:var(--navy-2)}
.wm-fact__cue i{position:relative;display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--lime-tint);box-shadow:inset 0 0 0 2px var(--lime);transition:transform .25s ease}
.wm-fact__cue i::before,.wm-fact__cue i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;background:var(--navy);border-radius:2px}
.wm-fact__cue i::after{transform:rotate(90deg);transition:transform .25s ease}
.wm-fact[open] .wm-fact__cue i::after{transform:rotate(0)}
details .wm-fact__cue .when-open,details[open] .wm-fact__cue .when-closed{display:none}
details[open] .wm-fact__cue .when-open{display:inline}
details[open] .wm-fact__cue i::after{transform:rotate(0)}
.wm-fact__body{padding:0 22px 24px;display:flex;flex-direction:column;gap:12px;font-size:.98rem;line-height:1.65}
.wm-fact[open] .wm-fact__body{animation:wmOpen .3s ease}
@keyframes wmOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.wm-fact__src{font-size:.84rem;color:var(--muted);line-height:1.45;border-top:1px dashed #B9CCD8;padding-top:10px}
.wm-fact__body .link-arrow{font-size:.95rem}

/* ---------------------------------------------------------------- try it at home */
.wm-home{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:#FFFDB3;border-radius:var(--r-lg);padding:24px 28px;box-shadow:inset 0 0 0 2px rgba(14,58,91,.08)}
.wm-home__icon{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--navy)}
.wm-home__icon svg{width:28px;height:28px}
.wm-home h3{font-size:1.25rem;margin-bottom:6px}
.wm-home p{color:var(--ink)}
.wm-home p + p{margin-top:8px}
@media (max-width:520px){.wm-home{grid-template-columns:1fr;padding:22px 20px}}

/* ---------------------------------------------------------------- "have a go" panels */
.wm-toy{background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow);padding:34px 36px;display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden}
.wm-moment--white .wm-toy{background:var(--cream)}
.wm-toy__head{display:flex;flex-direction:column;gap:6px;max-width:64ch}
.wm-toy__head h3{font-size:1.6rem;display:flex;align-items:center;gap:12px}
.wm-toy__head h3 .pill{font-family:var(--sans);font-size:.78rem;padding:4px 12px}
.wm-toy__head p{color:var(--muted)}
.wm-toy__note{font-weight:700;color:var(--navy);min-height:3.2em}
@media (max-width:640px){.wm-toy{padding:26px 20px;border-radius:var(--r-lg)}}

/* ---- pluck the strings */
.wm-insts{display:flex;flex-wrap:wrap;gap:10px}
.wm-insts button{min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--navy);font:800 .95rem var(--sans);cursor:pointer}
.wm-insts button[aria-pressed="true"]{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.wm-strings{position:relative;display:flex;justify-content:center;gap:clamp(14px,4vw,40px);width:fit-content;min-width:min(100%,300px);max-width:100%;margin:0 auto;padding:30px 34px 22px;border-radius:26px;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0) 12%,rgba(0,0,0,0) 88%,rgba(0,0,0,.18)),linear-gradient(180deg,#5B3417,#3B200C);box-shadow:inset 0 2px 10px rgba(0,0,0,.35)}
.wm-strings[data-instrument="ukulele"],.wm-strings[data-instrument="guitar"]{background:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,0) 12%,rgba(0,0,0,0) 88%,rgba(0,0,0,.15)),linear-gradient(180deg,#B9773C,#8E5323)}
.wm-strings::before{content:"";position:absolute;left:18px;right:18px;top:16px;height:7px;border-radius:4px;background:#EFE4CF;opacity:.9}
.wm-strings::after{content:"";position:absolute;left:18px;right:18px;bottom:46px;height:9px;border-radius:4px;background:#2A170A}
.wm-string{position:relative;width:44px;height:250px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.wm-string__line{position:relative;display:block;width:var(--thick,2px);height:204px;margin-top:-6px;border-radius:2px;background:linear-gradient(90deg,#9A9184,#F3EEE4 45%,#B4AC9E);box-shadow:0 0 6px rgba(255,240,200,.15);transform-origin:center}
.wm-string__name{margin-top:auto;font:800 .9rem var(--sans);color:#FFE9C2}
.wm-string:hover .wm-string__line{box-shadow:0 0 10px rgba(255,240,200,.55)}
.wm-string:focus-visible{outline:3px solid var(--lime-hi);outline-offset:2px;border-radius:10px}
.wm-string.is-ringing .wm-string__line{animation:wmRing 1.3s ease-out}
@keyframes wmRing{0%{transform:scaleX(4)}8%{transform:scaleX(1.4) translateX(2px)}16%{transform:scaleX(3.2) translateX(-2px)}30%{transform:scaleX(2.2) translateX(1px)}50%{transform:scaleX(1.6)}100%{transform:scaleX(1)}}
.wm-strings__hint{font-size:.9rem;color:var(--muted);font-weight:700}
@media (max-width:520px){.wm-insts{gap:6px}.wm-insts button{padding:0 13px;font-size:.9rem}.wm-string{width:36px;height:220px}.wm-string__line{height:176px}.wm-strings{padding:28px 14px 20px}}

/* ---- keep the beat */
.wm-beat__stage{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center}
.wm-beat__drum{position:relative;width:190px;height:190px;border-radius:50%;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 50% 42%,#FFFFFF 0 46%,#F4F1E8 47% 62%,#E2DBC8 63% 64%,#27C5CB 65% 100%);box-shadow:0 0 0 6px var(--navy),0 18px 30px -12px rgba(14,58,91,.5);font:800 1rem var(--sans);color:var(--navy);transition:transform .08s ease}
.wm-beat__drum.is-hit{animation:wmHit .18s ease}
@keyframes wmHit{50%{transform:scale(.94)}}
.wm-beat__drum:focus-visible{outline:4px solid var(--blue);outline-offset:8px}
.wm-beat__side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.wm-beat__pulse{width:26px;height:26px;border-radius:50%;background:var(--line)}
.wm-beat__pulse.is-count{animation:wmPulse .4s ease}
.wm-beat__pulse.is-beat{animation:wmPulseB .4s ease}
@keyframes wmPulse{0%{background:var(--sky);transform:scale(1.5)}100%{background:var(--line);transform:scale(1)}}
@keyframes wmPulseB{0%{background:var(--lime);transform:scale(1.6)}100%{background:var(--line);transform:scale(1)}}
.wm-beat__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wm-beat__dots{display:flex;gap:8px}
.wm-beat__dot{width:18px;height:18px;border-radius:50%;background:var(--mist);box-shadow:inset 0 0 0 2px var(--line)}
.wm-beat__dot.is-hit{background:var(--lime);box-shadow:none}
.wm-beat__dot.is-near{background:var(--sky);box-shadow:none}
.wm-beat__dot.is-off{background:var(--yellow);box-shadow:inset 0 0 0 2px #E2C700}
.wm-beat__dot.is-miss{background:#fff;box-shadow:inset 0 0 0 2px #B9CCD8}
.wm-beat__key{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--muted);font-weight:700}
.wm-beat__key span{display:inline-flex;align-items:center;gap:6px}
.wm-beat__key i{width:12px;height:12px;border-radius:50%;display:inline-block}
@media (max-width:640px){.wm-beat__stage{grid-template-columns:1fr;justify-items:center;text-align:center}.wm-beat__side{align-items:center}.wm-beat__drum{width:170px;height:170px}}

/* ---- shake and freeze */
.wm-freeze__stage{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center}
.wm-freeze__shake{position:relative;width:170px;height:170px;border:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:0}
.wm-freeze__shake svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 14px 14px rgba(14,58,91,.25))}
.wm-freeze__shake.is-shake svg{animation:wmShake .22s ease}
@keyframes wmShake{25%{transform:rotate(-12deg) translateX(-4px)}75%{transform:rotate(10deg) translateX(4px)}}
.wm-freeze__shake:focus-visible{outline:4px solid var(--blue);outline-offset:6px;border-radius:30px}
.wm-freeze__sign{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;color:var(--navy);line-height:1.1}
.wm-toy[data-state="play"] .wm-freeze__sign{color:var(--navy-2)}
.wm-toy[data-state="freeze"] .wm-freeze__sign{color:#fff;background:var(--navy);display:inline-block;padding:6px 18px;border-radius:14px;transform:rotate(-2deg)}
.wm-toy[data-state="freeze"]{box-shadow:0 0 0 4px var(--navy),var(--shadow)}
.wm-freeze__notes{display:flex;gap:10px;height:34px;align-items:flex-end;color:var(--teal)}
.wm-freeze__notes svg{width:26px;height:26px;opacity:.25}
.wm-toy[data-state="play"] .wm-freeze__notes svg{opacity:1;animation:wmDance .64s ease-in-out infinite alternate}
.wm-toy[data-state="play"] .wm-freeze__notes svg:nth-child(2){animation-delay:.16s}
.wm-toy[data-state="play"] .wm-freeze__notes svg:nth-child(3){animation-delay:.32s}
@keyframes wmDance{to{transform:translateY(-10px) rotate(-10deg)}}
.wm-toy.is-wobble{animation:wmWobble .4s ease}
@keyframes wmWobble{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.wm-freeze__side{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
@media (max-width:640px){.wm-freeze__stage{grid-template-columns:1fr;justify-items:center;text-align:center}.wm-freeze__side{align-items:center}}

/* ---- bubbles */
.wm-bubbles__field{position:relative;height:340px;border-radius:26px;overflow:hidden;touch-action:manipulation;
  background:radial-gradient(120% 90% at 50% 110%,#27C5CB 0%,#2799D6 42%,#12507E 100%)}
.wm-bubbles__field::after{content:"";position:absolute;inset:auto 0 0 0;height:60px;background:linear-gradient(transparent,rgba(9,36,58,.35));pointer-events:none}
.wm-bubble{position:absolute;left:var(--x);bottom:-100px;width:var(--size);height:var(--size);margin-left:calc(var(--size) / -2);border-radius:50%;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,0) 10%),radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 58%,color-mix(in srgb,var(--tint) 70%,transparent) 72%,rgba(255,255,255,.75) 100%);
  box-shadow:inset -4px -6px 12px rgba(255,255,255,.35);animation:wmRise var(--dur) linear forwards}
.wm-bubble::before{content:"";position:absolute;inset:-12px}
@keyframes wmRise{0%{transform:translate(0,0)}25%{transform:translate(var(--sway),-120px)}50%{transform:translate(calc(var(--sway) * -1),-240px)}75%{transform:translate(var(--sway),-360px)}100%{transform:translate(0,-480px)}}
.wm-bubble.is-pop{animation:wmPop .3s ease-out forwards !important;pointer-events:none}
@keyframes wmPop{0%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.wm-bubble:focus-visible{outline:3px solid var(--lime-hi);outline-offset:3px}
.wm-bubbles__bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.wm-bubbles__count{font-weight:800;color:var(--navy)}
@media (prefers-reduced-motion:reduce){.wm-bubble{bottom:auto;top:var(--y,40%);animation:none !important}.wm-bubble.is-pop{opacity:0}}

/* ---- calm-o-meter */
.wm-calm{display:flex;flex-direction:column;gap:18px}
.wm-calm__row{display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:center}
.wm-calm__name{font-weight:800;color:var(--navy);line-height:1.25}
.wm-calm__track{position:relative;height:38px;border-radius:999px;background:var(--mist);overflow:hidden}
.wm-calm__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--sky)}
.wm-calm__row--sing .wm-calm__fill{background:var(--lime)}
.wm-calm__face{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--lime-tint);color:var(--navy)}
.wm-calm__face svg{width:26px;height:26px}
.wm-calm__face .i-sad{display:none}
.wm-calm__row.is-ended .wm-calm__face{background:#FFE4E4}
.wm-calm__row.is-ended .wm-calm__face .i-sad{display:block}
.wm-calm__row.is-ended .wm-calm__face .i-happy{display:none}
.wm-calm__val{font-size:.85rem;color:var(--muted);font-weight:700;grid-column:2}
.wm-calm__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wm-calm__clock{font:700 1.6rem var(--serif);color:var(--navy);min-width:3.2em;font-variant-numeric:tabular-nums}
@media (max-width:560px){.wm-calm__row{grid-template-columns:1fr auto}.wm-calm__name{grid-column:1 / -1}.wm-calm__val{grid-column:1}}

/* ---------------------------------------------------------------- lullaby: lights down */
.wm-moment--night{background:linear-gradient(180deg,#12507E 0%,#0E3A5B 60%,#0B2E49 100%);color:#fff;transition:background-color .8s ease;overflow:hidden;isolation:isolate}
.wm-moment--night::before{content:"";position:absolute;inset:0;z-index:-1;background:#061A2B;opacity:0;transition:opacity 1.6s ease}
.wm-moment--night.is-night::before{opacity:.82}
.wm-moment--night h2,.wm-moment--night h3{color:#fff}
.wm-moment--night .lead{color:#fff}
.wm-moment--night .wm-moment__step{color:var(--lime-hi)}
.wm-moment--night .wm-badge::after{background:var(--lime-hi)}
.wm-moment--night p{color:rgba(255,255,255,.9)}
.wm-moment--night .wm-fact p{color:var(--ink)}
.wm-moment--night .wm-fact .wm-fact__src{color:var(--muted)}
.wm-moment--night .wm-subtitle{color:#fff}
.wm-moment--night .wm-subtitle svg{color:var(--lime-hi)}
.wm-moment--night .wm-home p{color:var(--ink)}
.wm-moment--night .wm-home h3{color:var(--navy)}
.wm-stars{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;transition:opacity 1.6s ease;
  background-image:radial-gradient(1.6px 1.6px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 26% 62%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 38% 12%,#FFFDB3 50%,transparent 51%),radial-gradient(1.4px 1.4px at 52% 34%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 66% 8%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 74% 48%,#FFFDB3 50%,transparent 51%),radial-gradient(1.6px 1.6px at 86% 22%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 92% 70%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 6% 80%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 46% 86%,#FFFDB3 50%,transparent 51%),radial-gradient(1.2px 1.2px at 60% 72%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 18% 40%,#fff 50%,transparent 51%)}
.wm-stars--b{background-position:40px 60px;opacity:.2}
.wm-moment--night.is-night .wm-stars{opacity:1;animation:wmTwinkle 3.4s ease-in-out infinite alternate}
.wm-moment--night.is-night .wm-stars--b{opacity:.8;animation-duration:2.6s;animation-delay:1s}
@keyframes wmTwinkle{from{opacity:.45}to{opacity:1}}
.wm-moon{position:absolute;right:7%;top:70px;width:90px;height:90px;border-radius:50%;z-index:-1;box-shadow:-18px 10px 0 0 #FFF6C8;opacity:.3;transform:rotate(-20deg);transition:opacity 1.6s ease,filter 1.6s ease}
.wm-moment--night.is-night .wm-moon{opacity:1;filter:drop-shadow(0 0 22px rgba(255,246,200,.6))}
.wm-moment--night .wm-moment__photo{transition:filter 1.6s ease}
.wm-moment--night.is-night .wm-moment__photo{filter:brightness(.72) saturate(.85)}
.wm-lull{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 26px 0 12px;border-radius:999px;border:2px solid rgba(255,255,255,.7);background:rgba(255,255,255,.1);color:#fff;font:800 1rem var(--sans);cursor:pointer;align-self:flex-start;transition:background .2s ease}
.wm-lull:hover{background:rgba(255,255,255,.2)}
.wm-lull__icon{width:38px;height:38px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center}
.wm-lull__icon svg{width:22px;height:22px}
.wm-lull[aria-pressed="true"] .wm-lull__icon{background:#fff}
@media (max-width:640px){.wm-moon{width:60px;height:60px;top:40px;right:10%}}

/* ---------------------------------------------------------------- after the class */
.wm-strands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.wm-strand{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:26px 22px 24px;display:flex;flex-direction:column;gap:12px;border-top:6px solid var(--teal)}
.wm-strand:nth-child(2){border-top-color:var(--lime)}
.wm-strand:nth-child(3){border-top-color:var(--sky)}
.wm-strand:nth-child(4){border-top-color:var(--yellow)}
.wm-strand h3{font-size:1.3rem}
.wm-strand p{color:var(--muted);font-size:.97rem;line-height:1.6}
.wm-strand__moments{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.wm-strand__moments a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:var(--mist);color:var(--navy);font-weight:800;font-size:.8rem;text-decoration:none}
.wm-strand__moments a:hover{background:var(--navy-2);color:#fff}
@media (max-width:1000px){.wm-strands{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.wm-strands{grid-template-columns:1fr}}

.wm-myths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
@media (max-width:960px){.wm-myths{grid-template-columns:1fr}}
.wm-myth{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.wm-myth summary{list-style:none;cursor:pointer;padding:24px 24px 20px;display:flex;flex-direction:column;gap:10px}
.wm-myth summary::-webkit-details-marker{display:none}
.wm-myth__tag{align-self:flex-start;font-weight:800;font-size:.82rem;padding:4px 12px;border-radius:999px;background:#FFE4E4;color:#7A1F1F}
.wm-myth__claim{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:1.25rem;font-weight:600;color:var(--navy);line-height:1.3}
.wm-myth__body{padding:0 24px 24px;display:flex;flex-direction:column;gap:12px;font-size:.98rem}
.wm-myth__truth{align-self:flex-start;font-weight:800;font-size:.82rem;padding:4px 12px;border-radius:999px;background:var(--lime-tint);color:var(--navy);box-shadow:inset 0 0 0 2px var(--lime)}
.wm-myth[open]{box-shadow:0 0 0 2px var(--teal),var(--shadow-sm)}

.wm-library .post__body .wm-reads{font-size:.85rem;font-weight:800;color:var(--navy-2)}
.wm-sources-note{font-size:.95rem;color:var(--muted);max-width:70ch}

@media (prefers-reduced-motion:reduce){
  .wm-moment--night.is-night .wm-stars{animation:none}
}

/* ---------------------------------------------------------------- science posts */
.wm-post .wm-nutshell{background:var(--lime-tint);border-radius:var(--r-lg);padding:26px 28px;box-shadow:inset 0 0 0 2px rgba(156,209,0,.5)}
.wm-post .wm-nutshell h2{margin-top:0;font-size:1.35rem}
.wm-post .wm-nutshell ul{margin:12px 0 0;padding-left:1.2em}
.wm-post .wm-nutshell li{font-weight:600}
.wm-post sup{font-size:.68em;line-height:0;margin-left:1px}
.wm-post sup a{text-decoration:none;font-weight:800;padding:0 1px}
.wm-post .wm-callout{background:#fff;border-left:6px solid var(--teal);border-radius:var(--r-md);padding:20px 24px;box-shadow:var(--shadow-sm)}
.wm-post .wm-callout h3{margin-top:0;font-size:1.2rem}
.wm-post .wm-callout p + p{margin-top:.7em}
.wm-post .wm-callout--home{background:#FFFDB3;border-left-color:var(--yellow)}
.wm-post .wm-callout--honest{background:var(--mist);border-left-color:var(--navy-2)}
.wm-post .wm-figure{margin:1.6em 0;display:flex;flex-direction:column;gap:10px}
.wm-post .wm-figure img{border-radius:var(--r-md);box-shadow:var(--shadow-sm);width:100%;height:auto;max-height:520px;object-fit:cover}
.wm-post .wm-figure figcaption{font-size:.9rem;color:var(--muted)}
.wm-post h2[id],.wm-post h3[id],.wm-post li[id]{scroll-margin-top:110px}
.wm-refs{font-size:.92rem;line-height:1.55;padding-left:1.6em}
.wm-refs li{padding-left:.2em}
.wm-refs li + li{margin-top:.75em}
.wm-refs li:target{background:#FFFDB3;border-radius:8px;outline:6px solid #FFFDB3}
.wm-refs .wm-ref-note{display:block;color:var(--muted);font-size:.88rem;margin-top:2px}
.wm-post .wm-lastcheck{font-size:.88rem;color:var(--muted)}

/* ---------------------------------------------------------------- peek-inside film */
.wm-peek{margin:40px auto 0;max-width:900px;display:flex;flex-direction:column;gap:10px}
.wm-peek video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--shadow);background:var(--navy)}
.wm-peek figcaption{text-align:center;font-weight:700;color:var(--muted);font-size:.95rem}

.wm-library .grid-3{display:flex;flex-wrap:wrap;justify-content:center}
.wm-library .grid-3 > .post{flex:0 1 calc((100% - 56px) / 3)}
@media (max-width:960px){.wm-library .grid-3 > .post{flex-basis:calc((100% - 28px) / 2)}}
@media (max-width:640px){.wm-library .grid-3 > .post{flex-basis:100%}}

/* ================================================================ benefits layout (claim → fact) */
.wm-theme{position:relative;padding:96px 0;scroll-margin-top:calc(var(--wm-hdr,86px) + 60px)}
.wm-theme--white{background:#fff}
.wm-theme--mist{background:var(--mist)}
.wm-theme--teal{background:var(--teal-tint)}
.wm-theme--lime{background:var(--lime-tint)}
.wm-theme__head{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-bottom:44px;max-width:900px}
.wm-theme__pic{width:132px;height:132px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px #fff,0 0 0 10px var(--accent,var(--lime-hi)),var(--shadow);flex:none}
.wm-theme__pic img{width:100%;height:100%;object-fit:cover}
.wm-theme__head .eyebrow{margin-bottom:8px}
.wm-theme__head p.wm-theme__sub{margin-top:10px;font-size:1.12rem;color:var(--muted);max-width:56ch}
.wm-theme__more{margin-top:30px}
@media (max-width:640px){
  .wm-theme{padding:64px 0}
  .wm-theme__head{grid-template-columns:1fr;gap:18px;margin-bottom:30px}
  .wm-theme__pic{width:96px;height:96px}
}

.wm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:960px){.wm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.wm-cards{grid-template-columns:1fr}}

/* flip card: both faces share one grid cell, so the card is as tall as its longer face */
.wm-flip{position:relative;display:grid;perspective:1400px;scroll-margin-top:calc(var(--wm-hdr,86px) + 90px)}
.wm-flip__front,.wm-flip__back{grid-area:1 / 1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-lg);transition:transform .7s cubic-bezier(.3,1.25,.45,1),box-shadow .25s ease}
.wm-flip__front{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:250px;padding:28px 26px 24px;border:0;text-align:left;cursor:pointer;font:inherit;color:var(--navy);background:var(--face,var(--lime-hi));box-shadow:var(--shadow-sm);transform:rotateY(0)}
.wm-flip__front:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.wm-flip__back{display:flex;flex-direction:column;gap:12px;padding:26px 26px 22px;background:#fff;box-shadow:var(--shadow);transform:rotateY(-180deg);font-size:.98rem;line-height:1.6}
.wm-flip.is-flipped .wm-flip__front{transform:rotateY(180deg)}
.wm-flip.is-flipped .wm-flip__back{transform:rotateY(0)}
.wm-flip__tag{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.8rem;letter-spacing:.02em;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.6);color:var(--navy)}
.wm-flip__tag svg{width:15px;height:15px}
.wm-flip__big{font-family:var(--serif);font-variation-settings:"SOFT" 100,"opsz" 72;font-weight:700;font-size:3.2rem;line-height:.95;letter-spacing:-.02em}
.wm-flip__claim{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-weight:600;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em}
.wm-flip__big + .wm-flip__claim{font-size:1.25rem}
.wm-flip__cue{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem}
.wm-flip__cue svg{width:20px;height:20px;transition:transform .4s ease}
.wm-flip__front:hover .wm-flip__cue svg{transform:rotate(180deg)}
.wm-flip__back .wm-flip__label{align-self:flex-start;font-weight:800;font-size:.8rem;padding:4px 12px;border-radius:999px;background:var(--lime-tint);box-shadow:inset 0 0 0 2px var(--lime);color:var(--navy)}
.wm-flip__back p{color:var(--ink)}
.wm-flip__src{font-size:.84rem;color:var(--muted)!important;line-height:1.45;border-top:1px dashed #B9CCD8;padding-top:10px;margin-top:auto}
.wm-flip__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wm-flip__foot .link-arrow{font-size:.95rem}
.wm-flip__close{border:0;background:none;padding:6px 2px;font:800 .85rem var(--sans);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.wm-flip__close svg{width:16px;height:16px}
.wm-flip__close:hover{color:var(--navy)}
.wm-face-lime{--face:#D5FF2E}.wm-face-yellow{--face:#FFFF16}.wm-face-sky{--face:#6CD1FF}.wm-face-teal{--face:#27C5CB}.wm-face-white{--face:#fff}
.wm-face-navy{--face:#0E3A5B}
.wm-face-navy .wm-flip__front{color:#fff}
.wm-face-navy .wm-flip__big{color:var(--lime-hi)}
.wm-face-navy .wm-flip__tag{background:rgba(255,255,255,.14);color:#fff}
.wm-face-navy .wm-flip__front:focus-visible{outline-color:var(--lime-hi)}
@media (prefers-reduced-motion:reduce){
  .wm-flip__front,.wm-flip__back{transform:none !important;transition:opacity .2s ease !important}
  .wm-flip__back{opacity:0}
  .wm-flip.is-flipped .wm-flip__back{opacity:1}
  .wm-flip.is-flipped .wm-flip__front{opacity:0}
}
.wm-theme .wm-toy{margin-top:34px}
@media (min-width:1100px){.wm-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}.wm-cards--4 .wm-flip__claim{font-size:1.3rem}}
@media (min-width:621px) and (max-width:1099px){.wm-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}