/* Grimberg Studio — base element styles and pixel utilities.
   Split out of tokens.css so a page can take the palette without the element rules:
   the home page paints its own chrome over the hero. Link tokens.css first.

   There is deliberately no blanket `img { image-rendering: pixelated }`: the site mixes pixel art
   with painted concept art, so nearest-neighbour is opt-in through .pixelart / .mob below. */

/* Base */
html { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
body { margin: 0; line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--color-heading); font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-4); }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; text-decoration-thickness: var(--px); text-underline-offset: var(--px); }
:focus-visible { outline: var(--px) solid var(--color-focus); outline-offset: var(--px); }
::selection { background: var(--ember-1); color: var(--bg-0); }
hr { border: 0; height: calc(var(--px) * 2); background: var(--dither-checker); margin: var(--space-16) 0; }

/* Utility classes for the pixel parts */
.px-box   { box-shadow: var(--pixel-border), var(--shadow-md); }
.px-notch { clip-path: var(--notch); }
.px-label { font-family: var(--font-pixel); font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

/* ---- Pixel-art media --------------------------------------------------
   Opt-in nearest-neighbour. .mob is the creature sprite set (~40x50 native); every width used
   for one is a whole multiple of that, so its grid never lands on a half pixel. */
.pixelart { image-rendering: pixelated; image-rendering: crisp-edges; }
.mob { image-rendering: pixelated; height: auto; display: block; }
.mob-aside { float: right; margin: 0 0 1rem 1.5rem; }
@media (max-width: 560px) { .mob-aside { float: none; margin: 0 0 1rem; } }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-block; margin-top: 1.5rem; padding: 14px 26px 12px;
  font: 400 20px/1 var(--font-pixel); letter-spacing: .08em; text-transform: uppercase;
  background: var(--ember-1); color: var(--bg-0); text-decoration: none; clip-path: var(--notch);
  box-shadow: inset var(--px) var(--px) 0 0 rgba(255,255,255,.35),
              inset calc(-1*var(--px)) calc(-1*var(--px)) 0 0 rgba(0,0,0,.3);
}
.btn:hover { background: var(--ember-0); text-decoration: none; color: var(--bg-0); }