/* AJ Chef — shared reset + primitives.
   Each concept defines its own palette/type locally; this only normalises. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* graceful image slots — show a designed placeholder until the real photo is present.
   Usage: <span class="imgbox"><span class="ph" data-label="Adam · live-fire">…</span><img onerror="this.remove()"></span> */
.imgbox { position: relative; display: block; overflow: hidden; background: #1a1612; }
.imgbox .ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; text-align: center; padding: 18px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(224,134,70,.22), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #2a221b, #15110d);
  color: #e9ddcc;
}
.imgbox .ph::before {
  content: ""; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(233,221,204,.45);
  background: radial-gradient(circle at 50% 42%, rgba(233,221,204,.5) 0 5px, transparent 6px);
}
.imgbox .ph b { font: 600 12px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .03em; }
.imgbox .ph small { font: 500 10.5px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.imgbox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* JS-injected fallback that fills an img's parent when the photo is absent */
.ph-fallback {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 7px;
  align-items: center; justify-content: center; text-align: center; padding: 18px;
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(224,134,70,.20), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #2a221b, #14110d);
  color: #ece0cf;
}
.ph-fallback::before {
  content: ""; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(236,224,207,.5);
  background: radial-gradient(circle at 50% 42%, rgba(236,224,207,.55) 0 6px, transparent 7px);
  margin-bottom: 2px;
}
.ph-fallback b { font: 600 13px/1.35 ui-sans-serif, system-ui, sans-serif; letter-spacing: .02em; max-width: 24ch; }
.ph-fallback small { font: 600 9.5px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; opacity: .55; }