/* hooodl.com: the main page, for neighbours (customers) first.
   The frame is the /creators editorial dark look (creators.css); the cards
   inside it use the customer app's warm look (src/theme/warm.ts), so the
   page shows what people get when they open the app. */
.hm {
  --w-ground: #F7F4EE; --w-card: #FFFFFF; --w-ink: #1A1814; --w-muted: #6A6358; --w-line: #E7E1D6; --w-chip: #EFEAE1;
  --w-event: #1F3F8C; --w-offer: #FFE81A; --w-help: #1B6E43;
  --w-shadow: 0 1px 2px rgba(26,24,20,.05), 0 10px 28px rgba(26,24,20,.07);
  --t-social: #E07A5F; --t-learn: #7C6BB0; --t-culture: #C2577A; --t-family: #E39A2D; --t-out: #4E8F5E;
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.t-social { background: var(--t-social); } .t-learn { background: var(--t-learn); } .t-culture { background: var(--t-culture); }
.t-family { background: var(--t-family); } .t-out { background: var(--t-out); }

/* app marks: blue date tile for events, yellow value tag for offers */
.date { position: absolute; left: 10px; top: 10px; display: grid; justify-items: center; min-width: 44px; padding: 6px 8px 7px; border-radius: 12px; background: var(--w-event); color: #fff; font: 400 19px/1 var(--display); box-shadow: 0 4px 12px rgba(26,24,20,.2); }
.date small { font: 800 9.5px/1 var(--body); letter-spacing: .1em; margin-bottom: 4px; opacity: .85; }
.vtag { position: absolute; right: 10px; top: 10px; padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--w-ink); font: 800 12px/1 var(--body); box-shadow: 0 4px 12px rgba(26,24,20,.2); }
.v-offer { background: var(--w-offer); font: 400 15px/1 var(--display); padding: 8px 11px; }
.v-help { background: var(--w-help); color: #fff; }
.v-reg { background: rgba(255,255,255,.92); }

/* ---------- hero ---------- */
.hm-hero { position: relative; padding-block: 64px 24px; overflow: hidden; }
.hm-hero .glow { background: radial-gradient(560px 380px at 72% 38%, rgba(255,232,26,.15), transparent 70%), radial-gradient(520px 320px at 12% 0%, rgba(31,63,140,.22), transparent 70%); }
.hm-hero-in { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.hm-copy { min-width: 0; }
.hm-hero h1 { font-size: clamp(42px, 6vw, 88px); line-height: .98; letter-spacing: -.035em; margin: 0; max-width: 14ch; }
.hm-hero .lede { max-width: 36ch; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; color: var(--soft); margin: 24px 0 32px; text-wrap: balance; }
.hm-hero .ctas { align-items: center; gap: 28px; }

.hm-stage { position: relative; display: grid; justify-items: center; padding-block: 20px 30px; min-width: 0; }
.phone { position: relative; width: 300px; height: 612px; border-radius: 46px; background: var(--w-ground); color: var(--w-ink); border: 10px solid #1d1c19; box-shadow: 0 0 0 1px var(--line2), 0 50px 120px rgba(0,0,0,.65); overflow: hidden; display: flex; flex-direction: column; }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 4px; font: 700 12px/1 var(--body); }
.ph-status span:last-child { font-size: 7px; letter-spacing: 1px; }
.ph-isl { width: 84px; height: 22px; border-radius: 999px; background: #1d1c19; }
.ph-scroll { flex: 1; padding: 10px 14px 0; overflow: hidden; }
.ph-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.ph-top small { display: block; color: #B2456C; font-size: 11.5px; font-weight: 700; }
.ph-top b { font: 400 15px/1.15 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.ph-area { white-space: nowrap; font-size: 11px; font-weight: 700; padding: 6px 9px; border-radius: 999px; background: var(--w-card); border: 1px solid var(--w-line); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: #ECE7DC; border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.seg span { text-align: center; font-size: 11.5px; font-weight: 700; padding: 7px 0; border-radius: 999px; color: var(--w-muted); }
.seg .on { background: var(--w-card); color: var(--w-ink); box-shadow: 0 1px 3px rgba(26,24,20,.12); }
.ph-h { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.ev { position: relative; background: var(--w-card); border-radius: 18px; overflow: hidden; box-shadow: var(--w-shadow); margin-bottom: 14px; }
.ev img { width: 100%; height: 118px; object-fit: cover; }
.ev .date { min-width: 38px; font-size: 16px; padding: 5px 7px 6px; border-radius: 10px; }
.ev-b { padding: 10px 12px 12px; display: grid; gap: 3px; }
.ev-b small { color: var(--w-muted); font-size: 11px; font-weight: 700; }
.ev-b b { font-size: 14.5px; }
.ev-b span { display: flex; align-items: center; gap: 6px; color: var(--w-muted); font-size: 11.5px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile2 { position: relative; background: var(--w-card); border-radius: 16px; overflow: hidden; box-shadow: var(--w-shadow); padding-bottom: 9px; }
.tile2 img { width: 100%; aspect-ratio: 1 / .8; object-fit: cover; margin-bottom: 7px; }
.tile2 .tag { position: absolute; left: 8px; top: 8px; background: var(--w-offer); font: 400 13px/1 var(--display); padding: 6px 8px; border-radius: 999px; box-shadow: 0 4px 10px rgba(26,24,20,.2); }
.tile2 b, .tile2 small { display: block; padding-inline: 9px; }
.tile2 b { font-size: 12px; } .tile2 small { color: var(--w-muted); font-size: 10.5px; }
.ph-tabs { display: flex; justify-content: space-around; padding: 10px 6px 16px; background: var(--w-card); border-top: 1px solid var(--w-line); font-size: 10px; font-weight: 700; color: var(--w-muted); }
.ph-tabs .on { color: var(--w-ink); position: relative; }
.ph-tabs .on::before { content: ""; position: absolute; left: 50%; top: -10px; transform: translateX(-50%); width: 18px; height: 3px; border-radius: 3px; background: var(--w-ink); }
.hm-stage { justify-items: end; padding-right: 20px; }
/* Go / Save / Help / Join / Book float around the phone in the colours of
   the tabs below: they pop in, drift on their own paths, take turns in the
   spotlight, and lean with the pointer (home.js). The spotlight grows each
   pill toward the phone, so it never pushes one off the screen. */
.hm-f { z-index: 1; border-radius: 999px; padding: 8px 18px 8px 8px; gap: 10px; --d: 1;
  translate: calc(var(--mx, 0) * var(--d) * 1px) calc(var(--my, 0) * var(--d) * 1px); transition: translate .5s var(--ease); }
.hm-f .dot { position: relative; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; }
.hm-f .ico { width: 17px; height: 17px; }
.hm-f p { margin: 0; white-space: nowrap; color: var(--soft); font-size: 14px; }
.hm-f p b { display: inline; color: var(--paper); font-size: inherit; }
.dot-go { background: var(--w-event) !important; color: #fff !important; }
.dot-help { background: var(--w-help) !important; color: #fff !important; }
.dot-join { background: #C2577A !important; color: #fff !important; }
.dot-book { background: #D9682B !important; color: #fff !important; }
.hm-f1 { --acc: #8FB0FF; --d: 22; left: -40px; top: 8%; }
.hm-f2 { --acc: #7FDCA5; --d: -16; right: -12px; top: 30%; }
.hm-f3 { --acc: #FFE81A; --d: 28; left: -8px; bottom: 10%; }
.hm-f4 { --acc: #F29BC0; --d: 18; left: -56px; top: 47%; }
.hm-f5 { --acc: #F5A663; --d: -24; right: -12px; bottom: 28%; }
.hm-f1, .hm-f3, .hm-f4 { transform-origin: left center; }
.hm-f2, .hm-f5 { transform-origin: right center; }
.hm-stage .phone { translate: calc(var(--mx, 0) * -5px) calc(var(--my, 0) * -5px); transition: translate .6s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .hm-f { animation-timing-function: cubic-bezier(.3, 1.6, .5, 1), ease-in-out, ease-in-out; animation-iteration-count: 1, infinite, infinite; animation-fill-mode: backwards, none, none; }
  .hm-f1 { animation-name: hm-pop, hm-drift1, hm-spot; animation-duration: .8s, 7s, 15s; animation-delay: .3s, 1.1s, 1.4s; }
  .hm-f3 { animation-name: hm-pop, hm-drift3, hm-spot; animation-duration: .8s, 6.5s, 15s; animation-delay: .55s, 1.35s, 4.4s; }
  .hm-f2 { animation-name: hm-pop, hm-drift2, hm-spot; animation-duration: .8s, 8s, 15s; animation-delay: .8s, 1.6s, 7.4s; }
  .hm-f4 { animation-name: hm-pop, hm-drift2, hm-spot; animation-duration: .8s, 7.5s, 15s; animation-delay: 1.05s, 1.85s, 10.4s; }
  .hm-f5 { animation-name: hm-pop, hm-drift1, hm-spot; animation-duration: .8s, 6.8s, 15s; animation-delay: 1.3s, 2.1s, 13.4s; }
  .hm-f .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--acc); opacity: 0; animation: hm-ring 3s ease-out infinite; }
  .hm-f2 .dot::after { animation-delay: 1s; } .hm-f3 .dot::after { animation-delay: 2s; }
  .hm-f4 .dot::after { animation-delay: .5s; } .hm-f5 .dot::after { animation-delay: 1.5s; }
}
@keyframes hm-pop { from { opacity: 0; scale: .4; filter: blur(6px); } }
@keyframes hm-drift1 { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(6px, -12px) rotate(1deg); } }
@keyframes hm-drift2 { 0%, 100% { transform: translate(0, 0) rotate(2deg); } 50% { transform: translate(-8px, 10px) rotate(-1.5deg); } }
@keyframes hm-drift3 { 0%, 100% { transform: translate(0, 0) rotate(1deg); } 50% { transform: translate(10px, -8px) rotate(-2deg); } }
/* one pill at a time, Go, Save, Help, Join, Book, 3 s each */
@keyframes hm-spot {
  0%, 20%, 100% { scale: 1; border-color: var(--line2); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
  5%, 15% { scale: 1.1; border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 22%, transparent), 0 0 40px color-mix(in srgb, var(--acc) 45%, transparent), 0 24px 60px rgba(0,0,0,.45); }
}
@keyframes hm-ring { 0% { opacity: .9; scale: 1; } 70%, 100% { opacity: 0; scale: 1.9; } }

/* ---------- go / save / help / join / book ---------- */
/* One tab per kind of post: the verb, one line, three example posts. Each
   kind keeps one colour (--kc), also used by the hero pills and How it works. */
.k-events { --kc: #8FB0FF; } .k-offers { --kc: #FFE81A; } .k-causes { --kc: #7FDCA5; }
.k-clubs { --kc: #F29BC0; } .k-services { --kc: #F5A663; }
.chips.ktabs { flex-wrap: wrap; overflow: visible; }
.ktabs .chip { display: inline-flex; align-items: center; gap: 8px; }
.ktabs .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kc); }
.ktabs .chip:focus-visible { outline: 2px solid var(--kc); outline-offset: 2px; }
.kpanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 16px; align-items: stretch; }
.kpanel[hidden] { display: none; }
.kp-info { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--kc); border-radius: var(--r-md); padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-width: 0; }
.kp-v { margin: 0; color: var(--kc); font: 400 clamp(44px, 5vw, 68px)/.95 var(--display); letter-spacing: -.03em; }
.kp-l { margin: 0; color: var(--paper); font-size: 16px; line-height: 1.45; }
.kp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-width: 0; }
#kinds > .fine { margin: 14px 0 0; }

/* ---------- this week ---------- */
.chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -16px 0 24px; padding-bottom: 4px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; cursor: pointer; font: 700 14px/1 var(--body); color: var(--soft); background: transparent; border: 1px solid var(--line2); border-radius: 999px; padding: 11px 16px; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--paper); color: var(--paper); }
.chip.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.week { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wc { background: var(--w-card); color: var(--w-ink); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); display: flex; flex-direction: column; min-width: 0; transition: transform .3s var(--ease), opacity .3s; }
.wc:hover { transform: translateY(-3px); }
.wc[hidden] { display: none; }
.wc-ph { position: relative; }
.wc-ph img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.wc-b { padding: 14px 16px 16px; display: grid; gap: 5px; }
.when { color: var(--w-muted); font-size: 12.5px; font-weight: 700; }
.when em { font-style: normal; color: var(--w-help); }
.wc-b b { font-size: 16px; line-height: 1.3; }
.wc-b span { display: flex; align-items: center; gap: 7px; color: var(--w-muted); font-size: 13px; }
.wc-b .until { color: #7A5000; font-weight: 700; }

/* live events from the app (home.js): the app's looping event posters
   (src/components/posts/EventPost.tsx), sized in container units so they scale
   with the card. Frame 0 of every loop is the finished poster, so with reduced
   motion it simply stands still. */
a.wc { text-decoration: none; color: var(--w-ink); }
a.wc:focus-visible { outline: 3px solid var(--w-offer); outline-offset: 3px; }
.ep { --paper: #FBF9F3; --cream: #F3ECDC; --pink: #1D1B17; --blue: #1F3F8C; --red: #C8372D;
  position: relative; aspect-ratio: 1; overflow: hidden; container-type: inline-size; isolation: isolate; color: #1D1B17; }
.ep span, .ep b, .ep small, .ep i { display: block; }

/* the app's own poster in a frame (home.js appPost): the post's tint until the
   app says the poster is up. Clicks go to the card around it. */
.ep-app { background: var(--tint, var(--cream)); }
.ep-app iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity .35s; }
.ep-app.is-up iframe { opacity: 1; }

/* tear-off calendar */
.ep-cal { background: var(--tint, var(--cream)); }
.ep-kick { position: absolute; z-index: 4; left: 6cqw; top: 5.5cqw; display: flex !important; align-items: center; gap: 1.8cqw; padding: 1.4cqw 3cqw; border-radius: 99px; background: #1D1B17; color: var(--cream); font: 900 3.2cqw/1 var(--body); letter-spacing: .5cqw; text-transform: uppercase; }
.ep-kick i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #FFE81A; animation: ep-blink 1s steps(1) infinite; }
.ep-calbox { position: absolute; left: 13cqw; right: 13cqw; top: 17cqw; }
.ep-bind { position: relative; z-index: 3; height: 6.5cqw; border-radius: 1.6cqw; background: #2A2722; display: flex; justify-content: center; align-items: center; gap: 22cqw; }
.ep-bind i { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: var(--tint, var(--cream)); }
.ep-stack { position: relative; }
.ep-page { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4.5cqw 4cqw; background: var(--paper);
  box-shadow: 0 1.4cqw 0 #E3DCCB, 0 2.6cqw 0 #D5CDB9, 0 4cqw 5cqw rgba(40,30,10,.16); }
.ep-mo, .ep-wd { font: 800 3.3cqw/1.2 var(--body); letter-spacing: .9cqw; }
.ep-wd { font-size: 3.5cqw; letter-spacing: 1.1cqw; }
.ep-dd { font: 400 30cqw/1.05 var(--display); color: var(--blue); }
.ep-dd.ep-red { color: var(--red); }
.ep-page hr { align-self: stretch; margin: 3cqw 0; border: 0; border-top: 1.5px solid rgba(29,27,23,.25); }
.ep-page b { font: 900 5.2cqw/1.2 var(--body); text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-page small { margin-top: 1cqw; font: 700 3.2cqw/1.3 var(--body); color: #5E574B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ep-top { position: absolute; inset: 0; z-index: 2; opacity: 0; transform-origin: 96% 0; animation: ep-tear 6s cubic-bezier(.5,0,.75,0) infinite;
  clip-path: polygon(0 1.2%, 6% 0, 12% 1%, 19% .2%, 27% 1.2%, 35% .3%, 43% 1.1%, 51% 0, 60% 1%, 68% .2%, 77% 1.1%, 85% .3%, 93% 1%, 100% 0, 100% 100%, 0 100%); }
.ep-top .ep-dd { color: #9A9282; }
.ep-foot { position: absolute; left: 6cqw; right: 6cqw; bottom: 5cqw; font: 800 3.2cqw/1.2 var(--body); color: rgba(29,27,23,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes ep-tear { 0%, 70% { opacity: 0; transform: none } 72% { opacity: 1; transform: none } 74% { opacity: 1; transform: none } 76% { transform: rotate(-3deg) translateY(1cqw) } 86% { opacity: 1; transform: translate(-14cqw, 95cqw) rotate(-34deg) } 88%, 100% { opacity: 0; transform: translate(-16cqw, 110cqw) rotate(-38deg) } }
@keyframes ep-blink { 50% { opacity: .25 } }

/* riso print */
.ep-riso { background: var(--cream); }
.ep-riso::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle, rgba(29,27,23,.12) 0 .8px, transparent 1.2px) 0 0 / 6px 6px; pointer-events: none; }
.ep-sun { position: absolute; left: 18cqw; top: 40cqw; width: 92cqw; height: 92cqw; border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--tint) 0 64%, transparent 64%), radial-gradient(circle, var(--ink) 0 .9cqw, transparent 1cqw) 0 0 / 3.7cqw 3.7cqw;
  animation: ep-pulse 6s ease-in-out infinite; }
.ep-sun::before { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: var(--ink); opacity: .85; }
.ep-title { position: absolute; z-index: 2; left: 7cqw; right: 7cqw; top: 15cqw; font-family: var(--display); line-height: 1.02; text-transform: uppercase; overflow-wrap: break-word; }
.ep-l1 { color: var(--blue); }
.ep-l2 { position: absolute; inset: 0; color: var(--ink); opacity: .8; mix-blend-mode: multiply; animation: ep-reg 6s ease-in-out infinite; }
.ep-stamp { position: absolute; z-index: 3; left: 6cqw; top: 5cqw; padding: .8cqw 2.4cqw; border: 1.5px solid var(--blue); background: var(--cream); transform: rotate(-3deg); font: 400 5.4cqw/1.2 var(--display); color: var(--ink); }
.ep-rfoot { position: absolute; z-index: 3; left: 6cqw; right: 6cqw; bottom: 5cqw; padding-top: 1.6cqw; border-top: 2px solid var(--blue); background: rgba(243,236,220,.92); }
.ep-rfoot b { font: 900 3.2cqw/1.25 var(--body); letter-spacing: .4cqw; text-transform: uppercase; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-rfoot span { margin-top: .6cqw; font: 700 3.6cqw/1.25 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes ep-reg { 0%, 100% { transform: translate(.7cqw, .5cqw) } 50% { transform: translate(-.6cqw, .1cqw) } }
@keyframes ep-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.05) } }

/* station board */
.ep-flap { background: #191816; color: var(--cream); }
.ep-bhead { position: absolute; left: 6cqw; top: 6cqw; font: 900 3.2cqw/1 var(--body); letter-spacing: .8cqw; text-transform: uppercase; color: #B8B0A0; }
.ep-board { position: absolute; left: 5.5cqw; right: 5.5cqw; top: 17cqw; display: grid; gap: 2.4cqw; }
.ep-row { display: flex; gap: .7cqw; }
.ep-row span { position: relative; width: 7.3cqw; height: 10.6cqw; border-radius: .9cqw; background: #2C2A26; display: grid; place-items: center; overflow: hidden; font: 900 6.6cqw/1 var(--body); color: var(--cream); }
.ep-row span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .35cqw; background: #191816; }
.ep-row.ep-y span { color: #FFE81A; }
.ep-bfoot { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; font: 800 3.6cqw/1.3 var(--body); color: #FFE81A; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ep *, .ep::before, .ep::after { animation: none !important; }
}
.wc-b .live-dot { display: inline-flex; align-items: center; gap: 5px; margin-right: 4px; color: #C0352B; font-weight: 800; font-size: 12.5px; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E0453A; }
.empty { color: var(--dim); margin: 0; padding: 40px 0; text-align: center; border: 1px dashed var(--line2); border-radius: var(--r-md); }
.week-foot, .gal-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 26px; }
.week-foot .fine, .gal-foot .fine { margin: 0; }
.week-foot { justify-content: flex-end; }
.week-foot:has([data-ex-note]:not([hidden])), .week-foot:has([data-mix-note]:not([hidden])) { justify-content: space-between; }
/* filters on the left, arrows on the right; the arrows move the row of real
   events one card at a time (home.js) */
.wk-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -16px 0 24px; }
.wk-bar .chips { margin: 0; min-width: 0; }
.wk-arrows { display: none; gap: 8px; flex: none; }
#week:has(.week.is-live) .wk-arrows { display: flex; }
.wk-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--paper); font: 700 18px/1 var(--body); cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.wk-arrow:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.wk-arrow:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.wk-arrow:disabled { opacity: .3; cursor: default; }
/* real events: the poster, a two-line title and one line for the place */
.week.is-live .wc-live .when { display: none; }
.week.is-live .wc-b b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.week.is-live .wc-b span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week.is-live .wc-b span .dot { display: inline-block; margin-right: 7px; vertical-align: 1px; }
@media (min-width: 601px) {
  .week.is-live { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
  .week.is-live::-webkit-scrollbar { display: none; }
  .week.is-live .wc { scroll-snap-align: start; }
}
@media (min-width: 601px) and (max-width: 1080px) { .week.is-live { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (min-width: 601px) and (max-width: 900px) { .week.is-live { grid-auto-columns: calc((100% - 16px) / 2); } }

/* ---------- how it works (reuses .flow and .viz) ---------- */
/* one picture per step: a location picker like delivery apps, the five
   verbs, and a ticket */
.hm .flow { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.loc { background: var(--w-card); color: var(--w-ink); border-radius: 18px; padding: 6px; display: grid; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.loc-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; }
.loc-row.on { background: #F2EEE6; }
.loc-row div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.loc-row b { font-size: 14px; }
.loc-row small { font-size: 12px; color: var(--w-muted); }
.loc-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #ECE7DC; color: var(--w-ink); flex: none; }
.loc-row.on .loc-ico { background: var(--w-event); color: #fff; }
.loc-ico svg { width: 17px; height: 17px; }
.loc-ok { font-weight: 800; color: var(--w-event); }
.vchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vchips span { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line2); font: 400 17px/1 var(--display); color: var(--paper); }
.vchips span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--kc); }
.vchips .on { background: var(--kc); border-color: var(--kc); color: var(--ink); scale: 1.08; box-shadow: 0 0 30px color-mix(in srgb, var(--kc) 40%, transparent); }
.vchips .on::before { background: var(--ink); }
#how h3 .v { color: var(--kc); }
.ticket { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--card); color: var(--ink); border-radius: 18px; padding: 18px; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.ticket::before, .ticket::after { content: ""; position: absolute; left: 62%; width: 18px; height: 18px; border-radius: 50%; background: #141412; }
.ticket::before { top: -9px; } .ticket::after { bottom: -9px; }
.ticket small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b675c; }
.ticket b { display: block; font: 400 21px/1.15 var(--display); margin: 6px 0 4px; }
.ticket span:not(.qr) { font-size: 12.5px; color: #6b675c; }
.ticket .qr { width: 64px; height: 64px; background-size: 16px 16px; border-color: var(--card); background-color: var(--ink); }

/* ---------- gallery footer ---------- */
.gal-foot .swipe { margin: 0; }

/* ---------- run something local ---------- */
.sides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sidec { display: flex; flex-direction: column; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; min-width: 0; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.sidec:hover { border-color: var(--yellow-line, rgba(255,232,26,.35)); transform: translateY(-2px); }
.sidec img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; filter: saturate(.8) brightness(.75); }
.sidec div { padding: 22px 24px 24px; display: grid; gap: 10px; }
.sc-k { margin: 0; font: 700 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.sidec b { font-size: 18px; line-height: 1.35; }
.sc-l { color: var(--yellow); font-weight: 700; font-size: 14.5px; margin-top: 4px; }

.hm .finale .ctas { align-items: center; justify-content: center; gap: 28px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .week { grid-template-columns: repeat(3, 1fr); }
  .kpanel { grid-template-columns: minmax(0, 1fr); }
  .kp-info { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .hm-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .hm-stage { justify-items: center; padding-right: 0; }
  .hm-f1 { left: calc(50% - 300px); top: 5%; } .hm-f2 { right: calc(50% - 300px); top: 28%; }
  .hm-f4 { left: calc(50% - 310px); top: 48%; } .hm-f5 { right: calc(50% - 300px); bottom: 26%; }
  .hm-f3 { left: calc(50% - 280px); bottom: 9%; }
  .hm-copy { text-align: center; display: grid; justify-items: center; }
  .hm-hero .ctas { justify-content: center; }
  .sides { grid-template-columns: 1fr; }
  .week { grid-template-columns: 1fr 1fr; }
  /* How it works swipes sideways instead of stacking, like Coming up */
  .hm .flow { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -20px; padding: 0 20px 6px; scroll-padding-inline: 20px; }
  .hm .flow::-webkit-scrollbar { display: none; }
  .hm .flow li { scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .hm-hero { padding-top: 36px; }
  .hm-hero .ctas { flex-direction: column; flex-wrap: nowrap; gap: 22px; width: 100%; } .hm-hero .btn-lg { width: 100%; padding-block: 18px; }
  .phone { width: 272px; height: 560px; }
  .hm-stage { padding-top: 64px; }
  .hm-f { padding: 6px 14px 6px 6px; gap: 8px; }
  .hm-f .dot { width: 28px; height: 28px; font-size: 13px; } .hm-f .ico { width: 15px; height: 15px; }
  .hm-f p { font-size: 12.5px; }
  .hm-f1 { left: 8px; top: 2%; } .hm-f2 { right: 8px; top: 25%; }
  .hm-f4 { left: 12px; top: 46%; } .hm-f5 { right: 8px; bottom: 25%; }
  .hm-f3 { left: 8px; bottom: 7%; }
  .kp-info { padding: 16px 18px; gap: 4px 14px; }
  .kp-v { font-size: 40px; }
  .kp-l { font-size: 15px; }
  .kp-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wk-bar { display: block; }
  #week:has(.week.is-live) .wk-arrows { display: none; }
  .week-foot, .week-foot:has([data-ex-note]:not([hidden])), .week-foot:has([data-mix-note]:not([hidden])) { justify-content: flex-start; }
  #how .viz { height: 200px; }
  .hm .flow { grid-auto-columns: 82%; gap: 12px; }
  /* phone: compact rows, like the day lists in the app */
  .week { grid-template-columns: 1fr; gap: 10px; }
  .wc { flex-direction: row; border-radius: 18px; }
  .wc-ph { flex: none; width: 112px; }
  .wc-ph img { height: 100%; aspect-ratio: auto; min-height: 112px; }
  .wc .date { left: 7px; top: 7px; min-width: 36px; font-size: 15px; padding: 5px 6px 6px; border-radius: 10px; }
  .wc .date small { font-size: 8.5px; }
  .wc .vtag { right: auto; left: 7px; top: auto; bottom: 7px; font-size: 10.5px; padding: 5px 8px; }
  .wc .v-offer { font-size: 13px; top: 7px; bottom: auto; }
  /* live posters: a swipeable row, like "Happening in Vienna" in the app */
  .wc.wc-live { flex-direction: column; }
  .week.is-live { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -20px; padding: 0 20px 6px; scroll-padding-inline: 20px; }
  .week.is-live::-webkit-scrollbar { display: none; }
  .week.is-live .wc { scroll-snap-align: start; }
  .wc-live .wc-b { align-content: start; }
  .wc-b { padding: 12px 14px; align-content: center; min-width: 0; }
  .wc-b b { font-size: 15px; }
  .hm .finale .ctas { flex-direction: column; flex-wrap: nowrap; gap: 22px; }
}