/* WHAT'S ON - THE HAND-DRAWN PAGE (Nuo, 15 Oct 2026) - on top of ../page.css. whatson.js carries every ruling. The 12 Oct month-poster
   page's sheet is in git history. Everything that reads as a line here is an SVG path drawn by the hand in whatson.js; this sheet
   gives it ink, places it and animates it. Nothing here sets a reading-width max-width on text (CLAUDE.md §7). */

/* DAISY HAND SINCE 20 OCT 2026 (Prue's review, 19 Oct 2026: a thinner hand-drawn font in place of Chorine, which this page served
   from 5 Oct) - LOVED BY THE KING SINCE 21 OCT 2026 (Nuo). The headlines, the month and the dates are drawn as its pen strokes by
   whatson.js; this web font is the same letters (SIL Open Font License - ../../assets/fonts/daisy-hand-OFL.txt) for the few words
   set as text: "today", "tonight", a row's lead, the thank-you. --chor keeps its name so every rule below still reads it. */
@font-face{font-family:"Daisy Hand";src:url("../../assets/fonts/daisy-hand.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--chor:"Daisy Hand","Georgia",serif;--hair:rgba(0,0,0,.16);--neonblue:#1847E8;--pen:#000;--hot:#F36F23}
body{background:var(--sand,#F2ECE9)}
/* PAPER: a faint grain over the whole page, multiplied in, never taking a click */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;mix-blend-mode:multiply;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- the page: the month on the left (it stays in view on a desktop), the posters on the right ---- */
.wo{display:grid;grid-template-columns:minmax(320px,36%) minmax(0,1fr);gap:clamp(28px,4vw,64px);padding:calc(var(--nav,72px) + 26px) var(--pad,40px) 64px;position:relative}
/* WIDER THAN THE PAGE COLUMN (Nuo, 20 Oct 2026, asked after layout.css's 1440px column of 19 Oct had cut the wall to three across on
   2000px+ screens: "let the poster wall go wider than the page column"). The month and the wall run from gutter to gutter (--gut,
   40-96px) instead of the centred 1440px column, so a wide, short screen gets its fourth poster again (Nuo, 16 Oct 2026) and the
   calendar still fits; the bar goes with them so the logo stays over the month. The newsletter band and the footer keep the
   column. No change up to 1440px wide, where the column and the gutter are the same. */
/* and the month and wall take none of layout.css's extra room between sections (up to 48px above, 19 Oct 2026): the wall is sized
   from the screen's height so that two rows show, and that margin pushed the second row 15px below a 780px-tall screen */
@media (min-width:1101px){.wo,#app > .nav{--pad:var(--gut,40px)}#app > main#wo{margin-block:0}}
.wleft{position:sticky;top:calc(var(--nav,72px) + 14px);align-self:start;max-height:calc(100vh - var(--nav,72px) - 24px);overflow:auto;padding:4px 10px 24px 4px;scrollbar-width:thin;color:var(--pen)}
.wtag{margin:0;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:13px;letter-spacing:.16em}
.mword{margin:4px 0 2px;color:var(--pen);pointer-events:none}
.mword svg{display:block;height:clamp(84px,min(9.5vw,16vh),168px);width:auto;max-width:100%;overflow:visible}

/* NO WRITE-ON (Nuo, 21 Oct 2026: "Do not use animations of words appearing letter by letter"): the posters' words, the month and the
   dates stand drawn from the start - nothing here hides or plays a .wl stroke (20 Oct's wrPen is gone). The rest of a poster still
   arrives as before: its drawn strokes, its photograph and its caps words. */
/* drawn strokes (pathLength=1) run on behind the pen */
.armed .dl{stroke-dasharray:1 1;stroke-dashoffset:1}
.armed.go .dl{animation:dlDraw .9s cubic-bezier(.5,0,.3,1) calc(var(--d0,0ms) + var(--d,0ms) + .15s) forwards}
@keyframes dlDraw{to{stroke-dashoffset:0}}
.armed .wc,.armed .poster image{opacity:0}
.armed.go .wc{animation:inkIn .6s ease 1s forwards}
.armed.go .poster image{animation:inkIn .9s ease .25s forwards}
@keyframes inkIn{to{opacity:1}}

/* ---- the month links (and the Christmas pill's slot) ---- */
.mnavs{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:0 0 4px;position:relative;z-index:2}
.mnav{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--pen);text-decoration:none}
.mnav svg{width:44px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
@media (hover:hover){.mnav.prev:hover svg{transform:translateX(-4px)}.mnav.next:hover svg{transform:translateX(4px)}.mnav:hover{color:var(--hot)}}
.mxslot:empty{display:none}

/* ---- the category buttons: a drawn box each; the chosen one gets a pen circle drawn round its word ---- */
.cats{display:flex;flex-wrap:wrap;gap:12px 14px;margin:18px 0 10px}
.cb{position:relative;border:0;background:none;padding:10px 18px;min-height:40px;font-family:var(--head);text-transform:uppercase;font-size:13px;letter-spacing:.1em;cursor:pointer;color:var(--pen)}
.cb .cbox,.cb .ccirc{position:absolute;pointer-events:none;fill:none;vector-effect:non-scaling-stroke;overflow:visible}
.cb .cbox{inset:0;width:100%;height:100%;stroke:var(--pen);stroke-width:1.6;transition:opacity .3s,stroke .3s}
.cb .cbox path,.cb .ccirc path{vector-effect:non-scaling-stroke}
.cb .ccirc{inset:-9px -12px;width:calc(100% + 24px);height:calc(100% + 18px);stroke:var(--hot);stroke-width:3;stroke-linecap:round;opacity:0}
.cb .ccirc path{stroke-dasharray:1 1;stroke-dashoffset:1}
.cb.on .ccirc{opacity:1}
.cb.on .ccirc path{animation:dlDraw .65s cubic-bezier(.5,0,.3,1) forwards}
.cb.on .cbox{opacity:.2}
@media (hover:hover){.cb:hover .cbox{stroke:var(--hot)}}
.cb:focus-visible{outline:2px dashed var(--hot);outline-offset:6px}

/* ---- the calendar: a drawn grid; each date writes itself on; dots say what kind of thing is on ---- */
.cal{position:relative;width:100%;aspect-ratio:7 / var(--rows);margin:12px 0 4px}
.cgrid{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--pen);stroke-width:1.3;opacity:.5;pointer-events:none}
.cgrid path{vector-effect:non-scaling-stroke}
.ccells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr))}
.cwd{display:grid;place-items:center;font-family:var(--head);font-size:12px;letter-spacing:.12em}
.cgap{display:block}
.cd{position:relative;border:0;background:none;padding:0;margin:0;cursor:pointer;display:grid;place-items:center;color:var(--pen);min-height:24px;transition:opacity .3s}
.cd .cn{width:66%;height:auto;max-height:74%;overflow:visible;position:relative;z-index:1}   /* max-height: a calendar fitted to a short screen has cells wider than tall */
.cd .chl{position:absolute;inset:8%;width:84%;height:84%;fill:#C8FF00;opacity:.8;mix-blend-mode:multiply;pointer-events:none}
.cd .ctoday{position:absolute;top:2px;right:2px;z-index:2;font-family:var(--chor);font-size:clamp(11px,1vw,15px);line-height:1;transform:rotate(9deg);pointer-events:none}
.cd .cdots{position:absolute;left:0;right:0;bottom:9%;display:flex;justify-content:center;gap:3px;z-index:1;pointer-events:none}
.dot{display:block;width:7px;height:7px;border-radius:52% 44% 56% 46%;background:var(--c);transition:opacity .3s}
.dot.food{--c:#F36F23}.dot.music{--c:#1847E8}.dot.art{--c:#0F4A2C}.dot.community{--c:#FF3CA0}
.dot.dim{opacity:.18}
.cd .cx{position:absolute;inset:10%;width:80%;height:80%;fill:none;stroke:var(--pen);stroke-width:2;opacity:.55;pointer-events:none}
.cd .cx path{vector-effect:non-scaling-stroke}
.cd.past .cn,.cd.past .cdots{opacity:.32}
.cd .cul{position:absolute;left:12%;bottom:1%;width:76%;height:16%;fill:none;stroke:var(--hot);stroke-width:3;stroke-linecap:round;opacity:0;pointer-events:none}
.cd .cul path{vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:1}
.cd.ul .cul,.cd.sel .cul{opacity:1}
.cd.ul .cul path,.cd.sel .cul path{animation:dlDraw .45s ease forwards}
.cd.sel .cn{color:var(--hot)}
.cd.dim{opacity:.35}
.cd:focus-visible{outline:2px dashed var(--hot);outline-offset:-4px}
@media (hover:hover){.cd.has:hover .cn{color:var(--hot)}.cd.has:hover .cul{opacity:1}.cd.has:hover .cul path{animation:dlDraw .45s ease forwards}}   /* a day you can press: the straight line drawn under its number on hover too (Nuo, 21 Oct 2026) */

/* ---- the lists: one night only, every week, dates to come ---- */
/* BIGGER (Nuo, 16 Oct 2026: "increase the font size of this table, especially on mobile the text in this table looks way too small!"):
   was 13px titles and places, 11px for "to confirm"; now 16 / 15px on a desktop and 17 / 16px on a phone, the dates up to match */
.lh{position:relative;margin:28px 0 6px;font-family:var(--head);font-weight:400;font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.rows{list-style:none;margin:0;padding:0}
.row{position:relative;border-bottom:1px dashed rgba(0,0,0,.22);transition:opacity .3s}
.rbtn{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;row-gap:3px;align-items:baseline;width:100%;text-align:left;border:0;background:none;padding:12px 0;margin:0;cursor:pointer;color:inherit;font:inherit}
.rlead{grid-row:span 2;font-family:var(--chor);font-size:30px;line-height:1}
.weekly .rlead{font-size:21px;line-height:1.1}
.soon .rlead{font-family:var(--head);text-transform:uppercase;font-size:13px;letter-spacing:.1em;line-height:1.25;color:#FF3CA0}
.rname{font-family:var(--head);text-transform:uppercase;font-size:16px;letter-spacing:.05em;line-height:1.3}
.rwhere{font-size:15px;line-height:1.4;opacity:.75}
.row.past{opacity:.5}
.row .rx{position:absolute;left:0;top:calc(50% - 5px);width:100%;height:10px;fill:none;stroke:var(--pen);stroke-width:2;pointer-events:none}
.row .rx path{vector-effect:non-scaling-stroke}
.row.dim{opacity:.28}
.row.hot .rname,.rbtn:focus-visible .rname{text-decoration:underline wavy var(--hot) 2px;text-underline-offset:3px}   /* 3px, not 5: at 5 the wave sat on the place line under it */
@media (hover:hover){.rbtn:hover .rname{text-decoration:underline wavy var(--hot) 2px;text-underline-offset:3px}}
@media (max-width:860px){
  .lh{font-size:16px;margin-top:30px}
  .rbtn{grid-template-columns:92px minmax(0,1fr);padding:14px 0}
  .rlead{font-size:30px}.weekly .rlead{font-size:22px}.soon .rlead{font-size:14px}
  .rname{font-size:17px;letter-spacing:.04em}
  .rwhere{font-size:16px}
}

/* ---- the wall: posters taped up at a slight angle; hover straightens one and lifts it ---- */
/* THREE ACROSS, TWO WHOLE ROWS ON SCREEN (Nuo, 15 Oct 2026, night; asked: always fit, still three on a big screen). A poster is the
   narrower of a third of the column and what two rows (4:5, plus the gap, the nav, the paper above and a little air) leave of the
   screen's height: 2 x 1.25w + gap <= 100vh - nav - 78px. 1440x900: 246px wide, both rows on screen with room to spare; a short
   screen gets smaller posters, centred. The vh line is the fallback for a browser without svh. --cols is 4 when whatson.js finds a
   fourth poster of the same size fits beside the three (Nuo, 16 Oct 2026: "on super wide screens, show 4 posters side by side"). */
.wall{--gx:clamp(22px,2.4vw,40px);--gy:clamp(30px,3vw,48px);display:grid;grid-template-columns:repeat(var(--cols,3),min(calc((100% - (var(--cols,3) - 1) * var(--gx)) / var(--cols,3)),calc((100vh - var(--nav,72px) - 78px - var(--gy)) / 2.5)));grid-template-columns:repeat(var(--cols,3),min(calc((100% - (var(--cols,3) - 1) * var(--gx)) / var(--cols,3)),calc((100svh - var(--nav,72px) - 78px - var(--gy)) / 2.5)));justify-content:center;gap:var(--gy) var(--gx);padding-top:16px;align-items:start}
.pz{position:relative;margin:0;container-type:inline-size;transform:rotate(var(--tilt,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease,filter .35s ease,translate .55s cubic-bezier(.2,.8,.2,1);z-index:1}
.pzb{display:block;width:100%;aspect-ratio:4 / 5;padding:0;margin:0;border:0;background:#e9e1d9;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.05),0 16px 28px -14px rgba(0,0,0,.45)}
.pzb .svgslot,.pzb svg.poster{display:block;width:100%;height:100%}
.pzb:focus-visible{outline:3px dashed var(--hot);outline-offset:6px}
.pz .tape{position:absolute;top:0;z-index:3;height:auto;fill:rgba(236,226,206,.86);stroke:rgba(0,0,0,.1);stroke-width:1;pointer-events:none}
@media (hover:hover){
  .pz:hover{transform:rotate(0deg) translateY(-6px) scale(1.012);z-index:4}
  .pz:hover .pcap,.pz:focus-within .pcap{opacity:1;transform:none}
}
.pcap{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;margin:0;padding:12px 14px;background:var(--sand,#F2ECE9);color:var(--pen);font-size:13px;line-height:1.35;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;pointer-events:none;box-shadow:0 10px 22px -8px rgba(0,0,0,.35)}
.pcap b{display:block;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.pcap span{display:block;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;opacity:.75;margin-top:2px}
.pcap i{display:block;font-style:normal;margin-top:6px}
/* a date picked on the left: its posters ringed in pen, the rest stepped back */
.pz .ring{position:absolute;left:-7%;top:-6%;width:114%;height:112%;z-index:5;fill:none;stroke:var(--hot);stroke-width:4;stroke-linecap:round;pointer-events:none;opacity:0;overflow:visible}
.pz .ring path{vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:1}
.pz.ringed .ring{opacity:1}
.pz.ringed .ring path{animation:dlDraw .75s cubic-bezier(.5,0,.3,1) forwards}
.pz.faded{opacity:.32;filter:grayscale(.7)}
.pz.off{display:none}
/* ---- PUT UP (Nuo, 15 Oct 2026, night: "animate them like the posters are being put on a wall"; asked: drop, land, tape; on first
   view then as each is scrolled to, once; the letters after it lands). whatson.js gives each its turn (--put) and its lean on the
   way down (--swing), and marks it .up when it has landed so a later press or take-down starts clean. ---- */
.pz.armed:not(.go){opacity:0}
.pz.armed.go:not(.up){animation:putUp .8s cubic-bezier(.3,.75,.35,1) var(--put,0ms) backwards}
.pz.armed.go:not(.up) .pzb{animation:putShadow .8s ease var(--put,0ms) backwards}
.pz.armed.go:not(.up) .tape{animation:tapeOn .34s cubic-bezier(.2,.9,.3,1.25) calc(var(--put,0ms) + .52s) backwards}
.pz.armed.go .poster image{animation-delay:var(--put,0ms)}                 /* the photograph is printed: it arrives with the paper */
.pz.armed.go .wc{animation-delay:calc(var(--d0,0ms) + .2s)}                 /* the small type with the letters, after the landing */
@keyframes putUp{
  0%{opacity:0;transform:translateY(-48px) rotate(calc(var(--tilt,0deg) + var(--swing,4deg))) scale(1.05)}
  22%{opacity:1}
  58%{transform:translateY(4px) rotate(calc(var(--tilt,0deg) - var(--swing,4deg) * .18)) scale(1)}
  78%{transform:translateY(-1.5px) rotate(var(--tilt,0deg)) scale(1)}
  100%{opacity:1;transform:rotate(var(--tilt,0deg))}}
@keyframes putShadow{0%{box-shadow:0 46px 50px -24px rgba(0,0,0,.3)}58%{box-shadow:0 1px 0 rgba(0,0,0,.05),0 8px 14px -10px rgba(0,0,0,.5)}100%{box-shadow:0 1px 0 rgba(0,0,0,.05),0 16px 28px -14px rgba(0,0,0,.45)}}
@keyframes tapeOn{0%{opacity:0;scale:1.4;translate:0 -12px}70%{opacity:1;scale:.96;translate:0 1px}100%{opacity:1;scale:1;translate:0 0}}
/* TAKEN DOWN (a category the poster is not in, or a new month): the tape comes off, a corner lifts, it falls away */
.wall .pz.down,.wall .pz.armed.go.down{animation:takeDown .42s cubic-bezier(.55,0,.8,.3) var(--put,0ms) forwards;pointer-events:none}
.wall .pz.down .tape,.wall .pz.armed.go.down .tape{animation:tapeOff .14s ease var(--put,0ms) forwards}
@keyframes takeDown{0%{opacity:1;transform:rotate(var(--tilt,0deg))}30%{opacity:1;transform:translateY(-8px) rotate(calc(var(--tilt,0deg) + var(--swing,4deg) * .8))}100%{opacity:0;transform:translateY(70px) rotate(calc(var(--tilt,0deg) + var(--swing,4deg) * 2.6))}}
@keyframes tapeOff{to{opacity:0;translate:0 -10px}}
/* PRESSED ON AGAIN: a poster that stays slides to its new place (translate, from the script), then is pressed flat and re-taped */
.wall .pz.up.press .pzb{animation:pressOn .4s ease}
.wall .pz.up.press .tape{animation:tapeRe .34s cubic-bezier(.2,.9,.3,1.25)}
@keyframes pressOn{0%{scale:1}40%{scale:.985}100%{scale:1}}
@keyframes tapeRe{0%{opacity:.4;scale:1.25;translate:0 -8px}70%{opacity:1;scale:.97;translate:0 1px}100%{opacity:1;scale:1;translate:0 0}}
/* today: the word scribbled on the poster's corner */
.tonight{position:absolute;top:-24px;right:-10px;z-index:6;display:flex;flex-direction:column;align-items:center;transform:rotate(7deg);font-family:var(--chor);font-size:clamp(20px,10cqw,34px);line-height:1;color:var(--pen);pointer-events:none}
.tonight svg{width:3.2em;height:14px;fill:none;stroke:var(--hot);stroke-width:3;stroke-linecap:round}
.tonight svg path{vector-effect:non-scaling-stroke}
.wempty{margin:24px 0;font-family:var(--head);text-transform:uppercase;font-size:13px;letter-spacing:.12em}

/* ---- the release box, drawn ---- */
.release{padding:12px var(--pad,40px) 90px}
.rframe{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;padding:40px 48px}
.rbox{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--pen);stroke-width:2;pointer-events:none}
.rbox path{vector-effect:non-scaling-stroke}
.release h2{margin:0 0 8px}
.release p{margin:0}
#rel{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
#rel input[type=email]{flex:1 1 220px;min-height:44px;border:0;border-bottom:2px solid var(--pen);background:transparent;padding:8px 4px;font:inherit;color:inherit}
.hbtn{position:relative;border:0;background:none;padding:13px 22px;min-height:44px;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:13px;cursor:pointer;color:var(--pen)}
.hbtn svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--pen);stroke-width:1.8;pointer-events:none}
.hbtn svg path{vector-effect:non-scaling-stroke}
@media (hover:hover){.hbtn:hover{color:var(--hot)}.hbtn:hover svg{stroke:var(--hot)}}
.rthanks{flex:1 0 100%;font-family:var(--chor);font-size:24px}
/* the newsletter's choices and consent words (Nuo, 7 Nov 2026, Option A) */
.rint{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:8px;border:0;margin:4px 0 0;padding:0;min-width:0}
.rint legend{flex:1 0 100%;padding:0;margin:0 0 8px;font-family:var(--head);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.rchip{position:relative;display:inline-flex;cursor:pointer}
.rchip input{position:absolute;opacity:0;width:1px;height:1px}
.rchip span{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid var(--pen);font-family:var(--head);font-size:13px;letter-spacing:.04em;text-transform:uppercase;transition:background .2s,color .2s}
.rchip input:checked + span{background:var(--pen);color:#F2ECE9}
.rchip input:focus-visible + span{outline:2px solid var(--hot);outline-offset:2px}
@media (hover:hover){.rchip:hover span{color:var(--hot);border-color:var(--hot)}.rchip input:checked + span:hover{color:#F2ECE9}}
.rsite{flex:1 0 100%;min-width:0;display:flex;align-items:center;gap:12px;white-space:nowrap;font-family:var(--head);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.rsite select{flex:1 1 auto;min-width:0;width:100%;max-width:100%;min-height:40px;border:0;border-bottom:2px solid var(--pen);background:transparent;font:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:inherit;padding:4px}
.rhp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.rnote{flex:1 0 100%;font-size:12px!important;line-height:1.45;opacity:.75}
.rnote a{color:inherit}
.rthanks.bad{color:#B3261E}
/* the hand-drawn frame is stretched to the box, so a taller form on a phone stretches its wobble too: more air inside it there */
@media (max-width:860px){.release .rframe{padding:64px 28px 64px}}

/* ---- THE POP-UP: the event's details, its real poster on the left, a hand-written Book and a drawn QR code ---- */
body.evm-on{overflow:hidden}
.evm{margin:auto;padding:0;border:0;background:transparent;color:var(--pen);width:min(1040px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 48px);overflow:visible}
.evm::backdrop{background:rgba(0,0,0,.62)}
.evm-in{position:relative;background:var(--sand,#F2ECE9);box-shadow:0 30px 80px rgba(0,0,0,.35);animation:evmIn .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes evmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}   /* no tilt: a rotating box moved the close button under DG_POPUP_INSET's measure (audit_popup_inset.js, 15 Oct 2026) */
.evm-x{position:absolute;top:10px;right:10px;z-index:3;width:40px;height:40px;border-radius:50%;border:1.5px solid currentColor;background:var(--sand,#F2ECE9);color:inherit;font:400 24px/1 var(--head);cursor:pointer;display:grid;place-items:center}
@media (hover:hover){.evm-x:hover{color:var(--hot)}}
.evm-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);max-height:calc(100svh - 48px);overflow:auto;overscroll-behavior:contain}
.evm-pic{align-self:start;position:sticky;top:0;padding:clamp(16px,2.4vw,32px)}
.evm-pic img,.evm-pic svg{display:block;width:100%;height:auto;background:#fff;padding:10px;box-shadow:0 14px 30px rgba(0,0,0,.14);transform:rotate(-1deg)}
.evm-pic svg{box-sizing:border-box}
.evm-txt{padding:clamp(20px,3vw,40px) clamp(20px,3vw,44px) clamp(24px,3vw,40px) 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.evm-kick{margin:0;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.14em;color:var(--neonblue)}
.evm-t{margin:0;padding-right:44px;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.4vw,34px);line-height:1.05;letter-spacing:.01em}
.evm-when{margin:0;font-family:var(--head);text-transform:uppercase;font-size:14px;letter-spacing:.06em}
.evm-places{list-style:none;margin:0;padding:10px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 20px;border-top:1px solid var(--hair)}
.evm-places li{display:flex;flex-direction:column;font-size:14px;line-height:1.35}
.evm-places b{font-weight:400;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.evm-place{margin:0;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em;border-top:1px solid var(--hair);padding-top:10px}
.evm-acts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 22px;margin:6px 0}
.evm-stat{font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.12em;align-self:center}
/* Book, hand-written: the word stands drawn; a straight line drawn by hand goes under it on hover (Nuo, 21 Oct 2026) */
.hbook{display:inline-flex;flex-direction:column;align-items:flex-start;color:var(--pen);text-decoration:none;min-height:44px}
.hbook .bkw{display:block;height:clamp(52px,6vw,72px);width:auto;overflow:visible}
.hbook .bku{display:block;width:clamp(96px,11vw,130px);height:14px;fill:none;stroke:var(--hot);stroke-width:3;stroke-linecap:round;overflow:visible}
.hbook .bku path{vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease}
@media (hover:hover){.hbook:hover{color:var(--hot)}.hbook:hover .bku path{stroke-dashoffset:0}}
.hbook:focus-visible .bku path{stroke-dashoffset:0}
.evm-qr{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin-left:auto}
.evm-qr:empty{display:none}
a.evm-qr{color:inherit;text-decoration:none;cursor:pointer}   /* the code is a link (6 Nov 2026, 23:02) */
a.evm-qr .qr{transition:transform .2s}
a.evm-qr:hover .qr{transform:rotate(0deg) scale(1.04)}
a.evm-qr:hover .qrk{color:#F36F23}
.evm-qr .qr{display:block;width:128px;height:128px;transform:rotate(1.2deg)}
.qrk{font-family:var(--head);text-transform:uppercase;font-size:10px;letter-spacing:.14em}
.evm-p{margin:0;font-size:16px;line-height:1.55}
.evm-k{margin:8px 0 0;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:12px;letter-spacing:.14em}
.evm-wines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.4}
.evm-wines li{display:flex;flex-direction:column}
.evm-wines li>b{font-weight:500}
.evm-wines.ww span{display:flex;flex-direction:column}
.evm-note{margin:0;font-size:15px}
.evm-q{margin:6px 0;padding:0 0 0 14px;border-left:2px solid var(--neonblue);font-size:15px;line-height:1.5}
.evm-gp{margin:6px 0 0}
.evm-gp img{display:block;width:100%;max-width:360px;height:auto;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.evm-gp figcaption{margin-top:8px;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.12em}

/* ---- a phone: the month first, then the posters, one a row (two on a wide phone or a tablet) ---- */
@media (max-width:860px){
  .wo{grid-template-columns:minmax(0,1fr);gap:28px;padding:calc(var(--nav,60px) + 18px) var(--pad,20px) 48px}
  .wleft{position:static;max-height:none;overflow:visible;padding:0}
  .mword svg{height:clamp(72px,22vw,120px)}
  .wall{grid-template-columns:minmax(0,1fr);gap:40px}
  .tonight{right:-4px}
  .rframe{grid-template-columns:minmax(0,1fr);padding:28px 22px}
  .evm{width:calc(100vw - 16px);max-height:calc(100svh - 16px)}
  .evm-body{grid-template-columns:minmax(0,1fr);max-height:calc(100svh - 16px)}
  .evm-pic{position:static;padding:16px 16px 0;max-width:340px}
  .evm-txt{padding:16px}
  .evm-qr{margin-left:0}
}
@media (min-width:600px) and (max-width:860px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
  .pz,.cd,.row,.dot{transition:none}
  .pz.ringed .ring path,.cb.on .ccirc path,.cd.ul .cul path,.cd.sel .cul path,.cd.has:hover .cul path{animation:none;stroke-dashoffset:0}
  .evm-in{animation:none}
}
/* the Christmas pill (festive-blocks.js) is drawn for a dark hero; on this page's paper it takes the ink */
.wleft .mxslot a.pill.light.mxmas{color:var(--pen);border-color:var(--pen);background:transparent}
@media (hover:hover){.wleft .mxslot a.pill.light.mxmas:hover{color:var(--hot);border-color:var(--hot)}}
.wright{padding:0;margin:0;min-width:0}   /* page.css pads every <section> at the sides; the wall takes the whole column */

/* the St Tropez posters (6 Nov 2026): their type is drawn at full size and scaled down; geometricPrecision stops Chromium snapping the
   glyphs to a hinted size, which at 3x on a phone drew the words above where they sit (half under the date banner) */
svg.poster text{text-rendering:geometricPrecision}

/* PHONE: the month, the categories and the calendar, then straight to the posters (Nuo, 6 Nov 2026, 21:55: "Hide this on mobile, go
   directly to the posters") - One night only, Every week and Dates to come stay on a desktop only */
@media (max-width:860px){.wleft h2.lh,.wleft .rows{display:none}}

/* THE CHRISTMAS DOODLE beside the month's word (Nuo, 6 Nov 2026, 21:57: "Move link to Christmas page up and animate as a Christmas
   doodle / Make it look super cool and cute"; the markup is festive-blocks.js doodle()). The tree draws on, the star pops and
   twinkles, the baubles drop in and swing, the garland draws across, snow falls; it wiggles on hover. Reduced motion: drawn, still. */
.mhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mhead .mword{flex:1 1 auto;min-width:0}
.mhead .mxdoodle{flex:none;align-self:flex-start;margin-top:-6px}
a.xdoodle{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--pen);transform:rotate(-6deg);transform-origin:50% 90%;-webkit-tap-highlight-color:transparent}
a.xdoodle svg{display:block;width:clamp(78px,22vw,118px);height:auto;overflow:visible}
.xd-ink{fill:none;stroke:#0F4A2C;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:xdDraw 1.3s cubic-bezier(.5,0,.3,1) .2s forwards}
.xd-trunk{stroke:#6B3E1F;animation-delay:1.2s;animation-duration:.4s}
.xd-spark{stroke:#F6C84C;stroke-width:2.4;animation-delay:2.4s;animation-duration:.5s}
.xd-garland{fill:none;stroke:#F36F23;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:xdDraw .8s ease 1.5s forwards}
.xd-star{transform-box:fill-box;transform-origin:50% 55%;transform:scale(0) rotate(-120deg);animation:xdPop .6s cubic-bezier(.3,1.6,.4,1) 1.9s forwards,xdTwinkle 2.4s ease-in-out 2.6s infinite}
.xd-bb{transform-box:fill-box;transform-origin:50% -60%;transform:translateY(-14px) scale(0);opacity:0;animation:xdDrop .55s cubic-bezier(.3,1.5,.4,1) forwards,xdSwing 2.6s ease-in-out infinite;animation-delay:calc(1.6s + var(--i) * .12s),calc(2.4s + var(--i) * .3s)}
.xd-snow{fill:#9FB8D8;opacity:0;animation:xdSnow 4.2s linear infinite;animation-delay:calc(var(--i) * .6s)}
.xd-word{font-family:var(--chor);font-size:clamp(22px,6vw,30px);line-height:1;margin-top:2px;white-space:nowrap;opacity:0;transform:translateY(6px);animation:xdIn .5s ease 2.2s forwards}
.xd-word i{font-style:normal;display:inline-block;color:#F36F23;animation:xdNudge 1.4s ease-in-out 2.8s infinite}
@keyframes xdDraw{to{stroke-dashoffset:0}}
@keyframes xdPop{to{transform:scale(1) rotate(0)}}
@keyframes xdTwinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(14deg)}}
@keyframes xdDrop{to{transform:none;opacity:1}}
@keyframes xdSwing{0%,100%{rotate:0deg}50%{rotate:7deg}}
@keyframes xdSnow{0%{opacity:0;transform:translateY(0)}12%{opacity:.9}100%{opacity:0;transform:translate(6px,150px)}}
@keyframes xdIn{to{opacity:1;transform:none}}
@keyframes xdNudge{0%,100%{transform:none}50%{transform:translateX(4px)}}
@media (hover:hover){a.xdoodle:hover{animation:xdWiggle .5s ease}a.xdoodle:hover .xd-word{color:#F36F23}}
@keyframes xdWiggle{0%,100%{transform:rotate(-6deg)}25%{transform:rotate(3deg) scale(1.05)}60%{transform:rotate(-9deg)}}
a.xdoodle:active{transform:rotate(-2deg) scale(.95)}
@media (prefers-reduced-motion:reduce){.xd-ink,.xd-garland{animation:none;stroke-dashoffset:0}.xd-star,.xd-bb,.xd-word{animation:none;transform:none;opacity:1}.xd-snow{display:none}.xd-word i{animation:none}a.xdoodle:hover{animation:none}}
/* NO BOX ON THE HAND-WRITTEN BOOK (Nuo, 6 Nov 2026, 23:04: "Remove black box around all book button"): the pop-up's Book is the word and its
   drawn underline only; layout.css ONE BUTTON's border and padding are taken off here (higher specificity, same !important). Orange on hover stays. */
html body a.evm-tix.hbook{border:0!important;padding:4px 0!important;background:transparent!important}
/* THE KICKER, TYPED (Nuo, 6 Nov 2026, 23:07): whatson.js wtagHTML; the heroes' typewriter keyframes (twStrike, twBlink, twGone in layout.css),
   the cursor black on the light ground and held on each letter until the next is struck (--h, set in whatson.js) */
.wtag.wtw .twd{white-space:nowrap}
.wtag.wtw .twl{position:relative;display:inline-block;opacity:0;animation:twStrike .16s cubic-bezier(.2,1.6,.4,1) var(--d) forwards}
.wtag.wtw .twl::after{content:"";position:absolute;left:calc(100% + .1em);top:.05em;bottom:0;width:.6em;background:#000;opacity:0;animation:twCur var(--h,90ms) linear var(--d) forwards}
.wtag.wtw .twl.twe::after{animation:twBlink 1s linear var(--d) 4 forwards,twGone .4s ease calc(var(--d) + 4s) forwards}
/* THE MONTH, WRITTEN (Nuo, 6 Nov 2026, 23:32; whatson.js drawWord): every stroke of the month's word inked in turn, pen pace x1.6 */
.mword.writing .wl path{stroke-dasharray:1 1;stroke-dashoffset:1;animation:mwInk calc(var(--t,120ms) * 1.6) cubic-bezier(.45,.05,.55,.95) calc(var(--d,0ms) * 1.6 + 150ms) forwards}
@keyframes mwInk{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.mword.writing .wl path{animation:none;stroke-dashoffset:0}}
/* THE DISCO BALL (Nuo, 6 Nov 2026, 23:35; whatson.js discoBall): each row of mirrors slides one half of its strip, seamlessly; the glints twinkle */
svg.poster .dbr{animation:dbSpin var(--dur,7s) linear infinite}
@keyframes dbSpin{from{transform:translateX(0)}to{transform:translateX(calc(var(--p) * -1))}}
svg.poster .dbg{transform-box:view-box;animation:dbGlint 2.4s ease-in-out infinite;animation-delay:calc(var(--k) * .6s);opacity:0}
@keyframes dbGlint{0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}45%{opacity:1;transform:scale(1) rotate(45deg)}60%{opacity:.9}}
@media (prefers-reduced-motion:reduce){svg.poster .dbr,svg.poster .dbg{animation:none}svg.poster .dbg{opacity:.9}}
@media print{svg.poster .dbr,svg.poster .dbg{animation:none}svg.poster .dbg{opacity:.9}}

/* == PUT ON THE WALL, MORE OF IT (Nuo, 6 Nov 2026, 23:46: "Animate these posters when they appear like they are being put on a wall, make it
   looks super cool and impressive but also elegant") == the same moment, redrawn in depth and kept to the same clock (LAND 860ms, the tape at
   --put + .52s, which the letters and the harness wait on): the poster is carried in off the wall - lifted towards you, tipped back at the top,
   turned a little - then pressed flat, top edge first, the way a hand smooths a sheet; it gives a hair as the tape is struck, settles, and a
   soft light passes once across the fresh paper. Its shadow travels with it, wide and far, then close. Reduced motion: none of it. */
.pz.armed.go:not(.up){animation:putWall .86s cubic-bezier(.22,.8,.25,1) var(--put,0ms) backwards;transform-origin:50% 0}
@keyframes putWall{
  0%{opacity:0;transform:perspective(1400px) translate3d(0,-36px,140px) rotateX(22deg) rotateY(calc(var(--swing,4deg) * -1.5)) rotate(calc(var(--tilt,0deg) + var(--swing,4deg)))}
  18%{opacity:1}
  52%{transform:perspective(1400px) translate3d(0,3px,0) rotateX(-2deg) rotateY(0deg) rotate(calc(var(--tilt,0deg) - var(--swing,4deg) * .15))}
  64%{transform:perspective(1400px) translate3d(0,0,0) rotateX(.6deg) rotate(var(--tilt,0deg)) scale(.992)}
  80%{transform:perspective(1400px) rotateX(-.2deg) rotate(var(--tilt,0deg)) scale(1.002)}
  100%{opacity:1;transform:rotate(var(--tilt,0deg))}}
.pz.armed.go:not(.up) .pzb{animation:putWallShadow .86s ease var(--put,0ms) backwards}
@keyframes putWallShadow{
  0%{box-shadow:0 70px 70px -30px rgba(0,0,0,.18),0 30px 40px -20px rgba(0,0,0,.12)}
  52%{box-shadow:0 1px 0 rgba(0,0,0,.06),0 6px 10px -8px rgba(0,0,0,.5)}
  100%{box-shadow:0 1px 0 rgba(0,0,0,.05),0 16px 28px -14px rgba(0,0,0,.45)}}
/* the light across the fresh paper, once, after the tape */
.pzb{position:relative;overflow:hidden}
.pz.armed.go .pzb::after{content:"";position:absolute;inset:-10% -60%;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);
  animation:paperLight 1.1s cubic-bezier(.4,0,.2,1) calc(var(--put,0ms) + .9s) 1 forwards}
@keyframes paperLight{0%{opacity:1;transform:translateX(-45%)}85%{opacity:1}100%{opacity:0;transform:translateX(45%)}}
@media (prefers-reduced-motion:reduce){.pz.armed.go:not(.up),.pz.armed.go:not(.up) .pzb,.pz.armed.go .pzb::after{animation:none!important}}
/* THE OUTDOOR WORKSHOPS TREES (Nuo, 6 Nov 2026, 23:47; whatson.js outdoorTrees): each sways from its foot at its own pace, the canopy breathes, two leaves fall */
svg.poster .otree{transform-box:view-box;animation:oSway calc(3.6s + var(--k) * .7s) ease-in-out infinite alternate;animation-delay:calc(var(--k) * -.9s)}
@keyframes oSway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
svg.poster .ocan{transform-box:view-box;animation:oBreathe calc(2.8s + var(--k) * .5s) ease-in-out infinite alternate}
@keyframes oBreathe{from{transform:scale(1)}to{transform:scale(1.035)}}
svg.poster .oleaf{transform-box:fill-box;transform-origin:center;opacity:0;animation:oFall 5.5s ease-in infinite;animation-delay:calc(var(--j) * 1.4s)}
@keyframes oFall{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}50%{transform:translate(18px,70px) rotate(140deg)}85%{opacity:1}100%{opacity:0;transform:translate(-6px,140px) rotate(300deg)}}
@media (prefers-reduced-motion:reduce){svg.poster .otree,svg.poster .ocan,svg.poster .oleaf{animation:none}}
@media print{svg.poster .otree,svg.poster .ocan,svg.poster .oleaf{animation:none}}
/* CHORINE for Wine Wednesday's poster title (Nuo, 7 Nov 2026, 00:32): the brand's face from 3. Brand & Design / 02. Fonts, served from git
   (website-plan/assets/fonts/Chorine-Regular.woff2, already used by the prototype's hand-written buttons until 4 Nov) */
@font-face{font-family:"Chorine";src:url(../../assets/fonts/Chorine-Regular.woff2) format("woff2");font-display:block}