/* css/home.css — the Hem landing page (2026-10-16, DESIGN_LOG same date).
   Loaded by hem.html only. Palette: BRAND.md §8 (--black, --white, --accent from
   core.css, Deep Slate Olive #253122 and Sage #A6B79A), plus the Sanzo Wada pairs
   the event covers and hub tiles wear (js/event-themes.js, js/home-view.js).

   PERFORMANCE RULES for this file:
   • Everything that moves animates `transform` or `opacity` only, so it runs on the
     compositor and never triggers layout or paint.
   • No `filter: blur()` on anything that moves: the soft edges are baked into
     radial gradients instead.
   • Motion stops when it is off screen (.is-offscreen, set by js/hero-bg.js and
     js/hem.js) and for prefers-reduced-motion. */

.hem-body { background: var(--white); }
.hm { font-family: 'DM Sans', sans-serif; color: #253122; }
.hm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.hm-kicker {
  margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.hm-h2 {
  margin: 0; font-family: 'DM Serif Display', serif; font-weight: 400;
  font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.012em; color: #253122;
  text-wrap: balance;
}
.hm-lead { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: #3A4436; max-width: 620px; }
.hm-section { padding: 96px 0; }
.hm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.hm-head-link { font-weight: 700; font-size: 16px; color: #253122; }
.hm-head-link:hover { color: var(--accent); }

.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border-radius: 999px; box-sizing: border-box;
  font: 700 17px 'DM Sans', sans-serif; text-decoration: none; cursor: pointer;
  transition: opacity .15s, background-color .15s, color .15s;
}
.hm-btn-fill { background: var(--accent); color: #fff; border: 0; }
.hm-btn-fill:hover { opacity: .88; color: #fff; }
.hm-btn-line { background: transparent; color: #253122; border: 1.5px solid #253122; }
.hm-btn-line:hover { background: #253122; color: var(--white); }

/* ═════════ HERO ═════════
   The background is one slot (.hm-hero-bg) with three ways to fill it, chosen in
   hem.html: the default CSS "night" below, an <img class="hm-hero-img"> placed in
   the slot, or a video via data-hero-video on #hemHero (js/hero-bg.js). The copy
   never changes with it. */
.hm-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(86svh, 820px); display: flex; align-items: center; justify-content: center;
  background: #141B12; color: var(--white);
}
.hm-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hm-hero-bg > * { position: absolute; }
.hm-hero-img, .hm-hero-video { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-hero-video { opacity: 0; transition: opacity .7s ease; }
.hm-hero-video.is-on { opacity: 1; }   /* one clip on screen at a time (js/hero-bg.js) */
/* A picture or a playing video replaces the drawn night (keeps the vignette + grain). */
.hm-hero-bg:has(.hm-hero-img) .hm-night,
.hm-hero.has-video .hm-night { display: none; }

/* The night: soft lights of a bar, out of focus, and people walking past. */
.hm-night { inset: 0; }
.hm-night > * { position: absolute; }
.hm-glow { border-radius: 50%; will-change: opacity; animation: hm-glow 6s ease-in-out infinite; }
.hm-glow-1 { width: 46vw; height: 46vw; left: -10vw; top: -8vw; background: radial-gradient(circle, rgba(241,90,48,.42) 0, rgba(241,90,48,0) 68%); }
.hm-glow-2 { width: 52vw; height: 52vw; right: -14vw; top: -18vw; background: radial-gradient(circle, rgba(253,191,104,.34) 0, rgba(253,191,104,0) 68%); animation-duration: 8s; animation-delay: -2s; }
.hm-glow-3 { width: 34vw; height: 34vw; left: 38vw; top: -14vw; background: radial-gradient(circle, rgba(166,183,154,.26) 0, rgba(166,183,154,0) 68%); animation-duration: 7s; animation-delay: -4s; }
@keyframes hm-glow { 50% { opacity: .45; } }

/* Bokeh: many lights in ONE element each (gradients), two layers drifting apart. */
.hm-bokeh { inset: -10%; will-change: transform; }
.hm-bokeh-a {
  background:
    radial-gradient(circle at 9% 18%,  rgba(251,230,160,.85) 0 10px, rgba(251,230,160,0) 34px),
    radial-gradient(circle at 23% 11%, rgba(241,90,48,.85)  0 6px,  rgba(241,90,48,0) 24px),
    radial-gradient(circle at 37% 24%, rgba(253,191,104,.7) 0 9px,  rgba(253,191,104,0) 30px),
    radial-gradient(circle at 68% 13%, rgba(251,230,160,.8) 0 12px, rgba(251,230,160,0) 40px),
    radial-gradient(circle at 91% 34%, rgba(241,90,48,.7)  0 9px,  rgba(241,90,48,0) 30px),
    radial-gradient(circle at 56% 38%, rgba(251,230,160,.6) 0 5px,  rgba(251,230,160,0) 20px);
  animation: hm-drift 28s ease-in-out infinite alternate;
}
.hm-bokeh-b {
  background:
    radial-gradient(circle at 15% 42%, rgba(253,191,104,.6) 0 8px,  rgba(253,191,104,0) 28px),
    radial-gradient(circle at 46% 30%, rgba(244,128,103,.75) 0 6px, rgba(244,128,103,0) 22px),
    radial-gradient(circle at 76% 46%, rgba(166,183,154,.55) 0 11px, rgba(166,183,154,0) 36px),
    radial-gradient(circle at 84% 12%, rgba(251,230,160,.85) 0 5px, rgba(251,230,160,0) 18px),
    radial-gradient(circle at 31% 52%, rgba(251,230,160,.5) 0 4px,  rgba(251,230,160,0) 16px);
  animation: hm-drift 36s ease-in-out -12s infinite alternate-reverse;
}
@keyframes hm-drift { from { transform: translate3d(-3%, 1%, 0); } to { transform: translate3d(4%, -2%, 0); } }

/* Walkers: a head and shoulders, out of focus, crossing the frame. */
.hm-walker {
  bottom: 0; left: 0; width: 340px; height: 70%; will-change: transform; opacity: .92;
  background:
    radial-gradient(circle at 50% 30%, #070A06 0 58px, rgba(7,10,6,0) 112px),
    radial-gradient(ellipse 165px 62% at 50% 100%, #070A06 0 52%, rgba(7,10,6,0) 100%);
  animation: hm-walk-r 42s linear infinite;
}
.hm-walker-2 { width: 420px; height: 82%; animation-name: hm-walk-l; animation-duration: 54s; animation-delay: -20s; }
.hm-walker-3 { width: 260px; height: 56%; opacity: .75; animation-duration: 34s; animation-delay: -9s; }
@keyframes hm-walk-r { from { transform: translate3d(-420px, 0, 0); } to { transform: translate3d(calc(100vw + 60px), 0, 0); } }
@keyframes hm-walk-l { from { transform: translate3d(calc(100vw + 60px), 0, 0); } to { transform: translate3d(-480px, 0, 0); } }

.hm-hero-bg::after {          /* vignette, then grain on top */
  content: ""; position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .9 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 75% 70% at 50% 42%, rgba(20,27,18,0) 50%, rgba(11,15,10,.85) 100%);
}
/* Over real footage (a still or a video): no grain and no drawn vignette, just enough
   shade for white type. Darker at the bottom, where the buttons sit (2026-10-19). */
.hm-hero-bg:has(.hm-hero-img)::after {
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.45) 75%, rgba(0,0,0,.62) 100%);
}
.hm-hero:has(.hm-hero-img) .hm-hero-h1,
.hm-hero:has(.hm-hero-img) .hm-hero-sub { text-shadow: 0 1px 24px rgba(0,0,0,.35); }

/* Review only (data-hero-review): which clip is playing, and 1…6 / Alla to pin one. */
.hm-hero-review {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap; max-width: calc(100% - 32px);
  padding: 5px 6px 5px 12px; border-radius: 18px; box-sizing: border-box;
  background: rgba(0,0,0,.6); color: #fff; font: 500 13px/1.2 'DM Sans', sans-serif;
}
.hm-hero-review-now { margin-right: 6px; white-space: nowrap; }
.hm-hero-review a {
  min-width: 28px; height: 28px; padding: 0 7px; box-sizing: border-box; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none;
}
.hm-hero-review a:hover { background: rgba(255,255,255,.18); color: #fff; }
.hm-hero-review a.is-playing { box-shadow: inset 0 0 0 1.5px #fff; }
.hm-hero-review a[aria-current] { background: #fff; color: #111; }

.hm-hero.is-offscreen .hm-hero-bg *,
.hm-hero.is-offscreen .hm-hero-bg { animation-play-state: paused !important; }

.hm-hero-copy {
  position: relative; z-index: 1; text-align: center; padding: 96px 24px 104px;
  display: flex; flex-direction: column; align-items: center; max-width: 980px;
}
.hm-hero-h1 {
  margin: 0; font-family: 'DM Serif Display', serif; font-weight: 400;
  font-size: clamp(48px, 8.4vw, 116px); line-height: .98; letter-spacing: -.02em;
  color: var(--white); text-wrap: balance;
}
.hm-hero-h1 em { font-style: italic; color: #F48067; }
.hm-hero-sub { margin: 26px 0 0; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; max-width: 560px; color: #DCE3D4; }
.hm-hero-ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }
.hm-hero .hm-btn { min-height: 58px; padding: 0 32px; font-size: 18px; }
.hm-hero .hm-btn-line { color: var(--white); border-color: var(--white); font-weight: 500; }
.hm-hero .hm-btn-line:hover { background: var(--white); color: #253122; }

/* ═════════ HEADER OVER THE HERO (2026-10-19) ═════════
   Hem only. Heylo's header in our colour: Händer beige (--white) solid behind the
   logo and links, then fading into the footage over ~70px, so the header reads as
   the page and the video starts just under it. The links keep their usual dark
   colours. Once the hero has scrolled under it, js/hero-bg.js (initHeroHeader) adds
   .is-solid: the usual flat header with its hairline. Without JS the <noscript>
   style in hem.html keeps the usual header. */
.hem-body .subpage-header { background: transparent; border-bottom-color: transparent; transition: border-color .25s ease; }
.hem-body .subpage-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none;
  height: calc(var(--header-h) + 72px);
  background: linear-gradient(180deg,
    #F7F4EE 0, #F7F4EE calc(var(--header-h) * .6),
    rgba(247,244,238,.88) calc(var(--header-h) + 6px),
    rgba(247,244,238,.45) calc(var(--header-h) + 36px),
    rgba(247,244,238,0) 100%);
}
.hem-body .subpage-header.is-solid { border-bottom-color: var(--border); }
.hem-body .subpage-header.is-solid::before { height: 100%; background: var(--white); }
/* The hero slides up under the header and keeps its own height below it. */
.hem-body .hm-hero { margin-top: calc(-1 * var(--header-h)); min-height: calc(min(86svh, 820px) + var(--header-h)); }
.hem-body .hm-hero-copy { padding-top: calc(96px + var(--header-h)); }

/* Signed-in lists (your events, your likes) sit just under the hero. */
.hm-mine { padding: 56px 0 0; }
.hm-mine .hem-section:first-child { margin-top: 0; }
.hm-mine-inner { max-width: 820px; }

/* ═════════ MATCH + CAROUSEL ═════════ */
.hm-match { padding: 104px 0 40px; }
.hm-h2-kicker { display: block; color: var(--accent); }
/* The carousel's description and links sit under it (2026-10-19). */
.hm-match-more { margin-top: 4px; }
.hm-match-more .hm-lead { margin-top: 0; }
.hm-links { margin: 16px 0 0; display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 15px; }
.hm-links a { color: #253122; text-underline-offset: 3px; }
.hm-links a:hover { color: var(--accent); }

.hm-try {
  margin-top: 32px; width: fit-content; max-width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap;
  background: var(--white); border-radius: 16px; padding: 12px 14px 12px 22px;
  box-shadow: 0 6px 24px rgba(37,49,34,.10), 0 1px 3px rgba(37,49,34,.07);
}
.hm-try-body { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; }
.hm-try-side { display: flex; align-items: center; gap: 8px; }
.hm-slot {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #253122; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s, transform .2s;
}
.hm-slot svg { width: 14px; height: 14px; fill: none; stroke: #253122; stroke-width: 2; }
.hm-slot.is-on { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.hm-slot.is-on svg { fill: #fff; stroke: #fff; }

/* The loop: two identical runs side by side; js/hem.js (runMarquee) slides the
   track by one run's width and lets people drag, flick and trackpad-swipe it
   (2026-10-19, was a CSS animation). Hover and keyboard focus still stop it.
   touch-action: pan-y keeps vertical page scrolling on phones; sideways is ours.
   Without that JS (reduced motion), it is a plain horizontal scroller, one run. */
.hm-marquee { position: relative; overflow: hidden; padding: 22px 0 34px; margin-top: 8px; }
.hm-marquee.is-js { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.hm-marquee.is-dragging { cursor: grabbing; }
.hm-marquee.is-js a, .hm-marquee.is-js img { -webkit-user-drag: none; }
.hm-marquee:not(.is-js) { overflow-x: auto; }
.hm-marquee:not(.is-js) .hm-run[aria-hidden="true"] { display: none; }
.hm-track { display: flex; width: max-content; will-change: transform; }
.hm-run { display: flex; gap: 20px; padding-right: 20px; }
.hm-run:first-child { padding-left: 20px; }
.hm-marquee-loading { display: flex; gap: 20px; padding: 0 20px; }
.hm-marquee-loading span { flex: 0 0 260px; height: 290px; border-radius: 18px; background: #ECE8DF; }

.hm-card { position: relative; width: 260px; flex: 0 0 260px; transition: transform .25s ease, opacity .25s ease; }
.hm-marquee:hover .hm-card { opacity: .55; }
.hm-marquee:hover .hm-card:hover { opacity: 1; transform: translateY(-8px); }
.hm-marquee.is-dragging .hm-card, .hm-marquee.is-dragging .hm-card:hover { opacity: 1; transform: none; }
.hm-card-link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: #253122; border-radius: 18px; }
.hm-card-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.hm-card-media { display: block; height: 200px; border-radius: 18px; margin-bottom: 10px; }
.hm-card-when { font-size: 13px; font-weight: 500; color: #5C6158; padding: 0 4px; }
.hm-card-title {
  font-family: 'DM Serif Display', serif; font-size: 22px; line-height: 1.15; padding: 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-card-meta { font-size: 14px; color: #5C6158; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-card-open {
  position: absolute; left: 12px; top: 150px; z-index: 2; background: #253122; color: var(--white);
  font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 999px;
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.hm-card:hover .hm-card-open { opacity: 1; transform: none; }

/* The drawn cover (js/home-view.js coverHtml). */
.hm-cover { position: relative; overflow: hidden; background: var(--hm-bg); }
.hm-cover-sun { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; right: -16%; top: -26%; background: var(--hm-sun); }
.hm-cover-glyph { position: absolute; left: 8%; bottom: 8%; width: 42%; height: auto; max-width: 104px; fill: none; stroke: var(--hm-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hm-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.hm-like {
  position: absolute; right: 12px; top: 150px; z-index: 3; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1.5px solid #253122; background: var(--white); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform .15s, background-color .15s;
}
.hm-like:hover { transform: scale(1.1); }
.hm-like svg { width: 20px; height: 20px; fill: none; stroke: #253122; stroke-width: 2; }
.hm-like.is-on { background: var(--accent); border-color: var(--accent); }
.hm-like.is-on svg { fill: #fff; stroke: #fff; }
.hm-like:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hm-like.is-pop { animation: hm-pop .35s ease; }
@keyframes hm-pop { 40% { transform: scale(1.25); } }

/* After three likes. */
.hm-recs { margin-top: 8px; }
.hm-recs[hidden] { display: none; }
.hm-recs-box {
  background: #253122; color: var(--white); border-radius: 28px; padding: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px;
}
.hm-recs .hm-kicker { color: #FBE6A0; }
.hm-recs-title { margin: 0 0 24px; font-family: 'DM Serif Display', serif; font-size: 40px; line-height: 1.05; }
.hm-recs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hm-rec-skel { display: flex; flex-direction: column; gap: 8px; }
.hm-rec-skel i { display: block; height: 120px; border-radius: 14px; margin-bottom: 4px; }
.hm-rec-skel b { display: block; height: 12px; width: 70%; border-radius: 6px; }
.hm-rec-skel b + b { width: 90%; height: 16px; }
.hm-rec-skel i, .hm-rec-skel b {
  background: linear-gradient(90deg, rgba(247,244,238,.10) 0%, rgba(247,244,238,.22) 50%, rgba(247,244,238,.10) 100%) 0 0 / 200% 100%;
  animation: hm-shimmer 1.3s linear infinite;
}
@keyframes hm-shimmer { to { background-position: -200% 0; } }
/* Waits for the picks (js/hem.js); space kept, so nothing jumps when it fades in. */
.hm-save { transition: opacity .5s ease, transform .5s ease; }
.hm-save.is-waiting { opacity: 0; visibility: hidden; transform: translateY(8px); }
.hm-rec { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--white); }
.hm-rec:hover .hm-rec-title { text-decoration: underline; }
.hm-rec-media { display: block; height: 120px; border-radius: 14px; margin-bottom: 4px; box-shadow: inset 0 0 0 1.5px rgba(247,244,238,.28); }
.hm-rec-when, .hm-rec-meta { font-size: 13px; color: #C9D2C0; }
.hm-rec-title { font-family: 'DM Serif Display', serif; font-size: 19px; line-height: 1.15; }
.hm-save { border-left: 1px solid rgba(247,244,238,.2); padding-left: 36px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.hm-save-title { margin: 0; font-family: 'DM Serif Display', serif; font-size: 30px; line-height: 1.1; }
.hm-save-body { margin: 0; font-size: 16px; line-height: 1.55; color: #DCE3D4; }
.hm-save .hm-btn-light { background: var(--white); color: #253122; border: 0; margin-top: 6px; }
.hm-save .hm-btn-light:hover { opacity: .9; }
.hm-save .hm-btn-ghost { background: transparent; color: var(--white); border: 1.5px solid var(--white); }
.hm-save .hm-btn-ghost:hover { background: var(--white); color: #253122; }
.hm-restart {
  align-self: flex-start; background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer;
  color: #C9D2C0; font: 500 14px 'DM Sans', sans-serif; text-decoration: underline;
}
.hm-restart:hover { color: var(--white); }

/* ═════════ HUBS ═════════ */
.hm-hubs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 16px; }
.hm-hub {
  position: relative; overflow: hidden; border-radius: 22px; padding: 24px; text-decoration: none;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
  background: var(--hub-bg); color: var(--hub-ink); transition: transform .2s;
}
.hm-hub:hover { transform: translateY(-4px); color: var(--hub-ink); }
.hm-hub:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* The photo sits in the corner away from the text and fades into the hub's own
   colour (a mask, no overlay), so the colours stay and the type stays on flat colour.
   Natural colour on purpose: no duotone, no tint. Per-hub framing below. */
.hm-hub > :not(.hm-hub-photo) { position: relative; z-index: 1; }
.hm-hub-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 100% 120% at 100% 0%, #000 22%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 74%);
          mask-image: radial-gradient(ellipse 100% 120% at 100% 0%, #000 22%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 74%);
  transition: transform .5s ease;
}
.hm-hub:hover .hm-hub-photo { transform: scale(1.03); }
.hm-hub-name { margin: 0; font-family: 'DM Serif Display', serif; font-size: 32px; line-height: 1; }
.hm-hub-n { margin: 6px 0 0; font-size: 14px; font-weight: 500; min-height: 1.4em; }
.hm-hub-big { grid-column: span 2; grid-row: span 2; justify-content: space-between; }
.hm-hub-big .hm-hub-name { font-size: 56px; }
.hm-hub-big .hm-hub-n { font-size: 17px; max-width: 320px; }
/* Pubquiz: the photo fills the top right and is gone before the week strip. */
.hm-hub-big .hm-hub-photo {
  bottom: auto; height: 80%;
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 100% 0%, #000 28%, rgba(0,0,0,.5) 58%, rgba(0,0,0,0) 86%);
          mask-image: radial-gradient(ellipse 85% 100% at 100% 0%, #000 28%, rgba(0,0,0,.5) 58%, rgba(0,0,0,0) 86%);
}
.hm-hub-wide { grid-column: span 2; }
.hm-hub-wide .hm-hub-photo {
  -webkit-mask-image: linear-gradient(270deg, #000 22%, rgba(0,0,0,.5) 48%, rgba(0,0,0,0) 72%);
          mask-image: linear-gradient(270deg, #000 22%, rgba(0,0,0,.5) 48%, rgba(0,0,0,0) 72%);
}
[data-hub="techno-och-house-stockholm"] .hm-hub-photo { object-position: 50% 80%; }
[data-hub="standup-stockholm"] .hm-hub-photo { object-position: 62% 50%; }
[data-hub="mat-och-dryck-stockholm"] .hm-hub-photo { object-position: 50% 58%; }
[data-hub="jazz-stockholm"] .hm-hub-photo { object-position: 70% 50%; }
.hm-quiz-now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; transition: opacity .3s ease; }
.hm-quiz-now:empty { display: none; }
.hm-quiz-now.is-out { opacity: 0; }
.hm-qcard {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.78); color: var(--hub-ink); box-shadow: 0 2px 10px rgba(18,53,78,.08);
}
.hm-qcard b { font-size: 16px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-qcard span { font-size: 14px; font-weight: 500; }

/* ═════════ CLUBS ═════════ */
.hm-clubs-sec { background: #E3E8DC; }
.hm-clubs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hm-club {
  background: var(--white); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 6px 24px rgba(37,49,34,.10), 0 1px 3px rgba(37,49,34,.07);
}
.hm-club-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; }
.hm-club-name { margin: 0; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 30px; line-height: 1.05; }
.hm-club-body { margin: 0; font-size: 15px; line-height: 1.5; color: #3A4436; }
.hm-mini { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: 11px; font-weight: 700; margin: 0; padding: 0; list-style: none; }
.hm-mini li { padding: 6px 0; border-radius: 8px; background: #ECEAE3; color: #5C6158; }
.hm-mini li.is-on { background: #253122; color: var(--white); }
.hm-club-link { margin-top: auto; font-weight: 700; font-size: 15px; color: #253122; }
.hm-club-link:hover { color: var(--accent); }
.hm-club-new {
  text-decoration: none; color: #253122; justify-content: center; align-items: flex-start;
  transition: transform .2s, box-shadow .2s;
}
.hm-club-new:hover { color: #253122; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(37,49,34,.14), 0 1px 3px rgba(37,49,34,.07); }
.hm-club-new:hover .hm-btn-fill { opacity: .88; }
.hm-club-new svg { width: 56px; height: 56px; fill: none; stroke: #253122; stroke-width: 3.5; stroke-linecap: round; }
.hm-club-new .hm-club-name { font-size: 34px; }
.hm-club-new .hm-btn { min-height: 44px; font-size: 15px; padding: 0 20px; margin-top: 4px; }

/* ═════════ SEARCH (2026-10-19) ═════════ */
.hm-find { padding: 104px 0 120px; }
.hm-find-inner { max-width: 820px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hm-find .hm-lead { margin-left: auto; margin-right: auto; }
.hm-search {
  margin-top: 34px; width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 22px; border-radius: 999px; background: #FFFDF9;
  border: 1.5px solid rgba(37,49,34,.14);
  box-shadow: 0 6px 24px rgba(37,49,34,.10), 0 1px 3px rgba(37,49,34,.07);
  transition: border-color .15s, box-shadow .15s;
}
.hm-search:focus-within { border-color: #253122; box-shadow: 0 0 0 3px rgba(37,49,34,.12), 0 6px 24px rgba(37,49,34,.10); }
.hm-search-ico { flex: none; color: #5C6158; }
.hm-search-input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none; -webkit-appearance: none; appearance: none;
  font: 400 18px 'DM Sans', sans-serif; color: #253122; padding: 12px 2px;
}
.hm-search-input::placeholder { color: #737A6E; }
.hm-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hm-search-btn { flex: none; min-height: 52px; padding: 0 28px; }
.hm-results { width: 100%; margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hm-results[hidden] { display: none; }
.hm-searching { margin: 4px 0 0; font-size: 17px; font-weight: 500; color: #3A4436; }
.hm-dots-anim i { font-style: normal; font-weight: 700; color: var(--accent); margin-left: 1px; }
.hm-dots-anim i:nth-child(2) { animation: hm-dot2 1.2s step-end infinite; }
.hm-dots-anim i:nth-child(3) { animation: hm-dot3 1.2s step-end infinite; }
@keyframes hm-dot2 { 0% { opacity: 0; } 33.333% { opacity: 1; } 100% { opacity: 1; } }
@keyframes hm-dot3 { 0% { opacity: 0; } 66.666% { opacity: 1; } 100% { opacity: 1; } }
.hm-hits {
  width: 100%; display: flex; flex-direction: column; text-align: left; overflow: hidden;
  background: #FFFDF9; border-radius: 22px; border: 1.5px solid rgba(37,49,34,.10);
  box-shadow: 0 6px 24px rgba(37,49,34,.10), 0 1px 3px rgba(37,49,34,.07);
}
.hm-hit {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 12px 16px; text-decoration: none; color: #253122; transition: background-color .15s;
}
.hm-hit + .hm-hit { border-top: 1px solid rgba(37,49,34,.08); }
.hm-hit:hover { background: rgba(37,49,34,.04); color: #253122; }
.hm-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.hm-hit-media { display: block; width: 64px; height: 64px; border-radius: 12px; }
.hm-hit-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hm-hit-title { font-weight: 700; font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-hit-meta { font-size: 14px; color: #5C6158; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-results-empty { margin: 0; font-size: 16px; color: #5C6158; }

/* ═════════ SMALL SCREENS ═════════ */
@media (max-width: 1080px) {
  .hm-clubs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 40px; margin: -8px -40px 0; padding: 8px 40px 28px; gap: 18px; scrollbar-width: none; }
  .hm-clubs::-webkit-scrollbar { display: none; }
  .hm-club { flex: 0 0 290px; scroll-snap-align: start; }
  .hm-recs-box { grid-template-columns: minmax(0, 1fr); }
  .hm-save { border-left: 0; padding-left: 0; border-top: 1px solid rgba(247,244,238,.2); padding-top: 24px; }
}
@media (max-width: 768px) {
  .hm-wrap { padding: 0 20px; }
  .hm-section { padding: 64px 0; }
  .hm-match { padding: 64px 0 24px; }
  .hm-hero { min-height: 560px; }
  .hm-hero-copy { padding: 72px 20px 80px; }
  .hm-hero-ctas { flex-direction: column; align-self: stretch; }
  .hm-hero .hm-btn { width: 100%; }
  .hm-walker-3 { display: none; }
  .hm-lead { font-size: 16px; }
  .hm-try { margin-top: 28px; width: 100%; padding: 12px 14px 12px 18px; gap: 10px 16px; }
  .hm-try-body { font-size: 15px; }
  .hm-card { width: 228px; flex-basis: 228px; }
  .hm-card-media { height: 172px; }
  .hm-like, .hm-card-open { top: 122px; }
  .hm-recs-box { padding: 24px; border-radius: 22px; }
  .hm-recs-title { font-size: 28px; }
  .hm-recs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
  .hm-hub { padding: 16px; border-radius: 18px; }
  .hm-hub-big { grid-row: span 2; }
  .hm-hub-big .hm-hub-n { font-size: 15px; }
  .hm-hub-big .hm-hub-name { font-size: 38px; }
  .hm-hub-big .hm-hub-photo {
    top: 22%; height: 62%;
    -webkit-mask-image: radial-gradient(ellipse 75% 52% at 100% 50%, #000 30%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 92%);
            mask-image: radial-gradient(ellipse 75% 52% at 100% 50%, #000 30%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 92%);
  }
  .hm-hub-name { font-size: 24px; }
  .hm-quiz-now { gap: 8px; }
  .hm-qcard { padding: 10px 11px; }
  .hm-qcard b { font-size: 14px; }
  .hm-qcard span { font-size: 13px; }
  .hm-clubs { margin: -8px -20px 0; padding: 8px 20px 28px; gap: 14px; scroll-padding-inline: 20px; }
  .hm-club { flex: 0 0 min(78%, 290px); }
  .hm-find { padding: 72px 0 88px; }
  .hm-search { padding: 6px 6px 6px 16px; margin-top: 26px; }
  .hm-search-input { font-size: 16px; }
  .hm-search-btn { min-height: 46px; padding: 0 20px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero-bg *, .hm-like.is-pop { animation: none !important; }
  /* The carousel: runMarquee() does not run, so it is a plain scroller (see above). */
  .hm-dots-anim i, .hm-rec-skel i, .hm-rec-skel b { animation: none !important; }
  .hm-save { transition: none; }
}