/* ===== the story layout (Anand, 5 Oct): the guideline for the site's pages, shared by every page marked .st-page.
   Left (the wireframe's 998 of 1719): the content, scrolling, one section per screen, each a whole number of 34 px bands with its
   headings and copy on the rules (story.js snaps each section's padding to the bands and centres its content).
   Right: never scrolls. The creature, big and balanced against the text, with three sticky notes round it (lime over the top-right,
   yellow off the bottom-left, pink off the bottom-right). As each section comes up, the creature rubs out what it was doing and draws
   what this section is about; on opening, it draws itself in a short story; poked, it reacts; the notes can be dragged anywhere.
   Writing starts 64 px right of the margin line on web (24 on phones); the creature's group ends 64 px from the right edge.
   Each page sets --hl (its headline's longest line, in em) and keeps its own extras in its own file (creators.css, esports.css). ===== */

body.site-open:has(.st-page.on) #site{padding-top:136px;background-attachment:local}
.page.st-page{max-width:none;padding-left:calc(var(--mx) + 24px);padding-right:24px;
  --bw:min(34vw,(100dvh - 170px) * .66)}   /* .66: the board leaves room above it, so the lime note never slides under the nav */   /* the board's width: a third of the screen, or what its height allows */
@media (min-width:1024px){.page.st-page{padding-left:calc(var(--mx) + 64px);padding-right:64px}}   /* on web: 64 px from the margin line, and the creature's group ends 64 px from the right edge (Anand, 5 Oct) */
.page.st-page .st{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--bw) * 1.25);column-gap:clamp(40px,4vw,80px);align-items:start}   /* the right column is just the board and its notes' overhang; the text takes the rest */
.page.st-page .st-flow{min-width:0;container-type:inline-size}
.page.st-page .st-sec{margin:0;min-height:calc(100dvh - 136px);display:flex;flex-direction:column;justify-content:flex-start}
.page.st-page .st-sec > *{max-width:900px}

/* type: a Swiss scale on the 34 px baseline (Anand, 5 Oct: "think of swiss text layouts"). Flush left, ragged right, broken by phrase;
   each line box a whole number of bands, nudged so its baseline sits 4 px above a rule: nudge = L/2 - 4px - k x size
   (k = .41 Gloria, .35 Figtree). Scale: body 20 / lede 20-26 / section 36-56 / display 44-96, measure 55-65 characters. */
.page.st-page .st-hero h1{max-width:none;margin:0;font-size:clamp(44px,min(95cqw / var(--hl,8.05),(100dvh - 170px) * .1),96px);line-height:round(up,1.15em,34px);translate:0 calc(round(up,1.15em,34px) / 2 - 4px - .39em)}   /* .39 = Permanent Marker's baseline */
.page.st-page .st-hero h1 span{display:block;white-space:nowrap}   /* each page sets --hl, its longest line in em */
.page.st-page .st-hero .lede{margin:34px 0 0;max-width:30em;font-size:clamp(20px,4.1cqw,26px);line-height:34px;translate:0 calc(13px - .35em)}
.page.st-page .st-hero .row{margin-top:34px}
.page.st-page .st-sec h2{font-family:'Permanent Marker',var(--hand);margin:0 0 34px;max-width:18ch;font-size:clamp(40px,8.5cqw,64px);line-height:round(up,1.15em,34px);translate:0 calc(round(up,1.15em,34px) / 2 - 4px - .41em)}
.page.st-page .st-sec h2 + p{margin:0 0 34px;max-width:34em;font-size:20px;line-height:34px;translate:0 calc(13px - .35em)}
.page.st-page .st-sec .grid.g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}   /* Creator World: always a 2 x 2 beside the creature */
.page.st-page .st-sec .g2 .box{padding:18px 18px 14px}
.page.st-page .st-sec .box h3{font-size:22px}
.page.st-page .st-sec .box p{font-size:18px}

/* the stage: pinned under the nav, a screen tall less a band */
.page.st-page .st-stage{position:sticky;top:0;height:calc(100dvh - 170px);min-height:420px;display:grid;place-items:center end;min-width:0;container-type:size}
/* the board is the wireframe's right-hand box (605 x 833): as big as the stage allows, centred like the section beside it; the creature
   sits in its middle and the notes stick to its corners, so they stay round the creature at any screen size and never leave it */
