/* Styling matched to kasperjunge.com (inspected computed styles):
   IBM Plex Mono, #fafafa bg, #1a1a1a text, #666 muted, underlined dark content links. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --green: #5a8f2e;
}

body {
  background: #fafafa;
  color: #1a1a1a;
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 60px 24px;
}

/* Nav */
nav {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 60px;
}

nav a {
  font-size: 14px;
  color: #666;
  text-decoration: none;
}

nav .logo {
  color: #1a1a1a;
  margin-right: auto;
}

nav .logo span { color: inherit; }

nav a:hover { color: var(--green); }

/* Type */
h1 { font-size: 28px; font-weight: 600; line-height: 1.7; margin: 0 0 16px; }
h2 { font-size: 20px; font-weight: 600; margin: 40px 0 12px; }
h3 { font-size: 15px; font-weight: 600; margin: 24px 0 8px; }

p { margin: 0 0 16px; }

/* Links: hover-only wobble underline (see block at end of file). */
a { color: #1a1a1a; text-decoration: none; }
a:hover { color: var(--green); }

.subhead { color: #666; margin: 0 0 24px; }

.label {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #666;
  margin: 48px 0 4px;
}

.label + h2 { margin-top: 4px; }

.muted { color: #666; }

/* Stats */
.stats { margin: 24px 0; }
.stats div { margin: 0 0 12px; }
.stats span { color: #666; }

.sources { font-size: 13px; color: #666; margin-top: 64px; }
.sources p { margin: 0 0 4px; }
.sources a { color: #666; }
sup { font-size: 11px; }
sup a { color: #666; text-decoration: none; }

/* Quote */
blockquote {
  margin: 40px 0;
  padding-left: 16px;
  border-left: 2px solid #e0e0e0;
  font-style: italic;
}

/* Lists */
ul.signals { padding-left: 22px; margin: 16px 0; }
ul.signals li { margin: 0 0 12px; }

ol.phases { padding-left: 22px; margin: 16px 0; }
ol.phases li { margin: 0 0 16px; }
ol.phases strong { display: block; }

/* CTA */
.cta { margin: 56px 0 0; }
.cta h2 { margin-top: 0; }

/* Posts list (matches reference blog page: no bullets, block dates) */
ul.posts { list-style: none; padding: 0; margin: 24px 0; }
ul.posts li { margin: 0 0 24px; }
ul.posts a { font-size: 16px; }
ul.posts a:hover { color: var(--green); }
ul.posts .date { display: block; font-size: 13px; color: #666; margin-top: 4px; }

/* Article */
article .date { font-size: 13px; color: #666; margin-bottom: 32px; }

/* Article bio */
.bio {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
  font-size: 14px;
  color: #666;
}

/* Footer */
footer {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid #e0e0e0;
  font-size: 13px;
  color: #666;
}

footer a { color: #666; }
footer a:hover { color: var(--green); }

/* ============================================================
   Animation layer — added July 2026
   ============================================================ */

/* Green text selection */
::selection { background: var(--green); color: #fafafa; }
::-moz-selection { background: var(--green); color: #fafafa; }

/* Reading progress bar — pinned to top of viewport, width driven by main.js */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--green);
  z-index: 100;
  pointer-events: none;
  transition: width 100ms linear;
}

/* Wobble underline on hover — content links + nav links (logo excluded) */
.container a:not(.logo),
nav a:not(.logo) {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
  transition: color 200ms ease;
}
.container a:not(.logo)::after,
nav a:not(.logo)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M 0 3 C 8 5, 16 1, 24 3 S 40 5, 48 3 S 64 1, 72 3 S 88 5, 100 3' stroke='%235a8f2e' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
}
.container a:not(.logo):hover::after,
nav a:not(.logo):hover::after {
  transform: scaleX(1);
}

/* Reduced-motion: skip the animation, keep the effects functional */
@media (prefers-reduced-motion: reduce) {
  .container a:not(.logo)::after,
  nav a:not(.logo)::after {
    transition: none;
  }
  .reading-progress { transition: none; }
}