/* ============================================================
   Design tokens
   Palette: gruvbox-dark inspired (dotfiles/ricing culture),
   with Arch-blue reserved for one accent only.
   ============================================================ */
:root{
  --bg:        #1d2021;
  --bg-1:      #282828;
  --bg-2:      #32302f;
  --border:    #4b4340;
  --fg:        #ebdbb2;
  --fg-dim:    #a89984;
  --fg-faint:  #7c6f64;

  --blue:        #458588;
  --blue-bright: #83a598;
  --arch-blue:   #1793d1;
  --orange:      #fe8019;
  --green:       #b8bb26;
  --yellow:      #fabd2f;
  --red:         #fb4934;
  --purple:      #d3869b;

  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;

  --radius: 5px;
  --gap: 22px;
}

*{ box-sizing:border-box; }

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

html,body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(23,147,209,0.08), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
}

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

a{ color:var(--blue-bright); text-decoration:none; border-bottom:1px solid rgba(131,165,152,0.35); }
a:hover{ color:var(--orange); border-color:var(--orange); }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
}

/* faint CRT scanline texture — static, not animated */
.crt{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.05) 3px
  );
  mix-blend-mode:overlay;
  opacity:0.5;
}

.wrap{
  max-width:900px;
  margin:0 auto;
  padding:56px 20px 40px;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

/* ============================================================
   Terminal windows
   ============================================================ */
.win{
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(0,0,0,0.35);
  overflow:hidden;
}

.titlebar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:var(--bg-2);
  border-bottom:1px solid var(--border);
  font-size:12px;
  color:var(--fg-dim);
}
.titlebar .ws{
  --tag: var(--blue-bright);
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tag);
  color:var(--bg-1);
  font-weight:800;
  border-radius:3px;
  font-size:11px;
}
.titlebar .path{ flex:1; color:var(--fg-dim); }
.titlebar .dots{ display:flex; gap:5px; }
.titlebar .dots i{
  width:8px; height:8px; border-radius:50%;
  background:var(--border);
  display:inline-block;
}

.win-body{ padding:22px 24px; }

/* ============================================================
   Hero / neofetch
   ============================================================ */
.hero-body{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px;
  align-items:center;
}
.logo{
  margin:0;
  color:var(--arch-blue);
  font-size:11px;
  line-height:1.15;
  white-space:pre;
}
.fetch{ min-width:0; }
.prompt-line{ color:var(--fg-dim); margin-bottom:10px; }
.prompt-line .prompt{ color:var(--green); }
.prompt-line .tilde{ color:var(--blue-bright); }
.prompt-line .cmd{ color:var(--fg); }

.fetch-row{
  display:flex;
  gap:10px;
  white-space:pre-wrap;
  word-break:break-word;
}
.fetch-row .key{ color:var(--orange); min-width:9ch; flex-shrink:0; }
.fetch-row .val{ color:var(--fg); }

.cursor{
  display:inline-block;
  width:0.55em; height:1em;
  background:var(--fg);
  vertical-align:text-bottom;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ============================================================
   About
   ============================================================ */
#bio-text{ margin:0 0 16px; color:var(--fg); max-width:60ch; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-size:12px;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--fg-dim);
  background:var(--bg-2);
}

/* ============================================================
   Projects
   ============================================================ */
.projects-head{ margin-bottom:20px; }
.hint{ margin:0; color:var(--fg-dim); font-size:13px; max-width:64ch; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}

.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-2);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}
.card.is-loading{ color:var(--fg-dim); font-size:13px; }
.card.is-error{ border-color:var(--red); }
.card.is-error .card-error{ color:var(--red); font-size:12.5px; margin:0; }
.card.is-error .card-error-hint{ color:var(--fg-faint); font-size:12px; margin:6px 0 0; }

.card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.card-name{ font-weight:700; color:var(--fg); word-break:break-word; }
.card-namespace{ display:block; color:var(--fg-faint); font-size:11.5px; font-weight:400; }

.card-desc{ color:var(--fg-dim); font-size:13px; margin:0; flex:1; }

.card-stats{
  display:flex; gap:14px; font-size:12px; color:var(--fg-dim);
}
.card-stats span{ display:inline-flex; align-items:center; gap:4px; }
.card-stats .star{ color:var(--yellow); }
.card-stats .fork{ color:var(--blue-bright); }

.lang-bar{
  display:flex; height:6px; border-radius:3px; overflow:hidden; background:var(--bg);
}
.lang-bar span{ height:100%; }
.lang-legend{ display:flex; flex-wrap:wrap; gap:8px; font-size:11px; color:var(--fg-dim); }
.lang-legend i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; vertical-align:middle; }

.card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.card-updated{ font-size:11px; color:var(--fg-faint); }
.card-link{ font-size:12px; border-bottom:1px solid transparent; }
.card-link:hover{ border-color:var(--orange); }

/* ============================================================
   Socials
   ============================================================ */
.social-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.social-list li{
  display:flex; align-items:center; gap:12px;
  padding:9px 4px;
  border-bottom:1px solid var(--bg-2);
}
.social-list li:last-child{ border-bottom:none; }
.social-key{ color:var(--purple); min-width:11ch; }
.social-eq{ color:var(--fg-faint); }
.social-list a{ display:inline-flex; align-items:center; gap:8px; border-bottom:none; color:var(--fg); }
.social-list a:hover{ color:var(--orange); }
.social-list svg{ width:16px; height:16px; flex-shrink:0; fill:currentColor; }

/* ============================================================
   Footer
   ============================================================ */
footer{
  text-align:center;
  color:var(--fg-faint);
  font-size:12px;
  padding:8px 0 20px;
}
footer a{ color:var(--fg-faint); border-color:var(--fg-faint); }
footer a:hover{ color:var(--orange); border-color:var(--orange); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:640px){
  .hero-body{ grid-template-columns:1fr; }
  .logo{ font-size:9px; }
  .win-body{ padding:18px 16px; }
}