/* home.css: layout for the home page only (/index.html).
   Everything here is prefixed hm- and sits on top of site.css; no site.css class is restyled.
   Pink on this page: the portrait field, the point, the 62, the selected arc, the latest bar. Nothing else. */

/* ---------- shared small pieces ---------- */
.hm-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.hm-tap{display:inline-block;padding-block:9px}            /* text links reach 44px on a phone */
.hm-sum{padding-block:11px}
.hm-tag{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hm-measure{max-width:32em}

/* ---------- 3. the Power Map band ---------- */
.hm-map{margin-top:clamp(64px,9vw,128px)}
.hm-map-top{align-items:end;row-gap:20px}
.hm-map-top p{color:var(--ink2);font-size:19px;line-height:1.4;padding-bottom:.3em}
.hm-stage{margin-top:clamp(40px,5vw,72px);row-gap:28px;align-items:center}

/* the wheel: one wedge per channel, grouped into five arcs */
.hm-wheel{position:relative;aspect-ratio:1;width:100%;max-width:600px}
.hm-wheel svg{width:100%;height:100%}
.hm-wheel g{cursor:pointer}
.hm-wheel path{fill:var(--ink);transition:fill .15s}
.hm-wheel path.hit{fill:transparent}
.hm-wheel g:hover path:not(.hit){fill:var(--ink2)}
.hm-wheel g.on path:not(.hit){fill:var(--pink)}
.hm-hub{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;pointer-events:none}

/* the five arc names: the keyboard way into the wheel */
.hm-arclist{margin-top:14px;min-height:calc(5 * 58px)}
.hm-arclist li{border-top:1px solid var(--line)}
.hm-arclist li:last-child{border-bottom:1px solid var(--line)}
.hm-arclist button{display:grid;grid-template-columns:2.2em minmax(0,1fr);column-gap:10px;align-items:baseline;width:100%;min-height:57px;padding:12px 0;text-align:left;font-size:clamp(20px,2vw,26px);line-height:1.2;color:var(--ink2);transition:color .15s}
.hm-arclist b{font-weight:800;font-variant-numeric:tabular-nums}
.hm-arclist span{justify-self:start;font-stretch:118%;font-weight:800;letter-spacing:-.03em}
.hm-arclist button:hover,.hm-arclist button[aria-pressed="true"]{color:var(--ink)}
.hm-arclist button[aria-pressed="true"] span{box-shadow:inset 0 -2px 0 var(--ink)}
.hm-read{margin-top:16px;min-height:4.4em;max-width:22em;font-size:17px;line-height:1.45;color:var(--ink2)}
.hm-read b{color:var(--ink);font-weight:700}

.hm-count .src{margin-bottom:10px}

@media (max-width:800px){
  .hm-wheel{order:-1;max-width:320px}
  .hm-count{--max:170px}
}

/* ---------- 4. Intros ---------- */
.hm-in-top{row-gap:20px}
.hm-in-top .lead{margin-top:18px}
.hm-steps{margin-top:clamp(40px,5vw,64px)}
.hm-pays{margin-top:clamp(24px,4vw,56px);row-gap:16px}
.hm-pays .lead{margin-bottom:26px}

/* ---------- 5. the essay: one pull quote in the reading face ---------- */
.hm-quote{margin-top:clamp(28px,3.6vw,48px);font-family:var(--read);font-weight:400;font-size:clamp(30px,4.7vw,66px);line-height:1.06;letter-spacing:-.02em;text-indent:-.42em;text-wrap:balance}
.hm-essay-b{margin-top:clamp(32px,4vw,56px);row-gap:14px}
.hm-essay-b h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.hm-essay-b .lead{margin:12px 0 26px}
.hm-essay-b .note{margin-top:14px}

/* ---------- 7. built in public ---------- */
.hm-log{row-gap:20px}
.hm-log .log{margin-block:24px 22px}