/* Final prototype: Jacob and Emily's review comments, 4 Nov 2026. Colour-led only. Loaded last. */
:root{--purple-ink:#4E4385}

/* announcement banner: purple, still (was pink and rolling) */
.ticker{display:block!important;background:var(--purple) url(/assets/textures/purple.jpg) center/700px!important;color:var(--white);white-space:normal}
.ticker .run{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 22px;padding:7px 12px;animation:none;width:100%}
.ticker .run span::after{content:none}
.ticker .run span+span::before{content:"\2022";margin-right:22px;opacity:.7}
@media (max-width:760px){.ticker .run span:nth-child(n+4){display:none}.ticker .run{font-size:14px;gap:2px 10px}.ticker .run span+span::before{margin-right:10px}}

/* headers: no thin lines or circles; a second, lighter green wave block */
.hwave{position:absolute;left:0;right:0;bottom:0;width:100%;height:27%;min-height:90px;pointer-events:none;display:block}
.hwave path{fill:var(--green)}
.phead .hwave{height:104px;min-height:0}
.phead{padding-bottom:64px}
.phead p,.phead h1,.phead .brush,.crumb{position:relative}
.hero{padding-bottom:84px}

/* the brush lines: pink so they stand out, as a pink label because pink lettering on teal or purple cannot be read (see legibility test) */
.eyebrow,.hero .wrap>div>.brush,.phead .brush{display:inline-block;width:fit-content;background:var(--pink);color:var(--ink)!important;padding:.1em .5em .16em;border-radius:12px;transform:rotate(-2deg);transform-origin:left;margin-bottom:12px}
.eyebrow{font-size:30px}
.route .brush{color:inherit}

/* orange blocks to pink, black text passes the legibility test */
.j2,html[data-v="colour"] .j2{background:var(--pink);color:var(--ink)}
html[data-v="colour"] .host .box{background:var(--pink)}
html[data-v="colour"] .host h2{color:var(--ink)}
html[data-v="colour"] .host .eyebrow{background:var(--white);color:var(--ink)!important}
html[data-v="colour"] .helpbox{background:var(--pink);color:var(--ink)}
html[data-v="colour"] .helpbox h2,html[data-v="colour"] .helpbox h3{color:var(--ink)}
.helpbox a:not(.btn){color:var(--ink)}
.open{background:var(--pink)}
.steps li{color:var(--ink)}
.steps li::before{background:var(--pink)}
.btn-green{background:var(--green);color:#111}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-white{background:var(--white);color:var(--ink)}
html[data-v="colour"] .btn-ghost{color:var(--purple-ink)}

/* one hand-drawn arrow, from the note to the food */
.tag-arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.tag-arrow path{fill:none;stroke:var(--ink);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.tag-arrow .halo{stroke:var(--white);stroke-width:2.4}
#lineup .tag{z-index:3}

/* mobile: the menu is a full, plain white sheet; search stacks so the box can be seen */
.drawer{border-radius:0;overflow-y:auto}
@media (max-width:1240px){.drawer{bottom:0;inset-block-end:0;background:#fff;box-shadow:none}.drawer a{color:var(--ink)}.drawer .btn-cta{color:#fff}}
@media (max-width:560px){
  .search form{flex-direction:column;border-radius:26px;padding:8px;gap:8px}
  .search input{padding:12px 14px;min-height:48px;width:100%}
  .search .btn{width:100%;justify-content:center;white-space:normal}
}

/* footer owls, perched on the wave */
footer.band{position:relative}
.foot-owls{position:absolute;right:max(16px,calc((100% - 1240px)/2 + 16px));top:-58px;width:150px;z-index:2}
@media (max-width:560px){.foot-owls{width:110px;top:-44px}}

/* app pop-up: a little owl with a speech bubble */
.pop{background:none;border:0;box-shadow:none;padding:0;width:min(340px,100% - 32px);bottom:20px}
.pop .bubble{position:relative;background:var(--white);border:3px solid var(--purple);border-radius:var(--r-md);padding:20px 20px 18px;box-shadow:0 20px 50px rgba(51,51,51,.28)}
.pop .bubble::after{content:"";position:absolute;right:42px;bottom:-14px;width:22px;height:22px;background:var(--white);border-right:3px solid var(--purple);border-bottom:3px solid var(--purple);transform:rotate(45deg)}
.pop .pop-owl{width:61px;margin:12px 22px 0 auto;filter:drop-shadow(0 6px 8px rgba(51,51,51,.3))}
.pop .btn{white-space:nowrap}

/* for venues */
[data-page="venues"] .phead{background:var(--pink);color:var(--ink)}
[data-page="venues"] .phead h1{color:var(--ink)}
[data-page="venues"] .phead .brush{background:var(--white)}
[data-page="venues"] .hwave path{fill:var(--tint-pink)}
[data-page="venues"] .phead .ctas .btn-cta{background:var(--ink)}
html[data-v="colour"] .suits li{background:var(--tint-teal);color:var(--ink)}
html[data-v="colour"] .suits small{color:var(--ink)}
.suits b{font:400 26px/1 var(--head);text-transform:uppercase;color:var(--purple);margin-bottom:8px}
.route:nth-child(2){background:var(--green);color:#111}
.route:nth-child(2) h3{color:#111}
.menu .wrap.two{gap:72px}
.menu .wrap.two h2{margin-bottom:30px}
.menu .wrap.two .eyebrow{margin-bottom:16px}
.steps{gap:20px}
.steps li{padding:26px 28px}
.benefits{gap:14px}
.benefits li{color:var(--ink)}
.one-cta{display:flex;justify-content:center;margin-top:46px}
.one-cta .btn{font-size:21px;padding:.8em 2.4em}
.find .form{margin-top:18px}
.find .proto-note,.find .proto-note a{color:var(--white)}
.find .form .err{color:var(--white)}
.find .opts label{background:var(--white);color:var(--ink);border-color:var(--white)}
.find .form label{color:var(--white)}
.find .form .opts label{color:var(--ink)}

/* our food */
@keyframes wobble{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.gallery:not(.photos-g) figure img{animation:wobble 4.5s ease-in-out infinite;transform-origin:50% 80%}
.gallery:not(.photos-g) figure:nth-child(2n) img{animation-delay:-1.6s}
.gallery:not(.photos-g) figure:nth-child(3n) img{animation-delay:-3s}
.pbody h2,.sec-head h2,.phead h1,.hero h1{line-height:1.02;padding-top:.04em}
.gallery.photos-g figure{overflow:visible}
.gallery.photos-g figcaption{line-height:1.45;padding-bottom:4px}

/* about */
.team{width:100%;max-width:560px;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%;border-radius:var(--r-lg);margin-bottom:18px}
.journey-story .step h3{line-height:1.02}

/* faqs: the jump links land on the right section, below the sticky header */
.chips li{background:none;padding:0}
.chips a{display:inline-block}
.pbody h2[id],section[id],#enquire{scroll-margin-top:150px}
html{scroll-behavior:smooth}
.pbody h2[id]:target{background:var(--tint-pink);border-radius:12px;padding-inline:10px;width:fit-content}

/* contact: owl perching on the card */
.perched{position:relative}
.perch-owl{position:absolute;right:26px;top:-42px;width:60px;z-index:1;filter:drop-shadow(0 3px 3px rgba(51,51,51,.2))}
@media (max-width:980px){.perched{margin-top:30px}}

/* app */
.apphead{aspect-ratio:auto!important;background:none!important}
.apphead img{height:auto!important;object-fit:contain!important}

/* location page */
.loc-intro{padding:72px 0 64px}
.forline{font-size:clamp(36px,4.8vw,68px);max-width:20ch;margin-bottom:18px;line-height:1}
.loc-intro .prose{margin-bottom:34px}
.loc-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.lf{border-radius:var(--r-md);padding:22px 24px;min-width:0}
.lf h3{font-size:28px;margin-bottom:10px;line-height:1}
.lf .w3w{font-size:20px;overflow-wrap:anywhere}
.lf1{background:var(--purple) url(/assets/textures/purple.jpg) center/600px;color:var(--white)}.lf1 h3{color:var(--white)}
.lf2{background:var(--green)}.lf2 h3{color:var(--ink)}.lf2 .w3w,.lf2 .w3w span{color:var(--ink)}
.lf3{background:var(--pink)}.lf3 h3{color:var(--ink)}
.lf4{background:var(--tint-teal)}
.lf .placeholder{padding:10px 12px;font-size:15px;border-radius:14px}
.placeholder.inl{display:inline;padding:0 4px;border-width:1px;font-size:14px}
.inmachine{background:var(--green);color:var(--ink);margin-top:40px}
.inmachine h2{color:var(--ink)}
.inmachine .eyebrow{background:var(--white)}
.inmachine .sec-head a{color:var(--ink)}
.loc-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.loc-row .tile{width:auto;padding:14px 14px 16px}
.loc-row .tile b{font-size:16px;line-height:1.25;display:block}
.nologo{font:400 22px/1.1 var(--brush);color:var(--purple)}
.loc-makers{margin-top:40px}
.loc-map{padding-bottom:64px}
.mapgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;align-items:stretch}
.mapbox{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:440px;background:var(--tint-teal);border:6px solid var(--teal)}
#map{position:absolute;inset:0}
.pin{width:54px;height:54px;border-radius:50%;background:var(--purple);display:grid;place-items:center;box-shadow:0 8px 16px rgba(51,51,51,.3);border:4px solid #fff}
.pin img{width:36px}
.dot{width:22px;height:22px;border-radius:50%;background:var(--teal-ink);border:4px solid #fff;box-shadow:0 4px 10px rgba(51,51,51,.3)}
.list.near{grid-template-columns:minmax(0,1fr);gap:12px}
.loc-help{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:34px;border-radius:var(--r-lg)}
.loc-help h2{font-size:clamp(32px,4vw,52px);margin-bottom:8px;line-height:1}
.loc-help .ctas{margin-top:0}
.phead .himg img{object-position:50% 50%}
@media (max-width:980px){.loc-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.loc-row{grid-template-columns:repeat(3,minmax(0,1fr))}.mapgrid{grid-template-columns:minmax(0,1fr)}.mapbox{min-height:340px}.menu .wrap.two{gap:48px}}
@media (max-width:560px){.loc-facts{grid-template-columns:minmax(0,1fr)}.loc-row{grid-template-columns:repeat(2,minmax(0,1fr))}.loc-intro{padding:48px 0 40px}.loc-help{padding:24px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* review pass: links on bands, section heads, case grid, location photo */
.menu .sec-head a{color:var(--white)}
.menu .wrap.two h2,.find h2{font-size:clamp(38px,4.2vw,60px);color:var(--white);line-height:1}
.cases{grid-template-columns:repeat(3,minmax(0,1fr))}
.cases .case .ctas .btn{margin:0}
.case div{padding:18px}
.case div.ctas{padding:0}
[data-page="location"] .phead .himg{aspect-ratio:1/1;max-height:440px;width:100%}
@media (max-width:980px){.cases{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1240px){.drawer{inset:84px 0 0 0!important}.drawer .btn{justify-content:center;display:flex}}
@media (max-width:560px){.drawer{inset:70px 0 0 0!important}}
.pop .stores{gap:8px;flex-wrap:nowrap}.pop .btn{font-size:16px;padding:.6em .85em}
.journey-story .step{opacity:.8}.journey-story .step.on{opacity:1}
/* about steps: the small "one, two" labels in pink like the others */
.journey-story .step b{display:inline-block;width:fit-content;background:var(--pink);color:var(--ink);padding:.05em .45em .1em;border-radius:10px;font-size:26px}
/* review pass 2: page-header text clears the wave; producer cards match (logos for now, Jacob) */
.phead{padding-bottom:104px}
@media (max-width:980px){.phead{padding-bottom:96px}.phead .himg{position:relative;z-index:1}}
.pcard .pphoto{display:none}
/* phone QA: long place names (Kidderminster, Minsterworth, Whitecross) were clipped */
@media (max-width:560px){[data-page="location"] .phead h1{font-size:9.6vw!important}.forline{font-size:9.4vw}}
@media (max-width:560px){.phead h1,.phead h1.long{font-size:min(52px,11.4vw)}.cgroup h3{font-size:28px}.sec-head h2{overflow-wrap:break-word}}
footer .small a{text-decoration:underline;text-underline-offset:3px}

/* log in, top right, and the prototype editor */
.login-btn{font:700 17px var(--body);background:var(--white);color:var(--purple-ink);border:2px solid var(--white);border-radius:999px;padding:.45em 1em;cursor:pointer;white-space:nowrap;flex:none}
.nav ul{gap:16px}
.nav{gap:18px}
@media (max-width:1279px){.nav ul{display:none}.menu-btn{display:inline-block;margin-left:0}.login-btn{margin-left:auto}
  .drawer{display:block;position:fixed;inset:84px 0 0 0!important;z-index:45;background:#fff;color:var(--ink);padding:10px 16px 22px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s ease;overflow-y:auto}
  .drawer.open{transform:none;opacity:1;pointer-events:auto}
  .drawer a{display:block;padding:14px 4px;border-bottom:2px solid #f1f1f1;text-decoration:none;font-size:20px}
  .drawer a.sub{padding-left:22px;font-size:18px}.drawer .btn{margin-top:14px;border:0;display:flex;justify-content:center}}
@media (max-width:560px){.login-btn{font-size:15px;padding:.4em .75em}.menu-btn{font-size:15px;padding:.4em .75em}.drawer{inset:70px 0 0 0!important}}
html.editing .pop{display:none}
html.editing body{padding-bottom:110px}
html.editing [contenteditable]{outline:2px dashed rgba(97,84,159,.55);outline-offset:2px;border-radius:4px;cursor:text;min-width:1em}
html.editing .menu [contenteditable],html.editing .find [contenteditable],html.editing footer [contenteditable],html.editing .ticker [contenteditable],html.editing .hero [contenteditable],html.editing .phead [contenteditable]{outline-color:rgba(255,255,255,.75)}
html.editing [contenteditable]:focus{outline:3px solid var(--pink);background:rgba(255,255,255,.12)}
html.editing main img[data-ki]{cursor:pointer;outline:3px dashed var(--pink);outline-offset:-3px}
html.editing .tag,html.editing .tag *{pointer-events:auto}
.ed-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:12px max(16px,calc((100% - 1240px)/2));font-size:15px;line-height:1.35;box-shadow:0 -6px 24px rgba(0,0,0,.25)}
.ed-bar[hidden]{display:none}
.ed-t small{display:block;font-size:13px;opacity:.85}
.ed-t small[data-m]{color:#FFC6EA;opacity:1}
.ed-a{display:flex;gap:8px;flex-wrap:wrap}
.ed-a button{font:700 15px var(--body);border-radius:999px;padding:.5em 1em;border:2px solid #fff;background:none;color:#fff;cursor:pointer}
.ed-a .ed-back{order:-1;font:800 18px var(--body);border-radius:999px;padding:.6em 1.5em;background:#1A9A9A;color:#fff;text-decoration:none;align-self:center}.ed-a .ed-back:hover{background:#157878}
.ed-a button[data-a=send]{background:var(--pink);border-color:var(--pink);color:#111}
.ed-a button[data-a=publish]{background:var(--pink);border-color:var(--pink);color:#111;font-weight:800;white-space:nowrap}
.ed-pub{position:absolute;right:max(16px,calc((100% - 1240px)/2));bottom:calc(100% + 8px);width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 170px);overflow:auto;background:#fff;color:var(--ink);border-radius:var(--r-md);padding:16px 18px;box-shadow:0 8px 32px rgba(0,0,0,.35);font-size:15px;line-height:1.4}
.ed-pub[hidden]{display:none}
.ed-pub:focus{outline:none}
.ed-pub-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ed-pub h2,.ed-pub h3{font:800 20px var(--body);color:#61549F;margin:0;letter-spacing:0;text-transform:none}
.ed-pub h3{font-size:15px;margin:14px 0 4px;padding-top:12px;border-top:1px solid #ddd}
.ed-pub p{font-size:15px;margin:6px 0;color:var(--ink)}
.ed-pub p[hidden]{display:none}
.ed-pub ul{list-style:none;margin:6px 0;padding:0;max-height:132px;overflow:auto}
.ed-pub li{font-size:14px;padding:2px 0}
.ed-pub a{color:#157878;text-decoration:underline;font-weight:700}
.ed-pub button{font:700 15px var(--body);border-radius:999px;padding:.5em 1em;border:2px solid #61549F;background:#fff;color:#61549F;cursor:pointer}
.ed-pub button[hidden]{display:none}
.ed-pub button:disabled{opacity:.5;cursor:default}
.ed-pub button[data-a=go]{display:block;width:100%;margin:8px 0 0;background:#61549F;color:#fff;font-weight:800}
.ed-pub button:focus-visible,.ed-a button:focus-visible,.ed-a .ed-back:focus-visible{outline:3px solid #1A9A9A;outline-offset:2px}
.ed-pub .ed-pub-msg{font-weight:700;color:#157878;margin:8px 0}
.ed-pub .ed-pub-msg:empty{display:none}
.ed-pub .bad{color:#B3261E;font-weight:700}
.ed-pub .ed-pub-note{font-size:13px;opacity:.85}
.ed-dlg{border:0;border-radius:var(--r-md);padding:28px;max-width:min(460px,calc(100% - 32px));color:var(--ink)}
.ed-dlg::backdrop{background:rgba(0,0,0,.5)}
.ed-dlg h2{font-size:36px;margin-bottom:10px}
.ed-dlg p{font-size:17px}

.ed-dlg{margin:auto}
html.editing .rail .track,html.editing .gallery img,html.editing #lineup .hero-cut{animation-play-state:paused!important}
html.editing .rail.auto{overflow-x:auto}
html.editing main [data-ki].ph{cursor:pointer;outline:3px dashed var(--pink);outline-offset:-3px}

/* editor QA: phone bar is compact, menu clears it, the white product note shows its edit outline */
html.editing #lineup .tag [contenteditable]{outline-color:rgba(97,84,159,.7)}
html.editing .drawer{padding-bottom:150px}
@media (max-width:560px){.ed-bar{padding:8px 12px;gap:6px}.ed-t span{display:none}.ed-t small{display:inline;font-size:12px;margin-left:4px}.ed-t small[data-m]{display:block;margin-left:0}.ed-a{flex-wrap:nowrap;gap:6px;width:100%}.ed-a button{font-size:13px;padding:.45em .7em;white-space:nowrap;flex:1 1 auto}.ed-a .ed-back{font-size:16px;padding:.5em 1em;white-space:nowrap;flex:1 1 auto;text-align:center}.ed-pub{left:8px;right:8px;width:auto;bottom:calc(100% + 6px);max-height:calc(100vh - 130px);padding:14px}}
html.editing .lf1 [contenteditable],html.editing .j1 [contenteditable],html.editing .j3 [contenteditable],html.editing .proof [contenteditable],html.editing .route:first-child [contenteditable]{outline-color:rgba(255,255,255,.75)}

/* drafted content, 4 Nov */
.lf4 p+p{margin-top:8px}
.prose.legal h2{font-size:clamp(28px,3vw,38px);margin-bottom:10px}
.prose.legal p{max-width:70ch}
.pop .pop-owl{width:70px}
.perch-owl{width:66px;top:-46px}
.route p{max-width:none}

/* Jacob, 4 Nov evening: brush lines plain pink with no background (the soft shadow follows the lettering in his app) */
.eyebrow,.hero .wrap>div>.brush,.phead .brush,.journey-story .step b{background:none!important;padding:0;border-radius:0;color:var(--pink)!important;text-shadow:0 1px 2px rgba(35,35,35,.55)}
.eyebrow{font-size:34px}
/* pink cannot show on a pink block */
html[data-v="colour"] .host .eyebrow,[data-page="venues"] .phead .brush{color:var(--ink)!important;text-shadow:none}
/* thin white arrow; note and arrow move corner to corner as the products change */
.tag-arrow path{stroke:var(--white);stroke-width:.6;stroke-dasharray:1;stroke-dashoffset:0}
.tag-arrow{filter:drop-shadow(0 1px 1.5px rgba(35,35,35,.45))}
.tag-arrow g{display:none}
#lineup[data-p="0"] .tag-arrow g[data-a="0"],#lineup[data-p="1"] .tag-arrow g[data-a="1"],#lineup[data-p="2"] .tag-arrow g[data-a="2"],#lineup[data-p="3"] .tag-arrow g[data-a="3"]{display:block}
#lineup:not([data-p]) .tag-arrow g[data-a="0"]{display:block}
.tag-arrow g path{animation:arrowDraw .7s ease-out both}
.tag-arrow g path+path{animation-delay:.45s;animation-duration:.25s}
@keyframes arrowDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
#lineup .tag{top:auto;left:auto;right:2%;bottom:8%}
#lineup[data-p="1"] .tag{top:3%;bottom:auto;right:0}
#lineup[data-p="2"] .tag{left:0;right:auto;bottom:8%}
#lineup[data-p="3"] .tag{top:3%;bottom:auto;left:0;right:auto}
#lineup .hero-cut,#lineup .disc{z-index:0}
html.editing .tag-arrow g path{animation:none}
@media (prefers-reduced-motion:reduce){.tag-arrow g path{animation:none}}

/* green bands: pink cannot be read there (1.2:1), so these lines stay dark */
.makers .eyebrow,.inmachine .eyebrow{color:var(--ink)!important;text-shadow:none}
/* brownies and blondies: hover swaps to the blondie; touch screens alternate slowly */
.swap-w{display:block;position:relative}
.swap .im{position:relative}
.swap-b{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s ease}
.gallery .swap img:not(.swap-b),.tile.swap .im img:not(.swap-b){transition:opacity .35s ease}
@media (hover:hover){
  .swap:hover .swap-b{opacity:1;pointer-events:auto}
  .swap:hover img:not(.swap-b){opacity:0}
}
@media (hover:none){
  .swap .swap-b{animation:swapB 7s ease-in-out infinite}
  .swap img:not(.swap-b){animation:swapA 7s ease-in-out infinite}
  @keyframes swapB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
  @keyframes swapA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
}
@media (prefers-reduced-motion:reduce){.swap .swap-b,.swap img:not(.swap-b){animation:none}}

/* footer owls: perched, and they flutter off and land again on hover or tap */
.foot-owls{aspect-ratio:254/89;height:auto;cursor:pointer}
.foot-owls .owl{position:absolute;height:auto;display:block;transform-origin:50% 90%}
.foot-owls:hover .owl{filter:brightness(1.05)}
.foot-owls.fly .owl{animation:owlPath var(--t,2.5s) cubic-bezier(.45,.05,.55,.95) var(--d,0s) both,owlFlap .13s linear var(--d,0s) calc(var(--t,2.5s) / .13s) alternate}
.foot-owls .o1{--t:2.3s;--d:0s;--x1:-34px;--y1:-52px;--x2:-74px;--y2:-96px;--x3:-20px;--y3:-44px}
.foot-owls .o2{--t:2.5s;--d:.12s;--x1:26px;--y1:-74px;--x2:-46px;--y2:-128px;--x3:12px;--y3:-58px}
.foot-owls .o3{--t:2.2s;--d:.06s;--x1:-18px;--y1:-60px;--x2:30px;--y2:-112px;--x3:-30px;--y3:-50px}
.foot-owls .o4{--t:2.4s;--d:.2s;--x1:-40px;--y1:-40px;--x2:-22px;--y2:-92px;--x3:-54px;--y3:-36px}
@keyframes owlPath{0%,100%{translate:0 0}8%{translate:0 -10px}30%{translate:var(--x1) var(--y1)}58%{translate:var(--x2) var(--y2)}82%{translate:var(--x3) var(--y3)}}
@keyframes owlFlap{from{transform:rotate(-7deg) scale(1.08,.9)}to{transform:rotate(7deg) scale(.94,1.08)}}
@media (prefers-reduced-motion:reduce){.foot-owls.fly .owl{animation:none}}

/* about, phones and narrow windows: no picture block landing above the footer wave, steps sit together */
@media (max-width:860px){
  .journey-story{display:block}
  .journey-story .stage2{display:none}
  .journey-story .steps2{gap:24px;padding:8px 0 0}
  .journey-story .step{opacity:1}
}
/* about, laptops: the picture always fits the window */
@media (min-width:861px){.journey-story .stage2{width:100%;max-width:min(100%,62vh);justify-self:end}.journey-story .steps2{padding-bottom:14vh}}

/* brownie swap on touch screens: outranks the gallery wobble */
@media (hover:none){
  .gallery:not(.photos-g) figure.swap img.swap-b{animation:swapB 7s ease-in-out infinite}
  .gallery:not(.photos-g) figure.swap img:not(.swap-b){animation:swapA 7s ease-in-out infinite}
}
footer .small.built-by{font-size:12px;opacity:.7;margin-top:10px}
.built-by a{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.built-by a:hover{text-decoration:underline;text-underline-offset:3px}
.built-by img{width:14px;height:auto;flex:none}
.built-by img{width:auto;height:18px}
.built-by a{gap:6px}
footer .small.built-by a{text-decoration:none}
footer .small.built-by{opacity:.85}

/* header logo: the owls leave their branch on hover, loop over the page and land again */
header .logo-fly{position:relative;background:none;display:block}
.logo-art{position:absolute;left:0;top:50%;width:100%;aspect-ratio:740/304;transform:translateY(-50%);display:block}
.logo-base{position:absolute;inset:0;width:100%;height:100%}
.logo-art .owl{position:absolute;height:auto;display:block;transform-origin:50% 90%;max-width:none}
.logo-fly.fly .owl{animation:logoPath var(--t,2.6s) cubic-bezier(.45,.05,.55,.95) var(--d,0s) both,owlFlap .13s linear var(--d,0s) calc(var(--t,2.6s) / .13s) alternate}
.logo-art .t1{--t:2.4s;--d:0s;--x1:-30px;--y1:44px;--x2:30px;--y2:96px;--x3:70px;--y3:30px}
.logo-art .t2{--t:2.7s;--d:.1s;--x1:40px;--y1:70px;--x2:130px;--y2:60px;--x3:50px;--y3:12px}
.logo-art .t3{--t:2.5s;--d:.05s;--x1:80px;--y1:26px;--x2:60px;--y2:112px;--x3:-20px;--y3:50px}
.logo-art .t4{--t:2.6s;--d:.18s;--x1:110px;--y1:46px;--x2:170px;--y2:96px;--x3:60px;--y3:40px}
@keyframes logoPath{0%,100%{translate:0 0}8%{translate:0 -4px}30%{translate:var(--x1) var(--y1)}58%{translate:var(--x2) var(--y2)}82%{translate:var(--x3) var(--y3)}}
header{overflow:visible}
@media (prefers-reduced-motion:reduce){.logo-fly.fly .owl{animation:none}}
/* the logo owls are tiny, so they grow in flight and settle back to size on landing */
@keyframes logoPath{0%,100%{translate:0 0;scale:1}8%{translate:0 -4px;scale:1.3}30%{translate:var(--x1) var(--y1);scale:2.6}58%{translate:var(--x2) var(--y2);scale:3}82%{translate:var(--x3) var(--y3);scale:2.2}}
.logo-art .owl{z-index:2}
/* Gift card purchase */
.gc{background:var(--tint-purple);scroll-margin-top:120px}.gc fieldset{border:0;padding:0;margin:0;min-width:0}.gc legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.gc-designs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:20px}.gc-designs label{cursor:pointer;display:block;position:relative;font-size:16px}.gc-designs input{position:absolute;opacity:0;width:1px;height:1px}.gc-designs img{width:100%;height:auto;border-radius:16px;outline:4px solid transparent;outline-offset:3px;transition:outline-color .15s}.gc-designs span{display:block;margin-top:9px}.gc-designs input:checked+img{outline-color:var(--purple)}.gc-designs input:focus-visible+img{outline-color:var(--ink)}.gc-designs input:checked~span{color:var(--purple)}.gc-designs input:checked~span::before{content:"Selected: "}
.gc-amts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}.gc-amt{background:var(--white);border-radius:var(--r-md);padding:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.gc-amt b{font:400 38px/1 var(--head);color:var(--purple)}.gc-step{display:flex;align-items:center;gap:8px}.gc-step button{width:44px;height:44px;border-radius:50%;border:0;background:var(--purple);color:var(--white);font:700 24px/1 var(--body);cursor:pointer}.gc-step output{min-width:28px;text-align:center;font-size:20px}
.gc-pay{margin-top:26px;background:var(--white);border-radius:var(--r-md);padding:24px}.gc-total{font-size:22px}.gc-total strong{font:400 40px/1 var(--head);color:var(--purple);margin-left:6px}.gc-terms{font-size:15px;line-height:1.45;margin:10px 0 18px;max-width:760px}#gc-buy[disabled]{opacity:.6;cursor:not-allowed}#gc-msg{margin-top:12px;font-size:16px}#gc-msg:empty{display:none}
@media (max-width:860px){.gc-designs{grid-template-columns:repeat(2,minmax(0,1fr))}.gc-amts{grid-template-columns:minmax(0,1fr)}}
/* Jacob's review, 5 Nov */
.ticker .run{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
@media (max-width:1320px){.ticker .run span:nth-child(n+5){display:none}}
@media (max-width:400px){.ticker .run span:nth-child(n+3){display:none}}
.loc-map .sec-head h2{font-size:clamp(15px,4.6vw,60px);white-space:nowrap;overflow-wrap:normal}
html[data-v="colour"] body[data-page="venues"] .phead .eyebrow{color:var(--white)}
.mrail{padding-top:4px}.mrail .mcard{flex:none;width:210px;scroll-snap-align:start;display:block}
.pcard .lg{order:1}.pcard .pphoto{order:2;width:100%;margin:0;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}.pcard b{order:3}.pcard small{order:4}
.pcard .himg.ph{min-height:0;display:grid;place-items:center;padding:12px;font-size:15px;text-align:center}
@media (max-width:760px){.mrail .mcard{width:160px}}
/* Adding through the editor */
.pcard .pphoto{display:block}
.pcard .lg .plogo{width:100%;height:100%;min-height:0;display:grid;place-items:center;font-size:14px;text-align:center}
.it-ctl{display:none}html.editing .it-ctl{display:inline-flex}[aria-hidden="true"] .it-ctl{display:none!important}
.it-add{align-items:center;background:var(--orange);color:var(--ink);border:0;border-radius:24px;padding:10px 20px;font:700 16px var(--body);cursor:pointer;margin:0 16px 14px;max-width:max-content}
.pbody .it-add,.cgroup .it-add{margin-left:0}
.it-item{position:relative}.it-tools{position:absolute;top:8px;right:8px;gap:4px;z-index:3}.it-tools button{background:var(--ink);color:var(--white);border:0;border-radius:14px;padding:5px 10px;font:700 13px var(--body);cursor:pointer}
details.it-item{padding-right:150px}.it-page.it-item{min-height:44px;margin-bottom:10px}
.it-dlg{border:0;border-radius:var(--r-md);padding:26px;width:min(620px,94vw);max-height:90vh;color:var(--ink);font:700 16px/1.4 var(--body)}.it-dlg::backdrop{background:rgba(51,51,51,.7)}.it-dlg h2{font:400 30px/1.05 var(--head);color:var(--purple);margin-bottom:14px}
.it-f{display:block;margin:0 0 14px;border:0;padding:0}.it-f>span,.it-f legend{display:block;margin-bottom:5px;padding:0}.it-f input:not([type=checkbox]),.it-f textarea,.it-f select{width:100%;padding:10px 12px;border:2px solid #CFCFCF;border-radius:12px;font:700 16px var(--body)}.it-f textarea{min-height:90px}
.it-prev{width:120px;height:90px;object-fit:cover;border-radius:10px;margin-top:8px}.it-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:5px 12px;max-height:210px;overflow:auto;font-size:14.5px}.it-checks label{display:flex;gap:7px;align-items:flex-start}
.it-err{color:#B3261E;margin-bottom:8px}.it-err:empty{display:none}.it-row{display:flex;gap:10px;flex-wrap:wrap}.it-row .btn-ghost{color:var(--purple);border-color:var(--purple)}