html { background-color: #FFFFFF; }
body { background-color: #FFFFFF; }

/* Corner-bracket "reticle" frame — the signature motif, reused on
   project media windows and project detail pages. Static frames are
   black; only the hero's mouse-following crosshair (#hero-reticle)
   is red, set inline via its own text-red-600 class. */
.reticle { position: relative; }
.reticle::before,
.reticle::after,
.reticle span::before,
.reticle span::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  opacity: 0.65;
  transition: width .25s ease, height .25s ease, opacity .25s ease;
}
.reticle::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.reticle::after   { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.reticle span::before { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.reticle span::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.reticle:hover::before, .reticle:hover::after,
.reticle:hover span::before, .reticle:hover span::after {
  width: 24px; height: 24px; opacity: 1;
}

/* Scroll-reveal: elements fade + rise into place as they enter view */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Nav link underline draws like a trace on hover */
.trace-link { position: relative; }
.trace-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0%;
  background: #000000; transition: width .25s ease;
}
.trace-link:hover::after { width: 100%; }

::selection { background: #000000; color: #FFFFFF; }

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  #hero-reticle { display: none !important; }
  #entry-gate-target svg { animation: none !important; }
}

/* Entry gate target: instant teleport when it dodges (no transition — an
   eased move can be "followed" by a fast cursor), gentle pulse to draw the eye */
#entry-gate-target svg { animation: gate-pulse 1.8s ease-in-out infinite; }
@keyframes gate-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Visible keyboard focus, consistent across interactive elements */
a:focus-visible, button:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Rendered Markdown documentation on project detail pages */
.docs h1, .docs h2, .docs h3 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  color: #000000;
  margin-top: 2em;
  margin-bottom: 0.6em;
}
.docs h1 { font-size: 1.5rem; }
.docs h2 { font-size: 1.25rem; }
.docs h3 { font-size: 1.05rem; }
.docs h1:first-child, .docs h2:first-child { margin-top: 0; }
.docs p { margin-bottom: 1em; line-height: 1.75; }
.docs ul, .docs ol { margin: 0 0 1em 1.25em; }
.docs ul { list-style: disc; }
.docs ol { list-style: decimal; }
.docs li { margin-bottom: 0.4em; line-height: 1.7; }
.docs code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85em;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.15);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}
.docs pre {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.15);
  padding: 1em;
  border-radius: 4px;
  overflow-x: auto;
  margin-bottom: 1em;
}
.docs pre code { background: none; border: none; padding: 0; }
.docs a { color: #000000; text-decoration: underline; text-underline-offset: 2px; }
.docs strong { color: #000000; font-weight: 600; }
.docs hr { border: none; border-top: 1px solid rgba(0,0,0,0.15); margin: 2em 0; }