/*
 * DEVLOG / CHANGELOG
 * ==================
 * Concept: "Field notes from the build." A chronological diary that feels 
 * like reading someone's engineering notebook. The vertical thread line 
 * makes time physical — entries are knots on a rope.
 *
 * Hook: The continuous thread connecting entries, date stamps sitting on the 
 * line, and tag colors that tell you the nature of each entry at a glance
 * (shipped, learned, fixed, idea) before you read a word.
 *
 * Why Newsreader? An editorial serif designed for long-form reading at screen
 * sizes. Variable optical sizing means it's crisp at small body text AND 
 * expressive at display size. It's a *reading* font — which is what a diary needs.
 */

:root {
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono:  'IBM Plex Mono', 'Consolas', monospace;
  
  --bg:         #18161e;
  --text:       #ddd8ce;
  --text-mid:   #9e968a;
  --text-quiet: #5e584e;
  --accent:     #a88e6e;
  --thread:     #2e2a24;
  --thread-dot: #5e5448;

  /* Tag colors — muted but distinct */
  --tag-ship:   #6e9e72;
  --tag-learn:  #7e8eb0;
  --tag-fix:    #b08e6e;
  --tag-idea:   #9e7eb0;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:         #f4f1eb;
    --text:       #2a2620;
    --text-mid:   #6e6458;
    --text-quiet: #a8a090;
    --accent:     #7a6442;
    --thread:     #d8d2c6;
    --thread-dot: #b0a898;
    --tag-ship:   #3e7842;
    --tag-learn:  #4e5e80;
    --tag-fix:    #806e42;
    --tag-idea:   #6e4e80;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--text);
  background: var(--bg);
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 2rem;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--bg); }

/* HEADER */
.header { margin-bottom: 3.5rem; }

.label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}

.desc {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 440px;
}

/* THREAD — the vertical line connecting entries */
.thread {
  position: relative;
  padding-left: 2.5rem;
}

/* The continuous vertical thread */
.thread::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--thread);
}

/* LOG ENTRIES */
.log {
  margin-bottom: 3rem;
  position: relative;
  /* reveal animation */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

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

/* The dot on the thread for each entry */
.log::before {
  content: '';
  position: absolute;
  left: -2.5rem;
  top: 0.2rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--thread-dot);
  transform: translateX(-0.5px);
  transition: border-color 0.3s var(--ease);
}

.log:hover::before {
  border-color: var(--accent);
}

/* MARKER — date + tag */
.log__marker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}

.log__date {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-quiet);
  letter-spacing: 0.04em;
}

.log__tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
}

.log__tag--ship   { color: var(--tag-ship);  background: color-mix(in srgb, var(--tag-ship) 15%, transparent); }
.log__tag--learn  { color: var(--tag-learn); background: color-mix(in srgb, var(--tag-learn) 15%, transparent); }
.log__tag--fix    { color: var(--tag-fix);   background: color-mix(in srgb, var(--tag-fix) 15%, transparent); }
.log__tag--idea   { color: var(--tag-idea);  background: color-mix(in srgb, var(--tag-idea) 15%, transparent); }

/* BODY */
.log__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.log__body p {
  font-size: 0.92rem;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 0.8rem;
}

.log__body p:last-child {
  margin-bottom: 0;
}

/* FOOTER */
.footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--thread);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-quiet);
  text-align: center;
  letter-spacing: 0.05em;
}

/* RESPONSIVE */
@media (max-width: 640px) {
  body { padding: 2rem 1rem; }
  .thread { padding-left: 2rem; }
  .log::before { left: -2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .log { opacity: 1; transform: none; transition: none; }
}