/* The "Related tools" strip above the footer of each tool page (written in by scripts/build-related.js). */
.mh-related{ box-sizing:border-box; width:100%; max-width:var(--mh-w,760px); margin:0 auto; padding:0 16px 6px; container-type:inline-size;
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif; line-height:1.5; text-align:left; color:var(--ink,#221a12); }
.mh-related *{ box-sizing:border-box; }
.mh-related-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 2px 10px; }
.mh-related-head h2{ margin:0; font-family:"Fraunces",Georgia,serif; font-weight:800; font-size:20px; line-height:1.3; letter-spacing:-.01em; color:var(--ink,#221a12); }
.mh-related-head a{ flex:none; font-size:13px; font-weight:700; color:#0e386d; text-decoration:none; }
.mh-related-head a:hover{ text-decoration:underline; }
.mh-related ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.mh-related li{ margin:0; padding:0; min-width:0; }
.mh-related li a{ display:flex; align-items:center; gap:12px; height:100%; padding:11px 12px; border-radius:14px; text-decoration:none; color:inherit;
  background:var(--paper,#fffdf8); border:1.5px solid var(--line,#e8ddc9); box-shadow:0 8px 20px -18px rgba(34,26,18,.5);
  transition:border-color .15s, box-shadow .2s, transform .2s; }
.mh-related li a:hover, .mh-related li a:focus-visible{ border-color:var(--c); box-shadow:inset 3px 0 0 var(--c), 0 12px 22px -16px rgba(34,26,18,.45); transform:translateY(-2px); }
.mh-related li a:focus-visible{ outline:2px solid var(--c); outline-offset:2px; }
.mh-ic{ position:relative; flex:none; display:grid; place-items:center; width:50px; height:50px; border-radius:12px; overflow:hidden; font-size:26px;
  background:#f4eee2; background:color-mix(in oklab, var(--c) 13%, #fffdf8); }
.mh-tx{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.mh-tx b{ font-weight:750; font-size:15px; letter-spacing:-.01em; line-height:1.25; color:var(--ink,#221a12); }
.mh-tx span{ font-size:12.5px; line-height:1.4; color:var(--inksoft,#6f6152); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* print-style illustrations (same system as the landing page and the catalogue) */
.mh-art{ position:absolute; left:0; right:0; top:13%; width:100%; height:74%; overflow:visible; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.mh-related li a:hover .mh-art{ transform:rotate(-5deg) scale(1.08); }
.mh-art .clr{ transform:translate(2.8px,2.6px); }
.mh-art .clr *{ fill:none; stroke:var(--c); stroke-width:4.6; stroke-linecap:round; stroke-linejoin:round; opacity:.42; }
.mh-art .clr .f, .mh-art .clr .k{ fill:var(--c); stroke-width:0; opacity:.92; }
.mh-art .clr .t{ display:none; }
.mh-art .clr g, .mh-art .ink g{ opacity:1; }
.mh-art .ink *{ fill:none; stroke:#16233b; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.mh-art .ink .k{ fill:#16233b; }
.mh-art .ink .t{ fill:#16233b; stroke:none; font-family:"Fraunces",Georgia,serif; font-weight:700; text-anchor:middle; letter-spacing:-.02em; }
.mh-art .ink .t.m{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:500; letter-spacing:0; }
.mh-art .ink .t.w{ fill:#fffdf8; font-family:"Hanken Grotesk",system-ui,sans-serif; font-weight:800; }

/* wide pages: four across, picture on top */
@container (min-width:860px){
  .mh-related ul{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
  .mh-related li a{ flex-direction:column; align-items:flex-start; gap:10px; padding:14px; }
  .mh-tx span{ -webkit-line-clamp:3; }
}
/* phones: one per row */
@container (max-width:470px){
  .mh-related ul{ grid-template-columns:1fr; gap:8px; }
}
/* the coloring gallery ends closer to its footer than the other pages do */
.gallery + .mh-related{ margin-top:26px; }
/* someone opening a scratch card they were sent sees the card, not a list of tools */
body.is-view .mh-related{ display:none; }
@media (prefers-reduced-motion:reduce){ .mh-related li a, .mh-art{ transition:none; } .mh-related li a:hover{ transform:none; } .mh-related li a:hover .mh-art{ transform:none; } }
@media print{ .mh-related{ display:none !important; } }