/* ============================================================
   PROJECT LOG — design tokens
   ============================================================ */
:root{
  --bg:        #12161f;
  --bg-grid:   #161b26;
  --surface:   #1a2030;
  --surface-hi:#212942;
  --line:      #2a3145;
  --line-soft: #232a3c;
  --ink:       #ece8dc;
  --ink-dim:   #9aa0ae;
  --ink-faint: #616a7d;
  --live:      #e8a33d;
  --live-dim:  #6b5227;
  --link:      #7c9eff;
  --link-dim:  #3a4a86;
  --danger:    #d9695f;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius: 3px;
  --maxw: 880px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:
    linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0/100% 44px,
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }

::selection{ background: var(--live); color: #14171f; }

:focus-visible{
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------- top bar ---------------- */
.topbar{
  border-bottom: 1px solid var(--line-soft);
  padding: 22px 0;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.brand strong{ color: var(--ink); font-weight: 600; }
.topbar nav{ display:flex; gap: 22px; font-family: var(--font-mono); font-size: 13px; }
.topbar nav a{ color: var(--ink-dim); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .15s, border-color .15s; }
.topbar nav a:hover{ color: var(--ink); border-color: var(--line); }

/* ---------------- hero ---------------- */
.hero{ padding: 72px 0 56px; border-bottom: 1px solid var(--line-soft); }
.prompt{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--live);
  margin: 0 0 18px;
  display:flex; align-items:center; gap: 10px;
}
.prompt .cursor{
  display:inline-block; width:8px; height:14px; background:var(--live);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.hero h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 54px);
  line-height: 1.08;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
  max-width: 15ch;
}
.hero p{
  color: var(--ink-dim);
  font-size: 17px;
  max-width: 54ch;
  margin: 0 0 30px;
}

.stat-row{ display:flex; gap: 34px; flex-wrap:wrap; }
.stat{ font-family: var(--font-mono); }
.stat b{ display:block; font-size: 22px; color: var(--ink); font-weight: 600; }
.stat span{ font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------------- log ---------------- */
.log{ position: relative; padding: 56px 0 40px; }
.log-heading{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 30px;
}

.rail{ position: relative; }
.rail::before{
  content:"";
  position: absolute;
  left: 5px; top: 10px; bottom: 10px;
  width: 1px;
  background: var(--line);
}

.entry{
  position: relative;
  padding: 0 0 40px 32px;
}
.entry:last-child{ padding-bottom: 0; }

.node{
  position: absolute;
  left: 0; top: 6px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--surface-hi);
  border: 1px solid var(--line);
}
.entry.is-live .node{
  background: var(--live);
  border-color: var(--live);
  box-shadow: 0 0 0 4px var(--live-dim);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 4px var(--live-dim); }
  50%{ box-shadow: 0 0 0 7px transparent; }
}

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: border-color .15s, transform .15s;
}
.card:hover{ border-color: var(--link-dim); }

.card-top{
  display:flex; align-items:baseline; justify-content:space-between; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.card-title{ display:flex; align-items:baseline; gap: 10px; flex-wrap:wrap; }
.card-title h3{
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin: 0;
}
.ver{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

.badge{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  white-space: nowrap;
}
.badge.live{ color: var(--live); border-color: var(--live-dim); background: rgba(232,163,61,0.08); }
.badge.archived{ color: var(--ink-faint); }

.date{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

.card p.desc{ color: var(--ink-dim); margin: 10px 0 16px; font-size: 15px; max-width: 62ch; }

.stack{ display:flex; flex-wrap:wrap; gap: 8px; margin-bottom: 18px; }
.chip{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 8px;
}

.card-actions{ display:flex; gap: 10px; flex-wrap: wrap; }
.btn{
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 3px;
  border: 1px solid var(--line);
  display:inline-flex; align-items:center; gap: 7px;
  transition: border-color .15s, background .15s, color .15s;
}
.btn.primary{ color: var(--bg); background: var(--link); border-color: var(--link); }
.btn.primary:hover{ background: #92aeff; }
.btn.ghost{ color: var(--ink-dim); }
.btn.ghost:hover{ color: var(--ink); border-color: var(--ink-faint); }
.btn.disabled{ color: var(--ink-faint); opacity: .55; cursor: default; pointer-events: none; }

/* ---------------- footer ---------------- */
footer{
  border-top: 1px solid var(--line-soft);
  padding: 34px 0 48px;
  margin-top: 30px;
}
footer .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 12px; }
footer p{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); margin:0; }
footer .socials{ display:flex; gap: 18px; font-family: var(--font-mono); font-size: 12.5px; }
footer .socials a{ color: var(--ink-dim); }
footer .socials a:hover{ color: var(--link); }

/* ---------------- project detail page ---------------- */
.back-link{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-dim);
  display:inline-flex; align-items:center; gap:8px;
  margin: 28px 0 0;
}
.back-link:hover{ color: var(--link); }

.p-hero{ padding: 26px 0 40px; border-bottom: 1px solid var(--line-soft); }
.p-hero .badge{ margin-bottom: 16px; display:inline-block; }
.p-hero h1{
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.p-hero .tagline{ color: var(--ink-dim); font-size: 17px; max-width: 60ch; margin: 0 0 26px; }

.meta-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
  gap: 18px;
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
}
.meta-grid dt{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.meta-grid dd{ margin:0; font-size: 14.5px; color: var(--ink); }

.p-actions{ display:flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

section.block{ padding: 44px 0; border-bottom: 1px solid var(--line-soft); }
section.block:last-of-type{ border-bottom: none; }
.block h2{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--live);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 18px;
}
.block .lede{ font-size: 17px; color: var(--ink); max-width: 66ch; margin: 0 0 16px; }
.block p{ color: var(--ink-dim); max-width: 66ch; margin: 0 0 16px; font-size: 15.5px; }

.feature-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 16px;
  margin-top: 8px;
}
.feature{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--surface);
}
.feature h3{ font-family: var(--font-mono); font-size: 14px; margin: 0 0 8px; color: var(--ink); }
.feature p{ margin:0; font-size: 14px; }

/* mock dashboard graphic */
.mock{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
  margin-top: 8px;
}
.mock-bar{ display:flex; align-items:center; gap:8px; margin-bottom: 16px; }
.mock-dot{ width:8px; height:8px; border-radius:50%; background: var(--line-soft); }
.mock-title{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-left: 4px; }
.mock-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 0; border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-dim);
}
.mock-row:first-of-type{ border-top:none; }
.mock-row .name{ color: var(--ink); }
.mock-uptime{ display:flex; gap:2px; }
.mock-uptime i{ width:4px; height:14px; background: var(--live-dim); border-radius:1px; display:block; }
.mock-uptime i.up{ background: var(--live); }
.mock-status{ display:flex; align-items:center; gap:6px; }
.mock-status i{ width:6px; height:6px; border-radius:50%; background: var(--live); }

.stack-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 6px; }

/* ---------------- responsive ---------------- */
@media (max-width: 620px){
  .topbar nav{ gap: 14px; }
  .hero{ padding: 48px 0 40px; }
  .card{ padding: 18px; }
  .stat-row{ gap: 22px; }
}