.hnai{
  --h-mine:#b23d1d; --h-mine-ink:#fffff8; --h-faint:#8b877b;
  width:90%; margin:2.5rem 0 3rem; font-family:var(--sans); hyphens:none; clear:both;
}
@media (prefers-color-scheme: dark){
  .hnai{ --h-mine:#d4542c; --h-mine-ink:#11110e; --h-faint:#8f8a7c; }
}
.hnai p{ width:auto; }
/* text stays as wide as the column: 55% of the page inside a block 90% wide */
.hnai .hnai-ct, .hnai .hnai-sub, .hnai .hnai-note{ max-width:61.1%; }
@media (max-width:860px){
  .hnai{ width:100%; }
  .hnai .hnai-ct, .hnai .hnai-sub, .hnai .hnai-note{ max-width:none; }
}
.hnai .hnai-ct{ font-weight:600; font-size:1.15rem; line-height:1.3; margin:0 0 .3rem; text-wrap:balance; }
.hnai .hnai-sub{ font-size:.95rem; line-height:1.45; color:var(--muted); margin:0 0 1rem; }
.hnai .hnai-rf{ margin-top:2.8rem; margin-bottom:1rem; max-width:none; }
.hnai .hnai-rf em{ font-style:normal; color:var(--h-mine); }

.hnai-x{ position:relative; overflow-x:auto; }
.hnai-x svg{ display:block; }
.hnai-x text{ font-family:var(--sans); font-variant-numeric:lining-nums tabular-nums; }
.hnai-x .x-when{ font-size:12px; font-weight:600; fill:var(--fg); }
.hnai-x .x-name{ font-size:13px; fill:var(--muted); }
.hnai-x .x-layer{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; fill:var(--fg); }
.hnai-x .x-tick{ font-size:11.5px; fill:var(--h-faint); }
.hnai-x circle:focus{ outline:none; }
.hnai-x circle:focus-visible{ stroke:var(--link); stroke-width:3; }
.hnai-tip{ position:absolute; pointer-events:none; background:var(--fg); color:var(--bg); border-radius:6px;
  padding:.45rem .7rem; font-size:.85rem; line-height:1.35; max-width:260px; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.hnai-tip .t-date{ display:block; font-size:.75rem; opacity:.75; }

.hnai-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:3px; }
.hnai-cell{ padding:.9rem .9rem 1rem; display:grid; gap:.45rem; align-content:start; border-radius:4px; }
.hnai-c0{ background:color-mix(in srgb, var(--h-mine) 18%, var(--bg)); }
.hnai-c1{ background:color-mix(in srgb, var(--h-mine) 29%, var(--bg)); }
.hnai-c2{ background:color-mix(in srgb, var(--h-mine) 41%, var(--bg)); }
.hnai-c3{ background:var(--h-mine); color:var(--h-mine-ink); }
.hnai-when{ font-size:.8rem; font-weight:600; font-variant-numeric:lining-nums; }
.hnai-then{ font-family:var(--serif); font-size:1.25rem; line-height:1.25; }
.hnai-cite{ font-size:.85rem; line-height:1.4; color:var(--muted); }
.hnai-c3 .hnai-cite{ color:inherit; }
.hnai-cite a{ color:inherit; font-weight:600; text-decoration:none; }
.hnai-cite a:hover{ text-decoration:underline; }

.hnai .hnai-note{ font-size:.8rem; line-height:1.5; color:var(--h-faint); margin:1.2rem 0 0; max-width:none; text-wrap:pretty; }

@media (prefers-reduced-motion: no-preference){
  .hnai .bite-grow{ clip-path:inset(0 100% 0 0); }
  .hnai.in-view .bite-grow{ animation:hnai-grow 2.2s cubic-bezier(.35,.1,.25,1) both .15s; }
  @keyframes hnai-grow{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
}