/* =====================================================================
   Home: what PathoSphere is, section by section. One card per section,
   in that section's colour, each with a way in.
   ===================================================================== */
#view-home{overflow-y:auto; overscroll-behavior:contain}
.hm{max-width:1080px; margin:0 auto; padding:48px 44px 90px}
.hm-hero{padding-bottom:32px; margin-bottom:30px; border-bottom:1px solid var(--line)}
.hm-hero h1{font-family:var(--font-display); font-weight:780; font-size:clamp(34px,4.2vw,52px); line-height:1.04; letter-spacing:-.04em; margin:12px 0 0; text-wrap:balance}
.hm-hero h1 em{font-style:normal; font-weight:250; color:var(--accent)}
/* the logo, large, in Home blue, with the moon orbiting (the orbit traces itself in first) */
/* sized from its own column, so it never runs into the card beside it */
.hm-hero .hero-logo{container-type:inline-size; margin:0; font-weight:760; line-height:1}
.hm-hero .hero-logo em{font-weight:300}
.hl-in{display:flex; align-items:center; gap:.3em; font-size:min(70px,13.4cqi); letter-spacing:-.04em}
.hl-in{padding-bottom:.07em}
.hl-in > span{animation:hl-word .6s .15s cubic-bezier(.2,.8,.2,1) both}
.hl-mark{width:1.75em; height:auto; flex:none; overflow:visible}
.hl-planet{fill:var(--bg); stroke:var(--ink); stroke-width:7; transform-box:fill-box; transform-origin:center; animation:hl-pop .6s cubic-bezier(.2,.8,.2,1) both}
.hl-orbit{fill:none; stroke:var(--accent); stroke-width:6; stroke-dasharray:1; animation:hl-draw .45s .1s ease-in both}
.hl-orbit.front{animation-delay:.55s; animation-timing-function:ease-out}
.hl-moon{fill:var(--accent); animation:hl-fade .4s .9s both}
@keyframes hl-draw{from{stroke-dashoffset:1}}
@keyframes hl-fade{from{opacity:0}}
@keyframes hl-pop{from{opacity:0; transform:scale(.9)}}
@keyframes hl-word{from{opacity:0; transform:translateX(-8px)}}
.hm-hero .hero-logo{margin-top:14px; max-width:720px}
.hm-lead{margin:16px 0 0; font-size:16px; line-height:1.6; color:var(--ink-2)}
.hm-acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:22px}
.hm-acts .primary{padding:8px 16px; min-width:0}
.hm-acts .primary span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.hm-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.hm-card{
  display:flex; flex-direction:column; gap:10px; padding:22px 24px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm);
}
.hm-top{display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px}
.hm-ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 12%,var(--surface))}
.hm-ic svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.hm-card h2{font-family:var(--font-display); font-weight:750; font-size:23px; line-height:1.1; letter-spacing:-.03em; margin:0}
.hm-tag{
  font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 6px; border-radius:5px; border:1px dashed var(--line); color:var(--muted);
}
.hm-what{margin:4px 0 0; font-size:15.5px; font-weight:600; line-height:1.4; letter-spacing:-.01em; color:var(--ink)}
.hm-card ul{margin:0; padding-left:18px; font-size:14px; line-height:1.6; color:var(--ink-2)}
.hm-card li{margin-bottom:5px}
.hm-card li::marker{color:var(--c)}
.hm-card b{font-weight:600; color:var(--ink)}
.hm-go{
  margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:9px;
  border:1px solid color-mix(in srgb,var(--c) 40%,var(--line)); background:color-mix(in srgb,var(--c) 9%,var(--surface));
  color:var(--c); font-size:13.5px; font-weight:600; text-decoration:none; transition:background .15s, border-color .15s;
}
.hm-go:hover{background:color-mix(in srgb,var(--c) 16%,var(--surface)); border-color:var(--c)}

/* what works everywhere: search, the links between sections, the theme */
.hm-all{margin-top:30px; padding-top:26px; border-top:1px solid var(--line)}
.hm-all h2{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
.hm-all dl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 28px; margin:0}
.hm-all dt{font-size:14.5px; font-weight:650; letter-spacing:-.01em; color:var(--ink); margin-bottom:3px}
.hm-all dd{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2)}

@media (max-width:900px){
  .hm{padding:36px 28px 80px}
  .hm-all dl{grid-template-columns:1fr; gap:14px}
}
@media (max-width:680px){
  .hm{padding:28px 18px 70px}
  .hm-grid{grid-template-columns:1fr}
}
@media (pointer:coarse) and (min-width:600px){
  .hm-go{padding:10px 16px; font-size:14px}
  .hm-acts .primary{padding:11px 18px; font-size:14.5px}
  .hm-acts .ghost{padding:10px 14px; font-size:14px}
  .hm-keys{display:none}   /* no keyboard to press them on */
}