/* -------------------------------------------------------------------------
   style.css
   Small additions on top of Tailwind (loaded via CDN in each page's head).
   Keep this file short — layout and spacing should live in Tailwind
   classes in the HTML, not here. This file is for things Tailwind's
   utility classes can't express cleanly: font-face setup, focus rings,
   the terminal-cursor blink, and reduced-motion overrides.
   ------------------------------------------------------------------------- */

:root {
  --ink: #0f1115;
  --paper: #f7f5f0;
  --denim: #3b5ba5;
  --amber: #d4772c;
  --sage: #5b8266;
  --warmgray: #8a8578;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--paper);
  color: var(--ink);
}

/* Visible keyboard focus everywhere — never remove outline without a
   replacement. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--denim);
  outline-offset: 3px;
  border-radius: 2px;
}

/* One-time cursor blink used in the hero. Purely decorative — never used
   to convey information — and disabled below for reduced motion. */
.cursor-blink {
  display: inline-block;
  width: 0.55ch;
  margin-left: 2px;
  background-color: var(--amber);
  animation: blink 1s steps(1) 6; /* blinks a handful of times, then stops */
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Journey graph node reveal-on-scroll. JS toggles .is-visible; CSS just
   defines the transition. */
.journey-node {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.journey-node.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile nav panel */
.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.mobile-nav.is-open {
  max-height: 24rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cursor-blink {
    animation: none;
    opacity: 1;
  }

  .journey-node {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mobile-nav {
    transition: none;
  }
}