/* The guide: Lofty floating on the right of every page, and the chat that opens from him
   (site-src/assets/guide.js). Warm paper, 2px edges, a pressable lip, one gold action; he moves
   slowly and only a little, and not at all with reduced motion. Loaded on every page by build_site.py. */
.mhg{--g-paper:#fffaf0;--g-card:#fffdf8;--g-line:#e3d6b6;--g-lip:#cdbb92;--g-gold:#d9a55b;--g-gold-lip:#a8742c;
  --g-you:#f6e2b8;--g-ink:#2d2517;--g-ink2:#5b4e35;--g-mut:#7a6a4c;--g-r:16px;
  --g-body:var(--f-body,'Noticia Text',Georgia,serif);--g-disp:var(--f-disp,'Oswald','Arial Narrow',sans-serif);
  --g-mono:var(--f-mono,'IBM Plex Mono',ui-monospace,monospace)}
.mhg *,.mhg *::before,.mhg *::after{box-sizing:border-box}

/* the chat */
.mhg-panel{position:fixed;z-index:58;width:min(392px,calc(100vw - 24px));display:flex;flex-direction:column;
  background:var(--g-paper);border:2px solid var(--g-line);border-radius:22px;
  box-shadow:0 5px 0 var(--g-lip),0 24px 60px #5a482838;color:var(--g-ink);transform-origin:top right}
/* the tail that points up at Lofty */
.mhg-panel::before{content:"";position:absolute;top:-9px;right:var(--tail-x,26px);width:14px;height:14px;background:var(--g-paper);
  border-left:2px solid var(--g-line);border-top:2px solid var(--g-line);transform:rotate(45deg);border-radius:4px 0 0 0}
.mhg-log,.mhg-ft{position:relative}
.mhg-hd{border-radius:20px 20px 0 0;background:var(--g-paper);position:relative}
.mhg-ft{border-radius:0 0 20px 20px}
@media(min-width:641px){.mhg-panel .mhg-hd .mhg-me{display:none}.mhg-hd{padding-left:18px}}
.mhg-panel[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){.mhg-panel.in{animation:mhg-open .18s cubic-bezier(.2,.9,.3,1)}}
@keyframes mhg-open{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.mhg-hd{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 14px;border-bottom:2px solid #efe5cc}
.mhg-hd .mhg-me{width:38px;height:44px;flex:0 0 auto;display:grid;place-items:center}
.mhg-hd .mhg-me svg{height:44px;width:auto}
.mhg-hd .t{flex:1;min-width:0}
.mhg-hd h2{margin:0;font:500 17px/1.15 var(--g-disp);letter-spacing:.02em;color:var(--g-ink)}
.mhg-hd p{margin:2px 0 0;font:11px/1.3 var(--g-mono);color:var(--g-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mhg-ic{width:34px;height:34px;border-radius:12px;border:2px solid transparent;background:none;color:var(--g-ink2);
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.mhg-ic:hover{background:#f3ead4;border-color:#eadfc3}
.mhg-ic:focus-visible{outline:3px solid #e9c98c}
.mhg-ic svg{width:18px;height:18px}

.mhg-log{flex:1;min-height:0;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:10px;
  overscroll-behavior:contain;scroll-behavior:smooth}
.mhg-row{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.mhg-row.you{justify-content:flex-end}
.mhg-av{width:30px;height:36px;flex:0 0 30px;display:grid;place-items:end center}
.mhg-av svg{height:34px;width:auto}
.mhg-av.blank{visibility:hidden}
.mhg-col{display:flex;flex-direction:column;gap:7px;min-width:0;max-width:calc(100% - 38px)}
.mhg-b{padding:10px 13px;border-radius:18px 18px 18px 6px;background:var(--g-card);border:2px solid #ece2c8;
  font:15px/1.5 var(--g-body);color:var(--g-ink);overflow-wrap:anywhere;white-space:pre-wrap}
.mhg-row.you .mhg-b{border-radius:18px 18px 6px 18px;background:var(--g-you);border-color:#ecd29b;max-width:82%}
.mhg-b.err{background:#fbf0ec;border-color:#efc9bf;color:#7d2b22}
.mhg-links{display:flex;flex-wrap:wrap;gap:6px}
.mhg-link{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;text-decoration:none;
  background:var(--g-paper);border:2px solid var(--g-line);box-shadow:0 2px 0 var(--g-lip);
  font:500 12.5px/1.2 var(--g-disp);letter-spacing:.04em;color:var(--g-ink);transition:transform .08s,box-shadow .08s}
.mhg-link:hover{border-color:#c9a865}
.mhg-link:active{transform:translateY(2px);box-shadow:0 0 0 var(--g-lip)}
.mhg-link::after{content:"→";color:#8a5d14}
.mhg-dots{display:inline-flex;gap:4px;padding:4px 2px}
.mhg-dots i{width:7px;height:7px;border-radius:50%;background:#c9b07c}
@media(prefers-reduced-motion:no-preference){.mhg-dots i{animation:mhg-dot 1s infinite ease-in-out}
  .mhg-dots i:nth-child(2){animation-delay:.15s}.mhg-dots i:nth-child(3){animation-delay:.3s}}
@keyframes mhg-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.mhg-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 4px 38px}
.mhg-chip{padding:8px 13px;border-radius:999px;background:var(--g-paper);border:2px solid var(--g-line);
  box-shadow:0 2px 0 var(--g-lip);font:14px/1.2 var(--g-body);color:var(--g-ink);cursor:pointer;text-align:left;
  transition:transform .08s,box-shadow .08s,border-color .15s}
.mhg-chip:hover{border-color:#c9a865;background:#fff6e3}
.mhg-chip:active{transform:translateY(2px);box-shadow:0 0 0 var(--g-lip)}

.mhg-ft{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:2px solid #efe5cc;background:var(--g-paper)}
.mhg-form{display:flex;gap:8px;align-items:flex-end}
.mhg-in{flex:1;min-width:0;resize:none;max-height:120px;min-height:44px;padding:11px 14px;border-radius:14px;
  border:2px solid var(--g-line);background:#fff;font:15px/1.4 var(--g-body);color:var(--g-ink);outline:none}
.mhg-in:focus{border-color:var(--g-gold);box-shadow:0 0 0 3px #f3dfb4}
.mhg-in::placeholder{color:#a09173}
.mhg-send{width:44px;height:44px;flex:0 0 44px;border-radius:14px;border:0;background:var(--g-gold);color:#241a08;
  box-shadow:0 4px 0 var(--g-gold-lip);display:grid;place-items:center;cursor:pointer;transition:transform .08s,box-shadow .08s}
.mhg-send:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--g-gold-lip)}
.mhg-send:disabled{background:#eadfc6;box-shadow:0 4px 0 #d6c8a6;color:#9a8b6d;cursor:default}
.mhg-send svg{width:20px;height:20px}
.mhg-meta{margin:8px 2px 0;font:10.5px/1.3 var(--g-mono);color:var(--g-mut);letter-spacing:.02em}

/* phones: the chat is a sheet from the bottom */
@media(max-width:640px){
  .mhg-panel{left:0!important;right:0!important;top:auto!important;bottom:0;width:100%;height:84vh!important;
    border-radius:22px 22px 0 0;border-bottom:0;box-shadow:0 -10px 40px #5a482833;transform-origin:bottom center}
  @media(prefers-reduced-motion:no-preference){.mhg-panel.in{animation:mhg-sheet .22s cubic-bezier(.2,.9,.3,1)}}
}
@keyframes mhg-sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}


/* ── Lofty, floating ── */
.mhg-float{position:fixed;z-index:55;display:flex;align-items:center;gap:6px;pointer-events:none}
.mhg-float > *{pointer-events:auto}
.mhg-float.away{opacity:0;visibility:hidden}
.mhg-lofty{position:relative;width:60px;height:78px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.mhg-lofty:hover{transform:translateY(-4px) scale(1.04)}
.mhg-lofty:active{transform:translateY(1px) scale(.97)}
.mhg-lofty:focus-visible{outline:3px solid #e9c98c;outline-offset:2px;border-radius:18px}
.mhg-fig{display:block;filter:drop-shadow(0 8px 10px #5a48282e)}
.mhg-fig svg{height:68px;width:auto;display:block}
.mhg-shade{position:absolute;left:50%;bottom:0;width:30px;height:7px;margin-left:-15px;border-radius:50%;
  background:radial-gradient(closest-side,#2d251733,transparent)}
.mhg-tag{order:-1;padding:7px 12px 7px 11px;border-radius:999px;background:var(--g-paper);border:2px solid var(--g-line);
  box-shadow:0 2px 0 var(--g-lip),0 6px 18px #5a48281f;font:500 12px/1 var(--g-disp);letter-spacing:.1em;text-transform:uppercase;
  color:var(--g-ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:transform .15s,opacity .2s}
.mhg-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#5f9a4c;box-shadow:0 0 0 3px #5f9a4c33}
.mhg-tag:hover{transform:translateX(-2px)}
.mhg-float.open .mhg-tag{visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .mhg-fig{animation:mhg-bob 6.5s ease-in-out infinite}
  .mhg-shade{animation:mhg-shade 6.5s ease-in-out infinite}
  .mhg-float.think .mhg-fig{animation-duration:1.8s}
  .mhg-float.think .mhg-shade{animation-duration:1.8s}
  .mhg-float.arrive{animation:mhg-descend 1.5s cubic-bezier(.22,.9,.25,1) both}
  .mhg-float.arrive .mhg-tag{animation:mhg-tag .5s 1.2s cubic-bezier(.2,.9,.3,1.3) both}
  .mhg-float.arrive[data-edge="bottom"]{animation-name:mhg-ascend}
  .mhg-float.show{animation:mhg-fade .5s ease both}
}
@keyframes mhg-bob{0%,100%{transform:translateY(0) rotate(-1.6deg)}50%{transform:translateY(-6px) rotate(1.6deg)}}
@keyframes mhg-shade{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.78);opacity:.55}}
@keyframes mhg-descend{0%{opacity:0;transform:translate(24px,-150px) rotate(8deg)}55%{opacity:1;transform:translate(-4px,10px) rotate(-3deg)}
  80%{transform:translate(1px,-3px) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes mhg-ascend{0%{opacity:0;transform:translateY(140px)}60%{opacity:1;transform:translateY(-8px)}100%{opacity:1;transform:none}}
@keyframes mhg-tag{from{opacity:0;transform:translateX(10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes mhg-fade{from{opacity:0}to{opacity:1}}

/* ── what he says beside him ── */
.mhg-bub{position:fixed;z-index:56;width:min(330px,calc(100vw - 110px));padding:16px 18px 14px;
  background:var(--g-card);border:2px solid var(--g-line);border-radius:20px;color:var(--g-ink);
  box-shadow:0 4px 0 var(--g-lip),0 18px 44px #5a482829;font:16px/1.45 var(--g-body)}
.mhg-bub:not(.rich){cursor:pointer;width:auto;max-width:min(300px,calc(100vw - 110px));padding:12px 38px 12px 16px}
.mhg-bub-t{margin:0;padding-right:18px;min-height:1.45em}
.mhg-bub-t b{font-weight:700}
.mhg-bub .mhg-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:10px;background:none;
  color:var(--g-mut);display:grid;place-items:center;cursor:pointer}
.mhg-bub .mhg-x svg{width:14px;height:14px}
.mhg-bub .mhg-x:hover{background:#f1e7d0;color:var(--g-ink)}
.mhg-bub-chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.mhg-bub .mhg-form{margin-top:12px}
.mhg-bub .mhg-in{min-height:42px;padding:10px 13px;font-size:15px}
.mhg-bub .mhg-send{width:42px;height:42px;flex-basis:42px;border-radius:13px}
.mhg-bub::before{content:"";position:absolute;width:14px;height:14px;background:var(--g-card);border:2px solid var(--g-line);
  border-radius:4px;transform:rotate(45deg)}
.mhg-bub[data-tail="right"]::before{right:-9px;top:24px;border-left-color:transparent;border-bottom-color:transparent}
.mhg-bub[data-tail="up"]::before{top:-9px;right:var(--tail-x,24px);border-right-color:transparent;border-bottom-color:transparent}
.mhg-bub[data-tail="down"]::before{bottom:-9px;right:var(--tail-x,24px);border-left-color:transparent;border-top-color:transparent}
@media(prefers-reduced-motion:no-preference){.mhg-bub{animation:mhg-pop .28s cubic-bezier(.2,.9,.3,1.2)}}
@keyframes mhg-pop{from{opacity:0;transform:translateX(8px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .mhg-bub,.mhg-bub:not(.rich){width:auto;max-width:none}
  .mhg-lofty{width:52px;height:66px}.mhg-fig svg{height:58px}
  .mhg-tag{display:none}
  .mhg-float.open{display:none}
  .mhg-panel::before{display:none}
}
@media print{.mhg-float,.mhg-bub,.mhg-panel{display:none!important}}

/* ── in an atlas: at the top left of the top bar, in place of the logo ── */
.mhg-float.inbar{position:relative;top:auto!important;right:auto!important;bottom:auto!important;z-index:auto;gap:2px;margin:-6px 0 -6px -6px}
.mhg-float.inbar .mhg-lofty{width:40px;height:50px}
.mhg-float.inbar .mhg-fig svg{height:42px}
.mhg-float.inbar .mhg-fig{filter:drop-shadow(0 4px 5px #5a482826)}
.mhg-float.inbar .mhg-shade{display:none}
.mhg-float.inbar .mhg-tag{order:1;padding:5px 9px 5px 8px;font-size:10.5px;box-shadow:0 2px 0 var(--g-lip)}
.mhg-float.inbar .mhg-tag::before{width:6px;height:6px}
.mhg-float.inbar.open .mhg-tag{visibility:visible}
@media(prefers-reduced-motion:no-preference){
  .mhg-float.inbar .mhg-fig{animation-name:mhg-bob-sm}
  .mhg-float.inbar.arrive{animation:mhg-fade .5s ease both}
}
@keyframes mhg-bob-sm{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
.mhg-home{cursor:pointer;border-radius:8px}
.mhg-home:hover h1{color:var(--amber-hi,#7a520f)}
.mhg-home:focus-visible{outline:3px solid #e9c98c;outline-offset:3px}
.mhg-panel[data-side="left"]{transform-origin:top left}
.mhg-panel[data-side="left"]::before{right:auto;left:var(--tail-x,20px)}
.mhg-bub[data-tail="upleft"]::before{top:-9px;left:var(--tail-x,20px);border-right-color:transparent;border-bottom-color:transparent}
@media(max-width:640px){.mhg-float.inbar .mhg-tag{display:none}.mhg-float.inbar.open{display:flex}}