.page.st-page .st-board{position:relative;width:var(--bw);margin-right:calc(var(--bw) * .115);aspect-ratio:4/5;display:grid;place-items:center}   /* a little squarer than the wireframe's box, so the notes sit close round the creature; the margin is the right notes' overhang */
.page.st-page .ch{width:100%;height:auto;color:var(--ink);overflow:visible;filter:url(#wob2)}
.page.st-page .ch path,.page.st-page .ch ellipse,.page.st-page .ch circle{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.page.st-page .ch .fill{fill:currentColor;stroke:none}
.page.st-page .ch .pink{color:#E0569A}
.page.st-page .ch .ch-ground{stroke-opacity:.35}
.page.st-page .ch text{font:400 46px var(--hand);fill:currentColor}
/* drawing: every stroke is pathLength 1, so dashoffset 1 is unwritten and 0 is written; the next pose writes in after this one rubs out.
   (Selected by element, not [pathLength]: Chrome does not restyle a camel-case SVG attribute selector when an ancestor's class changes.) */
.page.st-page .ch :is(path,ellipse,circle):not(.fill){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .16s ease-in}
.page.st-page .ch .is-on :is(path,ellipse,circle):not(.fill){stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.5,0,.2,1) calc(.2s + var(--i,0) * .05s)}
/* a rubbed-out stroke still leaves its round end caps as dots, so a pose that is off also fades once its rub-out is done */
.page.st-page .ch .ch-pose,.page.st-page .ch .ch-base{opacity:0;transition:opacity 0s .17s}
.page.st-page .ch .ch-pose.is-on,.page.st-page .ch .ch-base.is-on{opacity:1;transition:none}
.page.st-page .ch .ch-pose .fill,.page.st-page .ch .ch-pose text{opacity:0;transition:opacity .15s}
.page.st-page .ch .is-on .fill,.page.st-page .ch .is-on text,.page.st-page .ch .ch-base.is-on .fill{opacity:1;transition:opacity .3s .55s}
.page.st-page .ch .ch-base .fill{opacity:0}
/* a small hop each time it changes what it is doing, and a slow breath the rest of the time */
.page.st-page .ch-all{transform-box:fill-box;transform-origin:50% 100%;animation:ch-breathe 3.2s ease-in-out infinite alternate}
.page.st-page .ch.is-swap .ch-all{animation:ch-hop .55s cubic-bezier(.3,1.5,.5,1),ch-breathe 3.2s ease-in-out .55s infinite alternate}
@keyframes ch-breathe{to{transform:scaleY(1.012)}}
@keyframes ch-hop{0%{transform:scaleY(1)}30%{transform:scaleY(.94) scaleX(1.03)}65%{transform:translateY(-10px) scaleY(1.03)}100%{transform:none}}
/* what each pose does while it waits */
.page.st-page .ch .ch-swing,.page.st-page .ch .ch-bob,.page.st-page .ch .ch-wiggle,.page.st-page .ch .ch-nudge,.page.st-page .ch .ch-scribble,.page.st-page .ch .ch-float{transform-box:fill-box}
.page.st-page .ch .is-on .ch-swing{transform-origin:0% 100%;animation:ch-swing 2.4s ease-in-out .8s infinite alternate}   /* the selfie arm, from the shoulder */
.page.st-page .ch .is-on .ch-float{animation:ch-float 2.8s ease-in-out .8s infinite}
.page.st-page .ch .is-on .ch-bob{animation:ch-bob 1.6s ease-in-out .8s infinite alternate}
.page.st-page .ch .is-on .ch-rec{animation:ch-rec 1s steps(1) .8s infinite}
.page.st-page .ch .is-on .ch-wiggle{transform-origin:50% 100%;animation:ch-wiggle 1.8s ease-in-out .8s infinite alternate}
.page.st-page .ch .is-on .ch-nudge{animation:ch-nudge .9s ease-in-out .8s infinite alternate}
.page.st-page .ch .is-on .ch-scribble{transform-origin:0% 100%;animation:ch-scribble .45s ease-in-out .8s infinite alternate}
.page.st-page .ch .is-on .ch-blink{animation:ch-blink 1.4s steps(1) .9s infinite}
.page.st-page .ch .ch-mash,.page.st-page .ch .ch-drip,.page.st-page .ch .ch-lift{transform-box:fill-box}
.page.st-page .ch .is-on .ch-mash{animation:ch-mash .22s steps(2) .8s infinite}   /* thumbs on the buttons */
.page.st-page .ch .is-on .ch-drip{animation:ch-drip 1.6s ease-in .8s infinite}   /* a nervous sweat */
.page.st-page .ch .is-on .ch-lift{animation:ch-lift 1.2s ease-in-out .8s infinite alternate}   /* the trophy, up and up */
.page.st-page .ch .is-on .ch-arcade{animation:ch-blink .9s steps(1) .8s infinite}   /* an arcade "press start" */
.page.st-page .ch.is-mashing .ch-mash{animation:ch-mash .09s steps(2) infinite!important}
@keyframes ch-mash{50%{transform:translate(1.5px,1px) rotate(-1deg)}}
@keyframes ch-drip{0%{transform:none;opacity:1}80%{transform:translateY(10px);opacity:0}100%{transform:none;opacity:0}}
@keyframes ch-lift{to{transform:translateY(-6px)}}
@keyframes ch-swing{from{transform:rotate(-4deg)}to{transform:rotate(3deg)}}
@keyframes ch-float{0%,100%{transform:none;opacity:1}50%{transform:translateY(-7px);opacity:.75}}
@keyframes ch-bob{to{transform:translateY(-3px) rotate(-1.5deg)}}
@keyframes ch-rec{50%{opacity:.15}}
@keyframes ch-wiggle{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes ch-nudge{to{transform:translateX(-6px)}}
@keyframes ch-scribble{from{transform:rotate(-5deg)}to{transform:rotate(4deg)}}
@keyframes ch-blink{50%{opacity:0}}

/* the three numbers, stuck round the creature */
.page.st-page .st-notes{position:absolute;inset:0;display:block;margin:0;pointer-events:none}
.page.st-page .st-notes .note{position:absolute;margin:0;min-width:0;max-width:none;flex:none;width:42%;padding:clamp(12px,1.3vw,18px) clamp(12px,1.3vw,18px) clamp(10px,1vw,14px);pointer-events:auto}
.page.st-page .st-notes .note b{font-size:clamp(22px,7.4cqw,44px)}
.page.st-page .st-notes .note span{font-size:clamp(12px,2.7cqw,16px)}
.page.st-page .st-notes .note:nth-child(1){--r:8deg;background:var(--lime);right:-9%;top:-4%}
.page.st-page .st-notes .note:nth-child(2){--r:-14deg;background:var(--sun);left:-12%;bottom:-6%}
.page.st-page .st-notes .note:nth-child(3){--r:-10deg;background:var(--pink);right:-10%;bottom:-1%}
/* hover a note: it lifts off the paper, straightens a little and counts its number up again (story.js) */
.page.st-page .st-notes .note{translate:var(--dx,0px) var(--dy,0px);rotate:var(--tilt,0deg);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .32s cubic-bezier(.3,1.5,.5,1),box-shadow .32s ease,rotate .3s ease-out}
/* pick a note up and put it anywhere (story.js): it lifts and tilts with the drag, slaps down where it is let go; a double click sends it home */
.page.st-page .st-notes .note.is-drag{z-index:6;cursor:grabbing;transform:rotate(calc(var(--r) * .4)) scale(1.07);box-shadow:6px 22px 30px rgba(20,20,60,.3);transition:transform .2s ease,box-shadow .2s ease,rotate .12s linear}
.page.st-page .st-notes .note.is-drop{animation:note-slap .36s cubic-bezier(.3,1.6,.5,1)}
.page.st-page .st-notes .note.is-home{transition:translate .5s cubic-bezier(.3,1.4,.5,1),transform .32s ease,rotate .3s ease}
@keyframes note-slap{0%{scale:1.06}45%{scale:.95}100%{scale:1}}
.page.st-page .st-notes .note:hover{z-index:4;transform:rotate(calc(var(--r) * .35)) translateY(-6px) scale(1.04);box-shadow:4px 16px 24px rgba(20,20,60,.25)}

/* notes that come and go with the scroll: story.js sets --t on each, 0 away (lifted, tilted, faded) to 1 stuck in place. A page can
   give a section its own set (.st-notes[data-for="pose"]); while that section is on screen its notes arrive one by one, counting up,
   and the board's own notes peel away, all following the scroll both ways */
.page.st-page .st-notes .note{opacity:var(--t,1);transform:rotate(calc(var(--r) + (1 - var(--t,1)) * 14deg)) translateY(calc((1 - var(--t,1)) * -40px)) scale(calc(1 + (1 - var(--t,1)) * .18))}
.page.st-page .st-notes.is-away .note{pointer-events:none}
.page.st-page .st-anno{position:absolute;margin:0;white-space:nowrap;font:400 22px/1.2 var(--hand);color:#E0569A;opacity:var(--t,1);transform:rotate(-2deg) translateY(calc((1 - var(--t,1)) * -14px));pointer-events:none}
.page.st-page .st-anno::after{content:" \2192"}
/* the reveal (story.js story): while the pen draws, the stylesheet's own stroke transitions stand aside */
.page.st-page .ch.is-story,.page.st-page .ch.is-story *{transition:none!important}
.page.st-page .st-flash{position:absolute;inset:-6%;z-index:3;border-radius:24px;background:radial-gradient(closest-side,#fff 0%,rgba(255,255,255,.85) 55%,rgba(255,255,255,0) 100%);opacity:0;pointer-events:none}   /* the selfie's flash */
/* poked: a reaction face takes over for a beat, and the body acts it out (story.js picks the emotion) */
.page.st-page .ch .ch-react{opacity:0}
.page.st-page .ch .ch-react.is-on{opacity:1}
.page.st-page .ch.is-react .ch-pose .face{opacity:0;transition:opacity .08s}
.page.st-page .ch .ch-pose .face{transition:opacity .2s .1s}
.page.st-page .ch .ch-react.is-on :is(path,ellipse,circle):not(.fill){stroke-dashoffset:0;transition:stroke-dashoffset .22s ease-out calc(var(--i,0) * .04s)}
.page.st-page .ch .ch-react .fill,.page.st-page .ch .ch-react text{opacity:0;transition:opacity .1s}
.page.st-page .ch .ch-react.is-on .fill,.page.st-page .ch .ch-react.is-on text{opacity:1;transition:opacity .15s .12s}
.page.st-page .ch .ch-react.is-on .ch-blush{opacity:.5}
.page.st-page .ch .ch-react .soft{color:#5E8FE0}
.page.st-page .ch .ch-say{font-size:24px}
.page.st-page .ch text.disp{font-family:'Luckiest Guy',var(--hand)}   /* a gamer emote word: GG, POG */
.page.st-page .ch text.mono{font-family:'JetBrains Mono',monospace;font-weight:700}
.page.st-page .ch .ch-orbit{transform-box:view-box;transform-origin:117px 22px}
.page.st-page .ch .ch-react.is-on .ch-orbit{animation:ch-orbit 1.1s linear infinite}
.page.st-page .ch .ch-react.is-on .ch-say{animation:ch-jit .16s steps(2) infinite}
.page.st-page .ch .ch-react.is-on .ch-fume{animation:ch-jit .12s steps(2) infinite}
.page.st-page .ch.is-poked[data-move="startle"] .ch-all{animation:re-startle .6s cubic-bezier(.3,1.4,.5,1)}
.page.st-page .ch.is-poked[data-move="giggle"] .ch-all{animation:re-giggle .9s ease-in-out}
.page.st-page .ch.is-poked[data-move="grumpy"] .ch-all{animation:re-grumpy 1.3s ease-in-out}
.page.st-page .ch.is-poked[data-move="dizzy"] .ch-all{animation:re-dizzy 1.9s ease-in-out}
.page.st-page .ch.is-poked[data-move="love"] .ch-all{animation:re-love 1s ease-in-out}
@keyframes ch-orbit{to{transform:rotate(360deg)}}
@keyframes ch-jit{50%{translate:1.5px -1.5px}}
@keyframes re-startle{20%{transform:scaleY(.9) scaleX(1.05)}45%{transform:translateY(-24px) scaleY(1.06)}70%{transform:scaleY(.97)}}
@keyframes re-giggle{10%,30%,50%,70%{transform:rotate(-3deg)}20%,40%,60%,80%{transform:rotate(3deg)}}
@keyframes re-grumpy{25%,80%{transform:scaleY(.93) scaleX(1.04) skewX(-4deg)}}
@keyframes re-dizzy{20%{transform:rotate(-6deg) translateX(-5px)}45%{transform:rotate(5deg) translateX(5px)}70%{transform:rotate(-3deg)}}
@keyframes re-love{30%{transform:translateY(-8px) rotate(-2deg)}60%{transform:rotate(2deg)}}
/* micro-interactions: the creature watches the cursor (its eyes), blinks, and answers a click with a hop and a burst of hearts */
.page.st-page .ch{cursor:pointer}
.page.st-page .ch .eye{transform-box:fill-box;transform-origin:50% 50%;transition:translate .25s ease-out}
.page.st-page .ch .arm-l{transform-box:view-box}
.page.st-page .ch .burst{fill:none;stroke:#E0569A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none!important;stroke-dashoffset:0!important;transform-box:fill-box;transform-origin:50% 50%}

/* under 1024 px: one column; the creature and its notes come straight after the hero and do not pin */
/* small laptops: a smaller board, and the headline may wrap rather than shrink below 34 px */
@media (min-width:1024px) and (max-width:1279px){
  .page.st-page{--bw:min(28vw,(100dvh - 170px) * .66)}
  .page.st-page .st-hero h1{font-size:clamp(34px,95cqw / var(--hl,8.05),64px)}
  .page.st-page .st-hero h1 span{white-space:normal}
}
@media (max-width:1023px){
  .page.st-page .st{grid-template-columns:minmax(0,1fr)}
  .page.st-page .st-flow{display:contents}
  .page.st-page .st-hero{order:0}
  .page.st-page .st-stage{order:1;position:relative;top:auto;height:auto;min-height:0;max-width:560px;width:100%;margin:10px auto 60px;display:block;container-type:normal}
  .page.st-page .st-board{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;margin-right:0;aspect-ratio:auto}
  .page.st-page .ch{width:min(78%,420px)}
  .page.st-page .st-notes{position:static;display:flex;justify-content:center;gap:10px;width:100%}
  .page.st-page .st-notes[data-for]{display:none}   /* on phones a section keeps its own numbers in the text */   /* a row under the creature, so neither hides the other */
  .page.st-page .st-notes .note{position:relative;width:auto;flex:1 1 0;max-width:180px;padding:12px 10px 10px}
  .page.st-page .st-notes .note:nth-child(n){left:auto;right:auto;top:auto;bottom:auto}
  .page.st-page .st-notes .note:nth-child(1){--r:-3deg}
  .page.st-page .st-notes .note:nth-child(2){--r:2.5deg}
  .page.st-page .st-notes .note:nth-child(3){--r:-2deg}
  .page.st-page .st-flow > .st-sec:not(.st-hero){order:2}
  .page.st-page .st-sec{min-height:0;padding:0 0 56px}
  .page.st-page .st-hero{padding-top:12px}
  .page.st-page .st-hero h1{font-size:min(7.6vw,72px)}
}
@media (max-width:760px){
  /* Mobile pages use the full width, without the desktop notebook margin. */
  body.site-open #site,body.site-open #snav{--margin:transparent}
  body.site-open #site,body.site-open:has(.st-page.on) #site{padding-top:calc(104px + env(safe-area-inset-top,0px))}
  body.site-open #site .page{padding-left:20px;padding-right:20px;min-width:0}
  /* the mobile bar (Figma STANVERSE 134:154): 80 px, logo 32 px tall at 16 px in, a 32 px menu icon 16 px from the right; the links
     and the pass button live in the menu drawer below */
  body.site-open #snav,body:not(.site-open) #snav{height:calc(80px + env(safe-area-inset-top,0px));box-sizing:border-box;padding:env(safe-area-inset-top,0px) 16px 0}
  #snav .in{min-height:80px;min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:0}
  #snav .logo{min-height:44px}
  #snav .logo img{height:32px;width:auto;flex:none}
  #snav .menu-btn{display:grid;place-items:center;width:44px;height:44px;margin-right:-6px;padding:0;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
  body:not(.site-open) #snav .menu-btn{color:#FEFEFE}
  #snav .menu-btn span{width:32px;height:32px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6.4 8h19.2M6.4 16h19.2M6.4 24h19.2'/%3E%3C/svg%3E") center/32px 32px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6.4 8h19.2M6.4 16h19.2M6.4 24h19.2'/%3E%3C/svg%3E") center/32px 32px no-repeat}
  #snav .menu-btn:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
  /* the menu drawer (Figma STANVERSE 137:162): full screen on #0B0516 (logo, and the menu icon turned into a close X, stay above it); four
     cards centred on the screen, each with its page's creature peeking up on the left (ui.js clones it in) and the title and one-liner on
     the right; the pass / partner button 39 px off the bottom. The drawer covers the bar too, so the bar itself never changes colour.
     Opening: the drawer fades in, the cards rise in one after another, each creature peeks up a beat after its card, then the button.
     Closing: a quick fade. The cards keep the same colours in every state: the homepage nav's hover (bold, a palette colour, no fill)
     must not reach them, and on a phone hover sticks after a tap. */
  #snav .logo,#snav .menu-btn{position:relative;z-index:1}
  #snav .menu-btn{transition:color .3s cubic-bezier(.2,.8,.2,1)}
  #snav.menu-open .menu-btn{color:#FEFEFE}
  #snav.menu-open .menu-btn span{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.67' stroke-linecap='round'%3E%3Cpath d='M8 24 24 8M8 8l16 16'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.67' stroke-linecap='round'%3E%3Cpath d='M8 24 24 8M8 8l16 16'/%3E%3C/svg%3E")}
  #snav.menu-open .menu-btn span{animation:mn-icon .32s cubic-bezier(.2,.8,.2,1)}
  #snav.menu-was:not(.menu-open) .menu-btn span{animation:mn-icon-back .32s cubic-bezier(.2,.8,.2,1)}
  @keyframes mn-icon{from{transform:rotate(-90deg) scale(.6);opacity:0}}
  @keyframes mn-icon-back{from{transform:rotate(90deg) scale(.6);opacity:0}}
  #snav .menu{display:flex;position:fixed;inset:0;flex-direction:column;align-items:center;gap:24px;overflow-y:auto;overscroll-behavior:contain;
    padding:calc(119px + env(safe-area-inset-top,0px)) 20px calc(39px + env(safe-area-inset-bottom,0px));background:#0B0516;   /* top mirrors the button stack (24 + 56 + 39), so the cards sit dead centre */
    visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s ease-in,visibility 0s .2s}
  #snav.menu-open .menu{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
  /* closed: the cards hold still while the drawer fades, then reset unseen ("body" lifts these over the homepage nav's own transition) */
  body #snav .menu nav a,body #snav .menu .right,body #snav .mn-art svg{opacity:0;translate:0 18px;transition:opacity 0s .2s,translate 0s .2s}
  body #snav.menu-open .menu nav a,body #snav.menu-open .menu .right{opacity:1;translate:0 0;
    transition:opacity .4s cubic-bezier(.2,.8,.2,1) var(--d,0s),translate .55s cubic-bezier(.2,.8,.2,1) var(--d,0s),background-color .15s,scale .12s}
  body #snav.menu-open .mn-art svg{opacity:1;translate:0 0;   /* the creature peeks up a beat after its card */
    transition:opacity .4s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .14s),translate .6s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .14s)}
  #snav .menu nav a:nth-child(1){--d:.06s}
  #snav .menu nav a:nth-child(2){--d:.12s}
  #snav .menu nav a:nth-child(3){--d:.18s}
  #snav .menu nav a:nth-child(4){--d:.24s}
  #snav .menu .right{--d:.32s}
  body.site-open #snav nav,body:not(.site-open) #snav nav{display:flex;flex-direction:column;gap:16px;width:100%;max-width:362px;margin:auto 0;padding:0;overflow:visible}
  #snav .menu nav a,#snav .menu nav a:is(:hover,:focus-visible,:active,[aria-current]),
  body:not(.site-open) #snav .menu nav a,body:not(.site-open) #snav .menu nav a:is(:hover,:focus-visible,:active,[aria-current]){
    display:block;position:relative;height:113px;white-space:normal;padding:21px 37px 0 138px;border-radius:20px;background:rgba(217,217,217,.12);
    overflow:hidden;color:#FFF;font-weight:400;transform:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  #snav .menu nav a:active,body:not(.site-open) #snav .menu nav a:active{background:rgba(217,217,217,.18);scale:.98}
  @media (hover:hover){#snav .menu nav a:hover,body:not(.site-open) #snav .menu nav a:hover{background:rgba(217,217,217,.16)}}
  #snav .menu nav a:focus-visible,body:not(.site-open) #snav .menu nav a:focus-visible{outline:2px solid #FFD60C;outline-offset:2px}
  #snav nav a::after,#snav nav .ring{display:none}
  #snav .mn-t{display:block;font:600 24px/1.2 var(--pen);color:#FFF}
  #snav .mn-d{display:block;margin-top:8px;font:400 16px/1.2 var(--pen);color:rgba(255,255,255,.5)}
  #snav .mn-art{display:block;position:absolute;left:0;top:0;width:118px;height:113px;pointer-events:none}
  #snav .mn-art svg{position:absolute;left:var(--ax,-12px);top:var(--ay,-26px);width:149px;height:auto;overflow:visible;color:#FFF;filter:url(#wob2)}
  #snav .mn-art :is(path,ellipse,circle){fill:none;stroke:currentColor;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
  #snav .mn-art .fill{fill:currentColor;stroke:none}
  #snav .mn-art .fill.paper{color:#241F2E}   /* the card's colour (12% grey on the drawer), so a prop hides the line behind it */
  #snav .mn-art .ch-ground{display:none}
  #snav .mn-art[data-from="festival"] svg{--ay:-14px}   /* room for the pass held up over its head */
  #snav .mn-art text{font:400 46px var(--hand);fill:currentColor}
  #snav .menu .right{flex:none}
  #snav .menu .cta,body:not(.site-open) #snav .menu .cta{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:10px 32px!important;border:0!important;border-radius:20px!important;
    background:#FFD60C!important;color:#16111D!important;box-shadow:none!important;transform:none!important;font:600 16px/1 var(--pen)!important}
  #snav .menu .cta::after{content:none!important}
  .page.st-page .st-hero h1{font-size:clamp(30px,8.5vw,42px);line-height:1.3;translate:none}
  .page.st-page .st-hero h1 span{white-space:normal}
  .page.st-page .st-hero .lede{font-size:17px;line-height:1.65;translate:none;margin-top:24px}
  .page.st-page .st-sec h2{font-size:clamp(28px,7.5vw,38px);line-height:1.3;translate:none;margin-bottom:24px}
  .page.st-page .st-sec h2 + p{font-size:17px;line-height:1.65;translate:none;margin-bottom:24px}
  .page.st-page .st-sec .box p{font-size:16px;line-height:1.6}
  .page.st-page .st-sec .box h3{font-size:20px}
  .page.st-page .st-sec .grid.g2{grid-template-columns:1fr}
  .page.st-page .st-notes{flex-wrap:wrap}
  .page.st-page .st-notes .note{flex:1 1 120px;max-width:none}
  .page.st-page .st-notes .note b{font-size:21px}
  .page.st-page .st-notes .note span{font-size:12px}
  .page.st-page .st-notes .note small{font-size:10.5px}
}
@media (max-width:760px) and (max-height:760px){
  #snav .menu{padding-top:calc(96px + env(safe-area-inset-top,0px))}   /* short phones: closer under the bar; the drawer scrolls if it must */
}
@media (prefers-reduced-motion:reduce){
  #snav .menu,body #snav .menu nav a,body #snav .menu .right,body #snav .mn-art svg,#snav .menu-btn{transition:none!important;translate:none!important}
  #snav .menu-btn span{animation:none!important}
  .page.st-page .ch :is(path,ellipse,circle),.page.st-page .ch .is-on :is(path,ellipse,circle){transition:none}
  .page.st-page .ch-all,.page.st-page .ch.is-swap .ch-all,.page.st-page .ch .is-on *{animation:none!important}
  .page.st-page .st-notes .note{transition:none}
  .page.st-page .ch.is-poked .ch-all,.page.st-page .ch .ch-react.is-on *{animation:none!important}
  .page.st-page .ch .eye{transition:none}
}