/* Shared base styles — pairs with theme.js. Tokens from brand_assets/design.md. */

body {
  color: #F8F7F4;
  font-family: Inter, sans-serif;
  /* Signal-fire glow: ember bleeding from the top, fading out by ~600px,
     over the obsidian base. */
  background-color: #0B0C10;
  background-image: radial-gradient(
    ellipse 900px 600px at 50% -100px,
    rgba(204, 62, 0, 0.07),
    transparent 70%
  );
  background-repeat: no-repeat;
}

/* Focus ring per design.md §6 */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #CC3E00;
  outline-offset: 2px;
}

/* ---- Post list: ~3 rows visible, scroll inside for older ones ----
   Ember scrollbar on Iron track — Simon's call, July 2026 (design.md §4). */
.post-scroller {
  /* ~3 rows + a sliver of the 4th, so the scroll is discoverable. */
  max-height: 520px;
  overflow-y: auto;
  /* overflow-y alone computes overflow-x to auto, and the 4px hover shift
     on .post-row would then summon a horizontal scrollbar. Never that. */
  overflow-x: hidden;
}
/* Firefox only. In Chrome these standard properties would disable the
   ::-webkit-scrollbar styling below, so they must not reach it. */
@supports (-moz-appearance: none) {
  .post-scroller {
    scrollbar-width: thin;
    scrollbar-color: #CC3E00 #171A21;
  }
}
.post-scroller::-webkit-scrollbar {
  width: 8px;
}
.post-scroller::-webkit-scrollbar-track {
  background: #171A21;
}
.post-scroller::-webkit-scrollbar-thumb {
  background: #CC3E00;
}
.post-scroller::-webkit-scrollbar-thumb:hover {
  background: #E04A08;
}

/* ---- Masthead load-in: opacity + transform only, restrained ---- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal 0.6s ease-out forwards;
}
.reveal-2 { animation-delay: 0.12s; }
@keyframes reveal {
  to { opacity: 1; transform: none; }
}

/* ---- Scroll reveals (progressive: hidden only when JS is running) ---- */
html.js .scroll-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
html.js .scroll-reveal:nth-child(2) { transition-delay: 0.08s; }
html.js .scroll-reveal:nth-child(3) { transition-delay: 0.16s; }
html.js .scroll-reveal.in-view {
  opacity: 1;
  transform: none;
}

/* ---- Nav links: one ember underline at a time ----
   Active page's link (.nav-active) is underlined at rest; while any OTHER
   nav link is hovered, the active underline retracts so exactly one
   underline is ever visible. Old browsers without :has() just show both. */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: #CC3E00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease-out;
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-active::after {
  transform: scaleX(1);
}
.nav-links:has(.nav-link:hover) .nav-active:not(:hover)::after,
.nav-links:has(.nav-link:focus-visible) .nav-active:not(:focus-visible)::after {
  transform: scaleX(0);
}

/* ---- Post rows: shift right, title warms to ember, arrow slides in ---- */
.post-row {
  transition: transform 0.2s ease-out;
}
.post-row:hover {
  transform: translateX(4px);
}
/* Once the scroll-reveal has landed, its higher-specificity `transform: none`
   would cancel the hover shift — restate both at matching specificity. */
html.js .post-row.scroll-reveal.in-view {
  transition: transform 0.2s ease-out;
}
html.js .post-row.scroll-reveal.in-view:hover {
  transform: translateX(4px);
}
.post-row .post-title {
  transition: color 0.2s ease-out;
}
.post-row:hover .post-title {
  color: #CC3E00;
}
.post-row .post-arrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  color: #CC3E00;
}
.post-row:hover .post-arrow {
  opacity: 1;
  transform: none;
}

/* ---- Buttons: press feedback ---- */
.btn-ember:active {
  transform: translateY(1px);
}

/* ---- Reduced motion: everything visible, nothing moves ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  html.js .scroll-reveal { opacity: 1; transform: none; transition: none; }
  .nav-link::after { transition: none; }
  .post-row, .post-row .post-title, .post-row .post-arrow { transition: none; }
  .post-row:hover,
  html.js .post-row.scroll-reveal.in-view:hover { transform: none; }
  .post-row:hover .post-arrow { opacity: 1; transform: none; }
  .btn-ember:active { transform: none; }
}

/* Post body text */
.prose-post p {
  color: rgba(248, 247, 244, 0.6);
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 65ch;
}