/* Home (#/): js/views/home.js. The structure follows the approved homepage mock-up: a hero (headline, the lime action, the circles row, the supplied artwork), then "Around your clique" in cream
   beside a forest rail, then an optional plum seasonal strip. The page uses the site's own fonts and theme text colours (the headline is the theme's text colour, so it reads in the light theme too),
   and the shared breakpoints (1000, 820, 480) rather than new ones. Decorative pictures are aria-hidden and never take a click. */
body[data-sec="home"] .ticker, body[data-sec="home"] .subnav { display: none; }              /* (the live-wins ticker and the polls' tabs belong to Markets, not to Home) */

.page.hm { max-width: 1440px; --hm-paper: #EFE6D2; --hm-ink: #191814; --hm-forest: #1E3B2C; --hm-plum: #392746; }
.hm a:focus-visible, .hm button:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.hm-top > div:empty { display: none; }

/* ---- hero ---- */
.hm-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: center; padding-top: 10px; }
.hm-copy { min-width: 0; }
.hm-title { margin: 0 0 18px; font-family: var(--f-display); font-size: clamp(40px, 5.3vw, 80px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; color: var(--text); overflow-wrap: anywhere; }
.hm-sub { margin: 0 0 26px; max-width: 54ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.45; color: var(--text); }
.hm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 56px; min-width: min(100%, 280px); padding: 0 28px; border: 2px solid #0E0C0A; border-radius: 6px; background: var(--lime); color: #10140A; font: 700 20px var(--f-body); text-decoration: none; box-shadow: 4px 4px 0 var(--lime-shadow); transition: transform .12s ease, box-shadow .12s ease; }
.hm-cta:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--lime-shadow); } .hm-cta svg { width: 22px; height: 22px; }
.hm-circles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 30px; min-width: 0; }
.hm-circles:empty { display: none; }
.hm-lbl { font-size: 15px; color: var(--text-2); }
.hm-marks { display: inline-flex; flex-wrap: wrap; gap: 10px; } .hm-mark { display: block; line-height: 0; border-radius: 50%; } .hm-mark .cmark { border: 2px solid #0E0C0A; border-radius: 50%; }
.hm-more { font: 600 13px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.hm-online { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding-left: 16px; border-left: 1.5px solid var(--line-soft); color: var(--text); text-decoration: none; font-size: 15px; }
.hm-online i { width: 11px; height: 11px; border-radius: 50%; background: var(--lime); border: 2px solid #0E0C0A; flex: none; }
.hm-art { width: 100%; max-width: 640px; justify-self: end; aspect-ratio: 640 / 430; pointer-events: none; }
.hm-art-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-art.on .hm-m-speech { animation: hmFloat 6s ease-in-out infinite; }                       /* (the bubble only: a couple of pixels, and only while it is on screen) */
@keyframes hmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---- the feed and the rail ---- */
.hm-lower { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 20px; margin-top: 28px; align-items: start; }
.hm-feed { min-width: 0; padding: 28px; border: 2px solid #0E0C0A; border-radius: 24px; background: var(--hm-paper); color: var(--hm-ink); box-shadow: 5px 5px 0 var(--shadow-c); }
.hm-feed-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.hm-feed h2 { margin: 0; font-family: var(--f-display); font-size: clamp(30px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; }
.hm-date { font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #5C5240; }
.hm-list { list-style: none; margin: 8px 0 0; padding: 0; }
.hm-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(140px, .9fr); gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1.5px dashed #b9b09b; }
.hm-row:last-child { border-bottom: 0; } .hm-row > * { min-width: 0; overflow-wrap: anywhere; }
.hm-av { display: block; line-height: 0; width: 48px; } .hm-av .avatar { border-radius: 50%; }
.hm-name { color: var(--hm-ink); font-weight: 800; font-size: 18px; text-decoration: none; } .hm-name:hover { text-decoration: underline; }
.hm-what > span { display: block; font-size: 17px; line-height: 1.35; }
.hm-meta { margin-top: 4px; font: 500 12.5px var(--f-mono); letter-spacing: .02em; color: #6A5E49; }
.hm-card { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 1.5px solid #8F866F; border-radius: 14px; background: #F5EEDC; color: var(--hm-ink); text-decoration: none; transition: transform .12s ease; }
.hm-card:hover { transform: translateX(2px); border-color: var(--hm-ink); }
.hm-card-win { background: #E5EEBF; border-color: #7E8C45; }
.hm-card-art { flex: none; display: block; line-height: 0; } .hm-card-art .thumb { background: transparent; }
.hm-card-t { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.hm-go { flex: none; display: inline-flex; line-height: 0; } .hm-go svg { width: 20px; height: 20px; }
.hm-note { padding: 18px 0 6px; font-size: 17px; line-height: 1.45; } .hm-note p { margin: 0 0 12px; } .hm-quiet { font-size: 15px; color: #5C5240; } .hm-quiet a { color: inherit; }
.hm-note .btn { min-height: 44px; }
.hm-skel .hm-av { height: 48px; border-radius: 50%; background: rgba(25, 24, 20, .12); } .hm-skel i { display: block; height: 14px; margin: 9px 0; border-radius: 7px; background: rgba(25, 24, 20, .12); width: 70%; } .hm-skel i + i { width: 45%; } .hm-skel .hm-card { min-height: 64px; background: rgba(25, 24, 20, .07); border-color: transparent; }

.hm-rail { position: sticky; top: calc(var(--stuck-h) + 16px); min-width: 0; padding: 24px; border: 2px solid #0E0C0A; border-radius: 24px; background: var(--hm-forest); color: var(--hm-paper); box-shadow: 5px 5px 0 var(--shadow-c); }
.hm-kicker { display: block; font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.hm-game { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 16px; min-width: 0; } .hm-game > div { min-width: 0; }
.hm-game h2 { margin: 0 0 8px; font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; overflow-wrap: anywhere; }
.hm-game p { margin: 0; font-size: 16px; line-height: 1.4; opacity: .9; }
.hm-game-art { flex: none; line-height: 0; pointer-events: none; }
.hm-recent-gap { height: 20px; }
.hm-open { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 20px; border: 2px solid #0E0C0A; border-radius: 6px; background: var(--lime); color: #10140A; font: 700 17px var(--f-body); text-decoration: none; }
.hm-open svg { width: 20px; height: 20px; }
.hm-daily { display: flex; align-items: center; gap: 14px; min-height: 64px; padding-top: 18px; border-top: 1.5px solid rgba(239, 230, 210, .28); color: inherit; text-decoration: none; }
.hm-tick { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--lime); color: #10140A; border: 2px solid #0E0C0A; } .hm-tick svg { width: 20px; height: 20px; }
.hm-daily-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .hm-daily-t b { font-size: 18px; } .hm-daily-t small { font-size: 14px; opacity: .85; }

/* ---- the seasonal strip (only while there is a season with something real to open) ---- */
.hm-season { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 20px; padding: 18px 24px; border: 2px solid #0E0C0A; border-radius: 18px; background: var(--hm-plum); color: #F2EADB; box-shadow: 5px 5px 0 var(--shadow-c); }
.hm-season-t { min-width: 0; } .hm-season h2 { margin: 2px 0 0; font-family: var(--f-display); font-size: clamp(28px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; overflow-wrap: anywhere; }
.hm-season-art { display: inline-flex; gap: 4px; flex: none; pointer-events: none; } .hm-season-art img { width: 84px; height: 84px; object-fit: contain; display: block; }
.hm-season-p { flex: 1 1 220px; min-width: 0; margin: 0; padding-left: 22px; border-left: 1.5px solid rgba(242, 234, 219, .28); font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.hm-season-go { flex: none; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; border: 2px solid #0E0C0A; border-radius: 6px; background: #B98BF2; color: #191814; font: 700 17px var(--f-body); text-decoration: none; } .hm-season-go svg { width: 20px; height: 20px; }

@media (max-width: 1180px) {
  .hm-row { grid-template-columns: 42px minmax(0, 1fr); } .hm-row > .hm-card { grid-column: 2; } .hm-av { width: 42px; } .hm-av .avatar { --s: 42px !important; }      /* (the feed is narrow beside the rail: the card goes under the words) */
}
@media (max-width: 1000px) {
  .hm-title { font-size: clamp(40px, 5.6vw, 60px); }
}
@media (max-width: 820px) {
  .hm-hero, .hm-lower { grid-template-columns: minmax(0, 1fr); } .hm-rail { position: static; }
  .hm-art { max-width: 440px; justify-self: center; }
  .hm-feed, .hm-rail { padding: 22px; }
  .hm-title { font-size: clamp(36px, 7.5vw, 56px); }
}
@media (max-width: 480px) {
  .hm-title { font-size: 40px; } .hm-art { max-width: 320px; } .hm-cta { width: 100%; }
  .hm-row { gap: 12px; padding: 16px 0; } .hm-season { padding: 18px; } .hm-season-p { padding-left: 0; border-left: 0; }
  .hm-feed h2 { font-size: 32px; } .hm-online { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .hm *, .hm-art.on .hm-m-speech { animation: none !important; transition: none !important; } }