/* SiteByJonah, a Hatsumei Studio service.
   Shared Hatsumei tokens and chrome for every SiteByJonah-owned page
   (same system as /local/ and the claim pages): General Sans, one
   Instrument Serif italic word, grey ground, white panels, black buttons,
   light by default with a remembered dark mode (localStorage "sbj-theme").
   Client sites in /vault/<client>/ do NOT load this file.

   The older pages were written against ink/gold/bone tokens. Those names are
   kept here and remapped onto the Hatsumei palette, so a page that says
   var(--gold) now gets the Hatsumei foreground instead of gold. */
:root{
  --font:"General Sans",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --bg:#f0f0f0;--panel:#ffffff;--fg:#000000;--muted:#696764;--rule:rgba(0,0,0,.1);
  --chip:#ffffff;--chip-hover:#e0e0e0;--btn:#000000;--btn-fg:#ffffff;--soft:#e6e6e6;
  --bad:#c0392b;
  /* legacy names, remapped */
  --ink:var(--bg);--ink-2:var(--panel);--ink-3:var(--soft);
  --gold:var(--fg);--gold-hot:var(--fg);--gold-deep:rgba(0,0,0,.16);
  --bone:var(--fg);--bone-dim:var(--muted);--line:var(--rule);
  --font-display:var(--font);--font-body:var(--font);--font-mono:var(--font);
  --ease-out:cubic-bezier(.19,1,.22,1);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#181818;--panel:#000000;--fg:#ffffff;--muted:#9b9893;--rule:rgba(255,255,255,.1);
  --chip:#000000;--chip-hover:#2c2b2a;--btn:#ffffff;--btn-fg:#000000;--soft:#232323;
  --bad:#ff7a66;
  --gold-deep:rgba(255,255,255,.2);
  color-scheme:dark;
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);transition:background-color .3s,color .3s}
::selection{background:var(--fg);color:var(--bg)}

/* header: separate chips, as on hatsumei.co. Namespaced (hh-) so a page's
   own .chip / .btn classes never collide with it. */
header.hh{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;padding:8px;font-family:var(--font);letter-spacing:-.01em;position:relative;z-index:50}
.hh__l{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.hh__r{display:flex;align-items:center;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.hh-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:0;border-radius:3.2px;background:var(--chip);color:var(--fg);font:550 14px/1 var(--font);letter-spacing:-.02em;text-decoration:none;text-transform:none;cursor:pointer;transition:background-color .2s;white-space:nowrap}
.hh-chip:hover{background:var(--chip-hover);color:var(--fg)}
.hh-chip.is-dark{background:var(--btn);color:var(--btn-fg)}
.hh-chip.is-dark:hover{opacity:.86;background:var(--btn);color:var(--btn-fg)}
.hh-mark{width:20px;height:20px;flex:none}
.hh-theme{width:34px;justify-content:center;padding:0}
.hh-theme svg{width:18px;height:18px}
.hh-endorse{display:block;padding:0 2px;color:var(--muted);font:500 13px/1.3 var(--font);letter-spacing:-.01em;text-decoration:none;text-transform:none}
.hh-endorse b{color:var(--fg);font-weight:550}
.hh-endorse:hover{color:var(--fg)}

/* footer credit, used on pages that had no footer of their own */
.hh-foot{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:48px 8px 8px;padding:20px 22px;border-radius:5px;background:var(--panel);color:var(--fg);font:450 15px/1.4 var(--font);letter-spacing:-.01em}
.hh-foot a{color:var(--fg);font-weight:550;text-decoration:none}
.hh-foot a:hover{opacity:.6}
.hh-foot .hh-mark{width:22px;height:22px}
.hh-foot__h{display:inline-flex;align-items:center;gap:10px}
.hh-foot .m{color:var(--muted)}

/* one Instrument Serif italic word for emphasis */
.hh-em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;text-transform:none}

[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){body{transition:none}}