/* ============================================================
   makaimorais.com — shared site chrome
   Loaded by every page, AFTER tokens.css.

   Deliberately NOT in tokens.css: that file is design tokens only,
   and component rules leaking into it is how --signal drifted the
   first time. Tokens declare values; this declares chrome.
   ============================================================ */

/* ---------- brand mark: the 3D avatar's head, not initials ---------- */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .headmark{
  width:38px;height:38px;flex:none;display:block;
  border-radius:999px;background:var(--butter);
  object-fit:cover;object-position:50% 50%;   /* crop is already centred on the skull */
  transition:transform var(--t-ui) var(--eo);
}
.brand:hover .headmark{transform:translateY(-2px) rotate(-4deg)}
.brand b,.brand .word{display:none}          /* MM + the wordmark are retired */

/* The name beside the mark, in the hero's MAKAI MORAIS treatment shrunk to
   header scale: sand fill, ink stroke, magenta offset. Stroke and offset are
   scaled DOWN with the type — the hero's 3px stroke at 19px would close up
   Anton's counters entirely. paint-order keeps the stroke behind the glyph. */
.brand .brandname{
  font-family:var(--display);text-transform:uppercase;
  font-size:19px;line-height:1;letter-spacing:.005em;white-space:nowrap;
  color:var(--sand);
  -webkit-text-stroke:1.1px var(--ink);
  paint-order:stroke fill;
  text-shadow:1.6px 1.6px 0 var(--magenta), 3.2px 3.2px 0 rgba(19,10,5,.13);
  transition:transform var(--t-ui) var(--eo);
}
.brand:hover .brandname{transform:translateY(-1px)}
@media (max-width:560px){ .brand .brandname{display:none} }   /* mark alone on a phone */

/* ---------- cursor ----------
   A single dot, nothing trailing it. The easing ring read as clutter, so it is
   gone rather than shrunk. The dot still swells over anything interactive so
   the cursor keeps telling you what is clickable.

   Guard order matters: pointer-events off so it never eats a click, and the
   native cursor is hidden ONLY once the replacement is in the DOM, so a
   failure can never leave the page with no cursor at all. */
.cursor-dot{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:999px;background:var(--ink);will-change:transform;
  transition:width var(--t-fast) var(--eo),height var(--t-fast) var(--eo),
             margin var(--t-fast) var(--eo),background-color var(--t-fast) var(--eo);
}
html.has-cursor,html.has-cursor *{cursor:none !important}
html.has-cursor .cursor-dot.is-hot{
  width:20px;height:20px;margin:-10px 0 0 -10px;background:var(--magenta);
}
/* On dark grounds the ink dot all but disappears — the opened Ikonic folder is
   near-black. Over any dark surface it switches to magenta, the same colour it
   already uses for the hover state, so it stays findable without introducing a
   new colour. Written as a general rule rather than an Ikonic special case:
   any element that opts in with .ftheme, .toolmodal or [data-dark] gets it. */
html.has-cursor .cursor-dot.on-dark{
  background:var(--magenta);
  box-shadow:0 0 0 2px rgba(255,255,255,.22);
}
@media (hover:none),(pointer:coarse){ .cursor-dot{display:none} }